Show compact checkbox fields on small screens

FacilMap · Apr 12, 2024 · 85704f1 · 85704f1
1 parent f9c68cc
commit 85704f1
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 34 deletions.
diff --git a/frontend/src/lib/components/edit-line-dialog.vue b/frontend/src/lib/components/edit-line-dialog.vue
@@ -15,6 +15,7 @@
 	import ValidatedField from "./ui/validated-form/validated-field.vue";
 	import StrokePicker from "./ui/stroke-picker.vue";
 	import { useI18n } from "../utils/i18n";
+	import { useMaxBreakpoint } from "../utils/bootstrap";
 
 	const context = injectContextRequired();
 	const client = requireClientContext(context);
@@ -43,6 +44,8 @@
 
 	const resolvedCanControl = computed(() => canControl(client.value.types[line.value.typeId]));
 
+	const isXs = useMaxBreakpoint("xs");
+
 	watch(originalLine, (newLine, oldLine) => {
 		if (!newLine) {
 			modalRef.value?.modal.hide();
@@ -136,16 +139,26 @@
 			</template>
 
 			<template v-for="(field, idx) in client.types[line.typeId].fields" :key="field.name">
-				<div class="row mb-3">
-					<label :for="`${id}-${idx}-input`" class="col-sm-3 col-form-label text-break">{{formatFieldName(field.name)}}</label>
-					<div class="col-sm-9">
-						<FieldInput
-							:id="`${id}-${idx}-input`"
-							:field="field"
-							v-model="line.data[field.name]"
-						></FieldInput>
+				<template v-if="field.type !== 'checkbox' || !isXs">
+					<div class="row mb-3">
+						<label :for="`${id}-${idx}-input`" class="col-sm-3 col-form-label text-break">{{formatFieldName(field.name)}}</label>
+						<div class="col-sm-9" :class="{ 'fm-form-check-with-label': field.type === 'checkbox' }">
+							<FieldInput
+								:id="`${id}-${idx}-input`"
+								:field="field"
+								v-model="line.data[field.name]"
+							></FieldInput>
+						</div>
 					</div>
-				</div>
+				</template>
+				<template v-else>
+					<FieldInput
+						:id="`${id}-${idx}-input`"
+						:field="field"
+						v-model="line.data[field.name]"
+						showCheckboxLabel
+					></FieldInput>
+				</template>
 			</template>
 		</template>
 

diff --git a/frontend/src/lib/components/edit-marker-dialog.vue b/frontend/src/lib/components/edit-marker-dialog.vue
@@ -15,6 +15,7 @@
 	import { injectContextRequired, requireClientContext } from "./facil-map-context-provider/facil-map-context-provider.vue";
 	import ValidatedField from "./ui/validated-form/validated-field.vue";
 	import { useI18n } from "../utils/i18n";
+	import { useMaxBreakpoint } from "../utils/bootstrap";
 
 	const context = injectContextRequired();
 	const client = requireClientContext(context);
@@ -42,6 +43,8 @@
 
 	const resolvedCanControl = computed(() => canControl(client.value.types[marker.value.typeId]));
 
+	const isXs = useMaxBreakpoint("xs");
+
 	watch(originalMarker, (newMarker, oldMarker) => {
 		if (!newMarker) {
 			modalRef.value?.modal.hide();
@@ -134,16 +137,26 @@
 			</template>
 
 			<template v-for="(field, idx) in client.types[marker.typeId].fields" :key="field.name">
-				<div class="row mb-3">
-					<label :for="`${id}-${idx}-input`" class="col-sm-3 col-form-label text-break">{{formatFieldName(field.name)}}</label>
-					<div class="col-sm-9">
-						<FieldInput
-							:id="`fm-edit-marker-${idx}-input`"
-							:field="field"
-							v-model="marker.data[field.name]"
-						></FieldInput>
+				<template v-if="field.type !== 'checkbox' || !isXs">
+					<div class="row mb-3">
+						<label :for="`${id}-${idx}-input`" class="col-sm-3 col-form-label text-break">{{formatFieldName(field.name)}}</label>
+						<div class="col-sm-9" :class="{ 'fm-form-check-with-label': field.type === 'checkbox' }">
+							<FieldInput
+								:id="`${id}-${idx}-input`"
+								:field="field"
+								v-model="marker.data[field.name]"
+							></FieldInput>
+						</div>
 					</div>
-				</div>
+				</template>
+				<template v-else>
+					<FieldInput
+						:id="`${id}-${idx}-input`"
+						:field="field"
+						v-model="marker.data[field.name]"
+						showCheckboxLabel
+					></FieldInput>
+				</template>
 			</template>
 		</template>
 

diff --git a/frontend/src/lib/components/edit-type-dialog/edit-type-dialog.vue b/frontend/src/lib/components/edit-type-dialog/edit-type-dialog.vue
@@ -459,7 +459,7 @@
 									</template>
 								</div>
 							</td>
-							<td class="text-center">
+							<td class="text-center align-middle">
 								<FieldInput :field="field" v-model="field.default" ignore-default></FieldInput>
 							</td>
 							<td class="td-buttons">

diff --git a/frontend/src/lib/components/edit-type-dialog/edit-type-dropdown-dialog.vue b/frontend/src/lib/components/edit-type-dialog/edit-type-dropdown-dialog.vue
@@ -282,7 +282,7 @@
 			>
 				<template #item="{ element: option, index: idx }">
 					<tr>
-						<td v-if="fieldValue.type == 'checkbox'">
+						<td v-if="fieldValue.type == 'checkbox'" class="align-middle">
 							<strong>{{formatCheckboxValue(idx === 0 ? "0" : "1")}}</strong>
 						</td>
 						<ValidatedField

diff --git a/frontend/src/lib/components/ui/field-input.vue b/frontend/src/lib/components/ui/field-input.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 	import type { Field } from "facilmap-types";
 	import { computed } from "vue";
-	import { normalizeFieldValue } from "facilmap-utils";
+	import { formatFieldName, normalizeFieldValue } from "facilmap-utils";
 
 	const props = withDefaults(defineProps<{
 		field: Field;
 		ignoreDefault?: boolean;
 		modelValue?: string;
 		id?: string;
+		showCheckboxLabel?: boolean;
 	}>(), {
 		ignoreDefault: false
 	});
@@ -37,13 +38,29 @@
 			</select>
 		</template>
 		<template v-else-if="field.type === 'checkbox'">
-			<input
-				type="checkbox"
-				class="form-check-input"
-				:id="id"
-				:checked="value === '1'"
-				@input="value = $event ? '1' : '0'"
-			/>
+			<template v-if="props.showCheckboxLabel">
+				<div class="form-check">
+					<input
+						type="checkbox"
+						class="form-check-input"
+						:id="id"
+						:checked="value === '1'"
+						@input="value = ($event.target as HTMLInputElement).checked ? '1' : '0'"
+					/>
+					<label v-if="props.showCheckboxLabel" :for="id" class="form-check-label">
+						{{formatFieldName(field.name)}}
+					</label>
+				</div>
+			</template>
+			<template v-else>
+				<input
+					type="checkbox"
+					class="form-check-input fm-large-checkbox"
+					:id="id"
+					:checked="value === '1'"
+					@input="value = ($event.target as HTMLInputElement).checked ? '1' : '0'"
+				/>
+			</template>
 		</template>
 		<template v-else>
 			<input type="text" class="form-control" :id="id" v-model="value"/>
@@ -54,12 +71,10 @@
 <style lang="scss">
 	.fm-field-input {
 
-		.custom-checkbox {
-			height: calc(1.5em + 0.75rem + 2px);
-		}
-
-		.custom-checkbox label::before, .custom-checkbox label::after {
-			top: calc(0.75em - 0.125rem + 1px);
+		.fm-large-checkbox {
+			margin-top: 0;
+			height: 1.5rem;
+			width: 1.5rem;
 		}
 
 	}