Scrollable Map Sidebar en

Installations 57 Likes 7

Sidebar

Modifies the map Explore sidebar to optimize space and keep some information and buttons on-screen at all times. Only applies to desktop view.

This theme modifies the default scrolling behaviour in four ways:

Optimizes the wasted space at the top and bottom and uses a thin scrollbar rather than a wide one (customizable). Padding is also adjusted slightly.
Pins the following elements to the top regardless of scrolling: Close button; map name, in the default pane; custom marker name, if set, while viewing a marker.
Pins the following elements to the bottom regardless of scrolling: "Back to (Map Name)" button, in the default pane; action buttons, while viewing a marker, if the user has the right privileges.
All other content scrolls in between (marker descriptions, entity names and entries, or map entry and legend in the default pane).

Customization

Note that depending on your browser and OS settings, the scrollbar may be more or less invisible at first. Whether or not this is the case, you can customize the scrollbar’s colours by adding the following rules to your campaign’s CSS (the first property sets the track, or gutter, and the second sets the slider, or handle):

.main-sidebar {
  --map-sidedar-scrollbar-track-color: slategrey;
  --map-sidedar-scrollbar-slider-color: whitesmoke;
}

You can do the same for the scrollbar’s width (thin or auto) using the following properties:

.main-sidebar {
  --map-sidedar-scrollbar-width: thin;
}

However, this property is only supported on Firefox and derivatives as of summer 2021.

More sidebar goodness

This theme can be used alongside either of Scrollable Main Sidebar or Pop-Out Sidebar and pairs well with Map Sidebar Legibility Upgrades.

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

Latest version 2.4 View content

Released 5 months ago

A tiny fix to account for the theme builder.

Plugin CSS for 2.4


/* BEGIN Scrollable Map Sidebar by Salvatos */
.main-sidebar {
  --map-sidebar-scrollbar-track-color: auto;
  --map-sidebar-scrollbar-slider-color: auto;
  --map-sidebar-scrollbar-width: thin;
}
@media (min-width:768px) {
	/* Page sizing and scrolling */
	#map-body {
		overflow-y: hidden;
	}
	#map-body .content-wrapper {
		min-height: unset !important;
	}
	
	/* Main sidebar sizing and scrolling */
	#map-body #sidebar-map,
	#map-body .main-sidebar {
		max-height: calc(100vh - 3rem);
	}
	#map-body .main-sidebar .sidebar {
		margin-bottom: 0;
		padding: 0;
	}
	#map-body #sidebar-content {
		max-height: unset;
		padding: 0;
		scrollbar-width: var(--map-sidebar-scrollbar-width);
		scrollbar-color: var(--map-sidebar-scrollbar-slider-color) var(--map-sidebar-scrollbar-track-color);
	}
	
	/* Legend */
	#map-body #sidebar-map .map-legend:not(:last-child) {
		padding: 0 10px;
	}
	
	/* Marker */
	#map-body #sidebar-marker {
		max-height: calc(100vh - 3rem);
	}
	#map-body .pull-right.marker-close {
		margin-right: 5px;
	}
	#map-body :is(.entity-title, .entity-content, .marker-entry) {
		padding: 0 10px;
	}
	
	/* Both */
	#map-body .marker-details {
		padding: 0;
	}
	#map-body .marker-details .marker-name {
		position: sticky;
		top: 0;
		padding: 10px 5px;
		margin: 0;
		background: var(--sidebar-background, hsl(var(--si)));
		min-height: 40px;
	}
	#map-body #sidebar-map .map-legend:last-child,
	#map-body #sidebar-marker .marker-actions {
		position: sticky;
		bottom: 0;
		margin: 0;
		padding: 10px 0px;
		background: var(--sidebar-background, hsl(var(--si)));
	}
	
	/* Webkit patch */
	#map-body #sidebar-content::-webkit-scrollbar {
		background-color: var(--map-sidebar-scrollbar-track-color);
	}
	#map-body #sidebar-content::-webkit-scrollbar-thumb {
		background-color: var(--map-sidebar-scrollbar-slider-color);
	}
}
/* END Scrollable Map Sidebar by Salvatos */