Kirby 4 styling fixes

lukasbestle · Mar 6, 2024 · 8e85ee7 · 8e85ee7
1 parent 7a38220
commit 8e85ee7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 35 deletions.
diff --git a/src/frontend/components/Misc/Version.vue b/src/frontend/components/Misc/Version.vue
@@ -4,7 +4,7 @@
 
 		<dl class="lbvs-version-details">
 			<template v-for="detail in mergedDetails">
-				<dt :key="detail.title" class="k-offscreen">{{ detail.title }}:</dt>
+				<dt :key="detail.title" class="sr-only">{{ detail.title }}:</dt>
 				<dd :key="detail.title" :title="detail.title">
 					{{ detail.value }}
 				</dd>

diff --git a/src/frontend/components/Status.vue b/src/frontend/components/Status.vue
@@ -4,9 +4,9 @@
 			<k-grid>
 				<k-column width="1/3">
 					<header class="k-section-header">
-						<k-headline>
+						<k-label type="section">
 							{{ $t("versions.label.instances") }}
-						</k-headline>
+						</k-label>
 					</header>
 
 					<ul class="lbvs-status-instances">
@@ -34,19 +34,18 @@
 
 				<k-column width="2/3" class="lbvs-status-changes">
 					<header class="k-section-header">
-						<k-headline>
+						<k-label type="section">
 							{{ $t("versions.label.changes") }}
-						</k-headline>
-
-						<k-button-group>
-							<k-button
-								icon="add"
-								:disabled="canCreateVersion === false"
-								@click="onCreate"
-							>
-								{{ $t("versions.button.create") }}
-							</k-button>
-						</k-button-group>
+						</k-label>
+
+						<k-button
+							icon="add"
+							size="xs"
+							:disabled="canCreateVersion === false"
+							@click="onCreate"
+						>
+							{{ $t("versions.button.create") }}
+						</k-button>
 					</header>
 
 					<lbvs-changes :changes="currentChanges" />
@@ -88,7 +87,8 @@ export default {
 	padding-bottom: 2rem;
 
 	background: #2b2b2b;
-	color: #fff;
+	color: var(--color-white);
+	border-radius: var(--rounded);
 }
 
 .lbvs-status .k-grid {
@@ -138,7 +138,7 @@ export default {
 
 /* no rounded corners between instances and changes columns,
    unless the columns are displayed vertically (on mobile) */
-@media screen and (min-width: 65em) {
+@media screen and (min-width: 30em) {
 	.lbvs-status-instances li.current {
 		border-start-end-radius: 0;
 		border-end-end-radius: 0;

diff --git a/src/frontend/components/Versions.vue b/src/frontend/components/Versions.vue
@@ -1,25 +1,23 @@
 <template>
 	<div class="lbvs-versions">
-		<k-view>
-			<header class="k-section-header">
-				<k-headline>
-					{{ $t("versions.label.versions") }}
-				</k-headline>
-			</header>
+		<header class="k-section-header">
+			<k-label type="section">
+				{{ $t("versions.label.versions") }}
+			</k-label>
+		</header>
 
-			<k-items
-				v-if="items.length"
-				:columns="columns"
-				:items="items"
-				layout="table"
-				:sortable="false"
-				@option="onOption"
-			/>
+		<k-items
+			v-if="items.length"
+			:columns="columns"
+			:items="items"
+			layout="table"
+			:sortable="false"
+			@option="onOption"
+		/>
 
-			<k-empty v-else icon="protected" layout="table">
-				{{ $t("versions.label.empty") }}
-			</k-empty>
-		</k-view>
+		<k-empty v-else icon="protected" layout="table">
+			{{ $t("versions.label.empty") }}
+		</k-empty>
 
 		<lbvs-export-dialog ref="exportDialog" />
 		<lbvs-deploy-dialog ref="deployDialog" />