Simplify single-item types in legend

Author: cdauth

frontend/src/lib/components/legend/legend-content.vue

@@ -79,12 +79,11 @@
 		</div>
 
 		<template v-for="(type, idx) in items" :key="type.key">
-			<hr v-if="idx > 0">
-			<h3 @click="toggleFilter(type)" :class="{ filtered: type.filtered }">{{type.name}}</h3>
+			<hr v-if="idx > 0 && (type.items.length > 1 || items[idx - 1].items.length > 1)">
 			<dl>
 				<template v-for="(item, idx) in type.items" :key="item.key">
 					<dt
-						:class="[ 'fm-legend-icon', 'fm-' + type.type, { filtered: item.filtered, first: (item.first && idx !== 0), bright: item.bright } ]"
+						:class="[ 'fm-legend-icon', 'fm-' + type.type, { filtered: item.filtered, first: (item.first && idx !== 0), bright: item.bright, main: idx === 0 } ]"
 						@click="toggleFilter(type, item)"
 						v-html-async="makeIcon(type, item)"
 						@mouseenter="togglePopover(item.key, true)"
@@ -93,7 +92,7 @@
 					></dt>
 					<dd
 						class="text-break"
-						:class="[ 'fm-' + type.type, { filtered: item.filtered, first: (item.first && idx !== 0), bright: item.bright } ]"
+						:class="[ 'fm-' + type.type, { filtered: item.filtered, first: (item.first && idx !== 0), bright: item.bright, main: idx === 0 } ]"
 						@click="toggleFilter(type, item)"
 						:style="item.strikethrough ? {'text-decoration': 'line-through'} : {}"
 						@mouseenter="togglePopover(item.key, true)"
@@ -176,6 +175,11 @@
 				cursor: pointer;
 			}
 
+			dt, dd {
+				display: inline-flex;
+				align-items: center;
+			}
+
 			dt.fm-marker {
 				grid-column: 1 / 2;
 			}
@@ -201,6 +205,11 @@
 			}
 		}
 
+		.main {
+			font-size: 1.1em;
+			font-weight: bold;
+		}
+
 		.filtered {
 			opacity: 0.5;
 		}

frontend/src/lib/components/legend/legend-utils.ts

@@ -41,41 +41,37 @@ export function getLegendItems(context: FacilMapContext): LegendType[] {
 		const items: LegendItem[] = [ ];
 		const fields: Record<string, string[]> = Object.create(null);
 
-		if (
-			type.colourFixed ||
-			(type.type == "marker" && type.iconFixed && type.defaultIcon && (iconList.includes(type.defaultIcon) || type.defaultIcon.length == 1)) ||
-			(type.type == "marker" && type.shapeFixed) ||
-			(type.type == "line" && type.widthFixed) ||
-			(type.type === "line" && type.strokeFixed)
-		) {
-			const item: LegendItem = {
-				key: `legend-item-${type.id}`,
-				value: type.name,
-				label: formatTypeName(type.name),
-				filtered: true
-			};
-
-			if (type.colourFixed) {
-				item.colour = type.defaultColour ? `#${type.defaultColour}` : undefined;
-			}
-			if (type.type == "marker" && type.iconFixed && type.defaultIcon && (iconList.includes(type.defaultIcon) || type.defaultIcon.length == 1)) {
-				item.icon = type.defaultIcon;
-			}
-			if (type.type == "marker" && type.shapeFixed) {
-				item.shape = type.defaultShape ?? "";
-			}
-			if (type.type == "line" && type.widthFixed) {
-				item.width = type.defaultWidth ?? undefined;
-			}
-			if (type.type === "line" && type.strokeFixed) {
-				item.stroke = type.defaultStroke;
+		const mainItem: LegendItem = {
+			key: `legend-item-${type.id}`,
+			value: type.name,
+			label: formatTypeName(type.name),
+			filtered: true
+		};
+
+		if (type.colourFixed) {
+			mainItem.colour = type.defaultColour ? `#${type.defaultColour}` : undefined;
+		}
+		if (type.type == "marker" && type.iconFixed && type.defaultIcon && (iconList.includes(type.defaultIcon) || type.defaultIcon.length == 1)) {
+			mainItem.icon = type.defaultIcon;
+		}
+		if (type.type == "marker") {
+			if (type.shapeFixed) {
+				mainItem.shape = type.defaultShape ?? "";
+			} else {
+				mainItem.shape = "drop";
 			}
+		}
+		if (type.type == "line" && type.widthFixed) {
+			mainItem.width = type.defaultWidth ?? undefined;
+		}
+		if (type.type === "line" && type.strokeFixed) {
+			mainItem.stroke = type.defaultStroke;
+		}
 
-			if (item.colour)
-				item.bright = isBright(item.colour);
+		if (mainItem.colour)
+			mainItem.bright = isBright(mainItem.colour);
 
-			items.push(item);
-		}
+		items.push(mainItem);
 
 		for (const field of type.fields) {
 			if (
@@ -147,20 +143,6 @@ export function getLegendItems(context: FacilMapContext): LegendType[] {
 			});
 		}
 
-		if(items.length == 0) {
-			const item: LegendItem = {
-				key: `legend-item-${type.id}`,
-				value: type.name,
-				label: formatTypeName(type.name),
-				filtered: true
-			};
-
-			if(type.type == "marker")
-				item.shape = "drop";
-
-			items.push(item);
-		}
-
 		const legendType: LegendType = {
 			key: `legend-type-${type.id}`,
 			type: type.type,