Map Sidebar Optimization

Install
Sidebar
Salvatos
13th Jan, 2025
33 installations 1 likes

This theme provides a number of improvements to entity and marker text formatting in the side panel of map Explore views, and in the marker detail modal on mobile:

  • Text alignment is set to justify by default for a cleaner column look, but can be customized.
  • Font size is increased slightly to compensate for the font face being different from that used in the rest of Kanka. You can change it as well if you use an altogether different font.
  • Adds a delimiting line between the marker’s description and the associated entity’s entry, when both are present, instead of the drab "From entity" heading. The same is added in the marker details modal on mobile, where there is no separation in default Kanka.

It also modifies the default scrolling behaviour in four ways:

  1. Uses a thin scrollbar rather than a wide one (thickness and colours are customizable).
  2. Optimizes the wasted space at the top and bottom, and between some elements.
  3. Pins the following elements to the bottom regardless of scrolling: "Back to (Map Name)" button, in the default (legend) pane; "Remove" button, in the marker pane.
  4. Fixes a display bug that causes a scrollbar to appear in the main map container.
Customization

The following properties can be added to your campaign CSS for easy customization:

#map-body {
	--map-sidebar-text-align: justify;
	--map-sidebar-hyphenate: manual; /* Set to 'auto' for automatic hyphenation (support depends on your language) */
	--map-sidebar-font-size: 15px; /* Ideal for Source Sans Pro */
	--map-sidebar-scrollbar-track-color: auto;
	--map-sidebar-scrollbar-slider-color: auto;
	--map-sidebar-scrollbar-width: thin; /* Set to 'thin' or 'auto' */
}

However, scrollbar-related properties are still not supported on Safari as of early 2025.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed): Support me on Ko-fi.com

Latest version 5

Released 3 months ago on 13th Jan, 2025

Compatibility update for Kanka 2.9. Now includes features from Scrollable Map Sidebar (which is being retired) since there was little reason left to keep them separate:

  • The scrollbar can be customized (width and colors).
  • The Back or Remove button is stickied to the bottom of the sidebar and visible at all times.
  • Prevents a scrollbar from appearing in the main map pane.
  • Some spacing optimization.

In addition, scrollbar and text customizations are now applied in the marker modal view on mobile as well, rather than limited to the desktop sidebar.

If you used custom properties in your campaign CSS to customize this theme, you may need to edit the selector after this update. See full description for details.

CSS rules

/* BEGIN Map Sidebar Optimization by Salvatos */

#map-body {

	--map-sidebar-text-align: justify;

	--map-sidebar-hyphenate: manual;

	--map-sidebar-font-size: 15px; /* Ideal for Source Sans Pro */

	--map-sidebar-scrollbar-track-color: auto;

	--map-sidebar-scrollbar-slider-color: auto;

	--map-sidebar-scrollbar-width: thin;



	/* Legend spacing */

	#sidebar-map {

		.marker-actions {

			padding-block: 1em;

		}

		.map-legend:not(:last-child) {

			padding: 0 10px;

		}

	}

	/* Get rid of empty space between title and Edit button 

		when the map has no entry */

	.marker-header + .marker-entry:not(:has(p, li, img, div, table)) {

		display: none;

	}



	/* Sticky Back/Remove button */

	.map-legend:last-child,

	.marker-header ~ div .marker-actions {

		position: sticky;

		bottom: 0px;

		margin: 0;

		padding: 10px 0px;

		background: var(--sidebar-background, hsl(var(--si)));

		border-top-left-radius: unset;

    	border-top-right-radius: unset;

	}

	.marker-header + .gap-3 {

		gap: unset;

	}

	.marker-tags {

		margin-bottom: .5rem;

	}



	/* Marker text alignment */

	:is(.sidebar, #map-marker-modal) .entity-content :is(p, li) {

		text-align: var(--map-sidebar-text-align);

		hyphens: var(--map-sidebar-hyphenate);

		font-size: var(--map-sidebar-font-size);

	}



	/* Separate marker text and entity entry with a horizontal line

	rather than the default "From entity" header */

	.marker-custom-entry {

		padding-bottom: 10px;

	}

	.marker-custom-entry ~ .marker-entity-entry {

		border-top: 2px solid #eee;

		padding-top: 10px;

	}

	/* mobile modal */ 

	.marker-entry ~ .marker-entry {

		border-top: 1px solid #bbb;

		padding-top: 10px;

	}

	.marker-custom-entry + .marker-entity-entry {

		display: none;

	}



	/* Scrollbar width and colors */

	:is(#sidebar-content, #map-marker-modal article) {

		scrollbar-width: var(--map-sidebar-scrollbar-width);

		scrollbar-color: var(--map-sidebar-scrollbar-slider-color) var(--map-sidebar-scrollbar-track-color);

	}

	/* Webkit patch */

	:is(#sidebar-content, #map-marker-modal article)::-webkit-scrollbar {

		background-color: var(--map-sidebar-scrollbar-track-color);

	}

	:is(#sidebar-content, #map-marker-modal article)::-webkit-scrollbar-thumb {

		background-color: var(--map-sidebar-scrollbar-slider-color);

	}



	/* Prevent scrollbar in main pane */

	@media (min-width:768px) {

		#sidebar-map, .main-sidebar {

			max-height: calc(100vh - 3.1rem);

		}

	}

}

/* END Map Sidebar Optimization by Salvatos */
 Install

User comments & reviews