Locations Plugin

Top job Robert @merefield :clap: :partying_face:

Before:

And after:


Also before:

And after:

Perfect - thank you :smiley:

1 Like

So great, thank you very much @merefield :+1: :clap:

See here, it is perfect now. Screenshot for the desktop version:

image

I chose to break it into a new line. For mobile I modified the margins and font size a bit.

2 Likes

I just noticed that it is breaking the layout a bit when there are unread posts - even if there is now location:

image

@merefield Is it possible to only have show <span class="location-after-title"></span> if there is a location?
Or even better, putting <span class="location-after-title"></span> after <span class="topic-post-badges">...</span> which produces the bubbles and also only show it when there is a location?

1 Like

Sounds like a reasonable refinement. PR welcome for time being until I get to it.

1 Like

OK, implemented:

@Roi

3 Likes

@merefield oh cool thank you very much! Just updated and reverted the CSS changes. Looks good until now. Lets see how it looks when there are unread posts. Will keep you posted. :slight_smile:

2 Likes

So I achieved this with a Theme Component.

Unfortunately this presently will have to be added to your designated “Dark Theme” and will not switch automatically with a user’s “Dark Mode”.

Nonetheless it’s useful progress to build upon:

:root {
  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

.locations-map {
  .leaflet-tile-pane  {
    filter:var(--map-tiles-filter, none);
  }
  .leaflet-marker-shadow {
    display: none;
  }
}

3 Likes

I have just totally stolen that and implemented it on our dark theme.

Before:

After:

:star_struck:

Thanks Robert :smiley: :clap:

4 Likes

np, I’ll try to make this native behaviour once I have a Dark Mode switch capability.

3 Likes

@merefield thank you for looking into this! :slight_smile: Great approach!

I see. So at this point I cannot use it. I only have one theme and two colors (light an dark) and use the switch to switch between light and dark.

But as you wrote I want to have a switch capability. Looking forward to this. :slight_smile:

How about a geo search to find members in the same town / city?

would be perfect on the users tab!

Nice idea but somewhat mitigated by the Users map upon which you can zoom.

2 Likes

Agreed, our members just open the map and have a nosey around the area they live in to see who else is around them :blush:

2 Likes

Hello Robert,

This is a great idea! I love it. :slightly_smiling_face:

I think you can achieve it with custom dark-light-choose() in color_definitions.scss.

$dark-theme-map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
$light-theme-map-tiles-filter: none;

$dark-theme-map-marker-shadow-display: none;
$light-theme-map-marker-shadow-display: block;

$map-tiles-filter: dark-light-choose($light-theme-map-tiles-filter, $dark-theme-map-tiles-filter);
$map-marker-shadow-display: dark-light-choose($light-theme-map-marker-shadow-display, $dark-theme-map-marker-shadow-display);

:root {
  --map-tiles-filter: #{$map-tiles-filter};
  --map-marker-shadow-display: #{$map-marker-shadow-display};
}

And than you can add it to the locations.scss or somewhere…

.locations-map {
  .leaflet-tile-pane  {
    filter: var(--map-tiles-filter);
  }
  .leaflet-marker-shadow {
    display: var(--map-marker-shadow-display);
  }
}
4 Likes

Ooh thanks @Don a different approach, i’ll try it :+1:

2 Likes

Thank you, this is so great. :+1:

Just tested it and it works! :slight_smile: I also tried to achieve this with color_definitions.scss some days ago but always stumbled upon the syntax somehow…

1 Like

Hello

I’m surprised after the last update :-/

Would it be possible to have an option not to display the location / address following the title of the topic?

Many thanks for this plugin!

1 Like

That’s was the whole point of the request and the subsequent change. It’s now a Span so you can use CSS to do what you like with it :slight_smile:

Before that was not possible.

You can target the location span and add a display: block;

That may send it to the next line.

If you need someone to help you with styling, may I suggest marketplace?

1 Like

Any examples of exactly how to do this please Robert @merefield ? :thinking:

I’m sure that’s a task someone in the community can pick up? If you follow my instructions, it should work.