From 4404b650d136382097aba6f471b80cc96c4bd787 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 21 Jan 2023 20:06:29 +1100
Subject: Adjust coloring and spacing

---
 src/components/SettingsModal.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'src/components/SettingsModal.vue')

diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 2c4a0df..bc4e980 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose" ref="rootRef">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		min-w-[8cm] max-w-[80%] max-h-[80%] overflow-auto" :style="styles">
+		min-w-[8cm] sm:min-w-[9cm] max-w-[80%] max-h-[80%] overflow-auto" :style="styles">
 		<close-icon @click.stop="onClose" ref="closeRef"
 			class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer" />
 		<h1 class="text-xl md:text-2xl font-bold text-center py-2" :class="borderBClasses">Settings</h1>
 
 		<!-- Categories -->
-		<div class="pb-2" :class="borderBClasses">
+		<div class="pb-2 sm:pb-3" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Categories</h2>
-			<ul class="px-2 grid grid-cols-3">
+			<ul class="px-2 grid grid-cols-3 sm:px-4">
 				<!-- Row 1 -->
 				<li> <label> <input type="checkbox" v-model="store.ctgs.event" :disabled="lastCtg == 'event'"
 					@change="onSettingChg('ctgs.event')"/> Event </label> </li>
@@ -28,26 +28,26 @@
 		</div>
 
 		<!-- Display settings -->
-		<div class="pb-2" :class="borderBClasses">
+		<div class="pb-2 sm:pb-3" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Display</h2>
-			<div class="grid grid-cols-2">
-				<div class="px-2 col-span-2">
+			<div class="grid grid-cols-2 px-2 sm:px-4">
+				<div class="col-span-2">
 					<label> <input type="checkbox" v-model="store.reqImgs"
 						@change="onSettingChg('reqImgs')"/> Only events with images </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showMinorTicks"
 						@change="onSettingChg('showMinorTicks')"/> Minor tick text </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showEventLines"
 						@change="onSettingChg('showEventLines')"/> Event lines </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showEventCounts"
 						@change="onSettingChg('showEventCounts')"/> Event density </label>
 				</div>
-				<div class="px-2">
+				<div>
 					<label> <input type="checkbox" v-model="store.showBaseLine"
 						@change="onSettingChg('showBaseLine')"/> Baseline </label>
 				</div>
@@ -57,11 +57,11 @@
 		<!-- Input settings -->
 		<div v-if="store.touchDevice == false" class="pb-2" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Input</h2>
-			<div class="px-2">
+			<div class="px-2 sm:px-4 pb-1">
 				<label> <input type="checkbox" v-model="store.disableShortcuts"
 					@change="onSettingChg('disableShortcuts')"/> Disable keyboard shortcuts </label>
 			</div>
-			<div class="grid grid-cols-[100px_minmax(0,1fr)_65px] gap-1 w-fit mx-auto px-2 md:px-3">
+			<div class="grid grid-cols-[100px_minmax(0,1fr)_30px] gap-1 w-fit mx-auto px-2 sm:px-4">
 				<!-- Row 1 -->
 				<label for="scrollRatio" @click="onResetOne('scrollRatio')" :class="rLabelClasses">
 					Scroll ratio
-- 
cgit v1.2.3