Loadpoint UI: improve title visibility (#26248)

assets/js/components/Loadpoints/Loadpoint.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="loadpoint d-flex flex-column pt-4 pb-2 px-3 px-sm-4 mx-2 mx-sm-0">
-		<div class="d-block d-sm-flex justify-content-between align-items-center mb-3">
+		<div
+			class="d-block d-sm-flex justify-content-between align-items-center mb-3"
+			:class="expandLoadpointHeader ? 'd-lg-block d-xl-flex' : ''"
+		>
 			<div class="d-flex justify-content-between align-items-center mb-3 text-truncate">
 				<h3 class="me-2 mb-0 text-truncate d-flex">
 					<VehicleIcon
@@ -12,12 +15,17 @@
 						{{ loadpointTitle }}
 					</div>
 				</h3>
-				<LoadpointSettingsButton class="d-block d-sm-none" @click="openSettingsModal" />
+				<LoadpointSettingsButton
+					:class="expandLoadpointHeader ? 'd-lg-block d-xl-none' : ''"
+					class="d-block d-sm-none"
+					@click="openSettingsModal"
+				/>
 			</div>
 			<div class="mb-3 d-flex align-items-center">
 				<Mode class="flex-grow-1" v-bind="modeProps" @updated="setTargetMode" />
 				<LoadpointSettingsButton
 					:id="id"
+					:class="expandLoadpointHeader ? 'd-lg-none d-xl-block' : ''"
 					class="d-none d-sm-block ms-2"
 					@click="openSettingsModal"
 				/>
@@ -223,6 +231,7 @@ export default defineComponent({
 		tariffCo2: Number,
 		currency: String,
 		multipleLoadpoints: Boolean,
+		fullWidth: Boolean,
 		gridConfigured: Boolean,
 		pvConfigured: Boolean,
 		forecast: Object as PropType<Forecast>,
@@ -239,6 +248,9 @@ export default defineComponent({
 		};
 	},
 	computed: {
+		expandLoadpointHeader() {
+			return this.multipleLoadpoints && !this.fullWidth;
+		},
 		vehicle() {
 			return this.vehicles?.find((v) => v.name === this.vehicleName);
 		},

assets/js/components/Loadpoints/Loadpoints.vue

@@ -5,7 +5,7 @@
 		<div
 			ref="carousel"
 			class="carousel d-lg-flex flex-wrap"
-			:class="`carousel--${loadpoints.length}`"
+			:class="[`carousel--${loadpoints.length}`, { 'carousel--fullwidth': fullWidth }]"
 		>
 			<div
 				v-for="loadpoint in loadpoints"
@@ -23,7 +23,8 @@
 					:tariffCo2="tariffCo2"
 					:tariffFeedIn="tariffFeedIn"
 					:currency="currency"
-					:multipleLoadpoints="loadpoints.length > 1"
+					:multipleLoadpoints="multipleLoadpoints"
+					:fullWidth="fullWidth"
 					:gridConfigured="gridConfigured"
 					:pvConfigured="pvConfigured"
 					:batteryConfigured="batteryConfigured"
@@ -90,12 +91,24 @@ export default defineComponent({
 			snapTimeout: null as Timeout,
 			scrollTimeout: null as Timeout,
 			highlightedIndex: 0,
+			viewportHeight: 0 as number,
 		};
 	},
 	computed: {
 		selectedIndex() {
 			return this.indexById(this.selectedId);
 		},
+		multipleLoadpoints() {
+			return this.loadpoints.length > 1;
+		},
+		fullWidth() {
+			return (
+				// breakpoint lg, tall screen, 2 loadpoints rows
+				(this.loadpoints.length === 2 && this.viewportHeight >= 1450) ||
+				// breakpoint lg, taller screen, 3 loadpoints rows
+				(this.loadpoints.length === 3 && this.viewportHeight >= 1900)
+			);
+		},
 	},
 	watch: {
 		selectedIndex(newIndex) {
@@ -103,12 +116,16 @@ export default defineComponent({
 		},
 	},
 	mounted() {
+		this.updateViewport();
+		window.addEventListener("resize", this.updateViewport);
+
 		if (this.selectedIndex > 0) {
 			this.$refs["carousel"]?.scrollTo({ top: 0, left: this.left(this.selectedIndex) });
 		}
 		this.$refs["carousel"]?.addEventListener("scroll", this.handleCarouselScroll);
 	},
 	unmounted() {
+		window.removeEventListener("resize", this.updateViewport);
 		this.$refs["carousel"]?.removeEventListener("scroll", this.handleCarouselScroll);
 	},
 	methods: {
@@ -142,6 +159,9 @@ export default defineComponent({
 		selected(id: string) {
 			return this.highlightedIndex === this.indexById(id);
 		},
+		updateViewport() {
+			this.viewportHeight = window.innerHeight;
+		},
 		left(index: number) {
 			return (this.$refs["carousel"]?.children[0] as HTMLElement).offsetWidth * index;
 		},
@@ -253,19 +273,8 @@ export default defineComponent({
 		grid-gap: 2rem;
 		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
 	}
-}
-
-/* breakpoint lg, tall screen, 2 loadpoints rows */
-@media (min-width: 992px) and (min-height: 1450px) {
-	.carousel--2 {
-		grid-gap: 4rem;
-		grid-template-columns: 1fr;
-	}
-}
-
-/* breakpoint lg, taller screen, 3 loadpoints rows */
-@media (min-width: 992px) and (min-height: 1900px) {
-	.carousel--3 {
+	/* breakpoint lg, full width override */
+	.carousel--fullwidth {
 		grid-gap: 4rem;
 		grid-template-columns: 1fr;
 	}