Top job Robert @merefield
Before:
And after:
Also before:
And after:
Perfect - thank you
So great, thank you very much @merefield
See here, it is perfect now. Screenshot for the desktop version:
I chose to break it into a new line. For mobile I modified the margins and font size a bit.
I just noticed that it is breaking the layout a bit when there are unread posts - even if there is now location:
@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?
Sounds like a reasonable refinement. PR welcome for time being until I get to it.
OK, implemented:
@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.
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;
}
}
np, I’ll try to make this native behaviour once I have a Dark Mode switch capability.
@merefield thank you for looking into this! 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.
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.
Agreed, our members just open the map and have a nosey around the area they live in to see who else is around them
Hello Robert,
This is a great idea! I love it.
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);
}
}
Ooh thanks @Don a different approach, i’ll try it
Thank you, this is so great.
Just tested it and it works! I also tried to achieve this with color_definitions.scss
some days ago but always stumbled upon the syntax somehow…
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!
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
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?
Any examples of exactly how to do this please Robert @merefield ?
I’m sure that’s a task someone in the community can pick up? If you follow my instructions, it should work.