From 89fc34f82956f2410ee7f1d90e03945e10805dda Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 3 Jul 2022 16:39:12 +1000
Subject: Add styling, mainly for TileInfoModal and Settings

---
 src/components/SettingsModal.vue | 85 +++++++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 41 deletions(-)

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

diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 315ddb4..73b204d 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,15 +1,34 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		min-w-[8cm] max-h-[80%] overflow-auto p-3" :style="styles">
+		min-w-[8cm] max-w-[80%] max-h-[80%] overflow-auto" :style="styles">
 		<close-icon @click.stop="onClose" ref="closeIcon"
-			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
-		<h1 class="text-xl font-bold mb-2">Settings</h1>
-		<div class="border rounded p-1">
-			<h2 class="text-center">Layout</h2>
-			<div class="flex gap-2">
-				<div class="grow">
-					<div>Sweep leaves to side</div>
+			class="block 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 border-b border-stone-400">Settings</h1>
+		<div class="border-b border-stone-400 pb-2">
+			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Timing</h2>
+			<div class="grid grid-cols-[130px_minmax(0,1fr)_65px] gap-1 px-2 md:px-3">
+				<!-- Row 1 -->
+				<label for="animTimeInput" @click="onReset('UI', 'transitionDuration')" :class="rLabelClasses">
+					Animation Time
+				</label>
+				<input type="range" min="0" max="1000" v-model.number="uiOpts.transitionDuration"
+					@change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animTimeInput"/>
+				<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
+				<!-- Row 2 -->
+				<label for="autoDelayInput" @click="onReset('UI', 'autoActionDelay')" :class="rLabelClasses">
+					Auto-mode Delay
+				</label>
+				<input type="range" min="0" max="1000" v-model.number="uiOpts.autoActionDelay"
+					@change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoDelayInput"/>
+				<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
+			</div>
+		</div>
+		<div class="border-b border-stone-400 pb-2">
+			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Layout</h2>
+			<div class="flex gap-2 justify-around px-2 pb-1">
+				<div>
+					<div>Sweep leaves left</div>
 					<ul>
 						<li> <label> <input type="radio" v-model="sweepLeaves" :value="true"
 							@change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
@@ -17,7 +36,7 @@
 							@change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
 					</ul>
 				</div>
-				<div class="grow">
+				<div>
 					<div>Sweep into parent</div>
 					<ul>
 						<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
@@ -29,12 +48,13 @@
 					</ul>
 				</div>
 			</div>
-			<div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
+			<div class="grid grid-cols-[100px_minmax(0,1fr)_65px] gap-1 w-fit mx-auto px-2 md:px-3">
 				<!-- Row 1 -->
 				<label for="minTileSizeInput" @click="onReset('LYT', 'minTileSz')" :class="rLabelClasses">
 					Min Tile Size
 				</label>
-				<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz"
+				<input type="range"
+					min="15" :max="uiOpts.breakpoint == 'sm' ? 150 : 200" v-model.number="lytOpts.minTileSz"
 					@input="onSettingChgThrottled('LYT', 'minTileSz')" @change="onSettingChg('LYT', 'minTileSz')"
 					name="minTileSizeInput" ref="minTileSzInput"/>
 				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.minTileSz)}}</div>
@@ -42,7 +62,7 @@
 				<label for="maxTileSizeInput" @click="onReset('LYT', 'maxTileSz')" :class="rLabelClasses">
 					Max Tile Size
 				</label>
-				<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz"
+				<input type="range" min="15" max="400" v-model.number="lytOpts.maxTileSz"
 					@input="onSettingChgThrottled('LYT', 'maxTileSz')" @change="onSettingChg('LYT', 'maxTileSz')"
 					name="maxTileSizeInput" ref="maxTileSzInput"/>
 				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.maxTileSz)}}</div>
@@ -56,32 +76,13 @@
 				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.tileSpacing)}}</div>
 			</div>
 		</div>
-		<div class="border rounded p-1">
-			<h2 class="text-center">Timing</h2>
-			<div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
-				<!-- Row 1 -->
-				<label for="animTimeInput" @click="onReset('UI', 'transitionDuration')" :class="rLabelClasses">
-					Animation Time
-				</label>
-				<input type="range" min="0" max="3000" v-model.number="uiOpts.transitionDuration"
-					@change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animTimeInput"/>
-				<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
-				<!-- Row 2 -->
-				<label for="autoDelayInput" @click="onReset('UI', 'autoActionDelay')" :class="rLabelClasses">
-					Auto-mode Delay
-				</label>
-				<input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
-					@change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoDelayInput"/>
-				<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
-			</div>
-		</div>
-		<div class="border rounded p-1">
-			<h2 class="text-center">Other</h2>
+		<div class="border-b border-stone-400 pb-2 px-2 md:px-3">
+			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 -mb-2 ">Other</h2>
 			<div>
-				<div>Tree to use</div>
-				<ul>
+				Tree to use
+				<ul class="flex justify-evenly">
 					<li> <label> <input type="radio" v-model="uiOpts.tree" value="trimmed"
-						@change="onSettingChg('UI', 'tree')"/> Comprehensive </label> </li>
+						@change="onSettingChg('UI', 'tree')"/> Complex </label> </li>
 					<li> <label> <input type="radio" v-model="uiOpts.tree" value="images"
 						@change="onSettingChg('UI', 'tree')"/> Visual </label> </li>
 					<li> <label> <input type="radio" v-model="uiOpts.tree" value="picked"
@@ -97,7 +98,7 @@
 					@change="onSettingChg('UI', 'disableShortcuts')"/> Disable keyboard shortcuts </label>
 			</div>
 		</div>
-		<s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
+		<s-button class="mx-auto my-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
 			@click="onResetAll">
 			Reset
 		</s-button>
@@ -160,13 +161,13 @@ export default defineComponent({
 				let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
 				if (option == 'minTileSz' && Number(minInput.value) > Number(maxInput.value)){
 					this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
-					this.$emit('setting-chg', 'LYT', 'maxTileSz', {save: false});
+					this.$emit('setting-chg', 'LYT', 'maxTileSz');
 				} else if (option == 'maxTileSz' && Number(maxInput.value) < Number(minInput.value)){
 					this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
-					this.$emit('setting-chg', 'LYT', 'minTileSz', {save: false});
+					this.$emit('setting-chg', 'LYT', 'minTileSz');
 				}
 			}
-			// Notify App
+			// Notify parent component
 			this.$emit('setting-chg', optionType, option,
 				{relayout: optionType == 'LYT', reinit: optionType == 'UI' && option == 'tree'});
 			// Possibly make saved-indicator appear/animate
@@ -188,6 +189,7 @@ export default defineComponent({
 			}
 		},
 		onReset(optionType: OptionType, option: string){
+			// Restore the setting's default
 			let defaultLytOpts = getDefaultLytOpts();
 			let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);
 			if (optionType == 'LYT'){
@@ -206,6 +208,7 @@ export default defineComponent({
 				}
 				(this.uiOpts[uiOpt] as any) = defaultUiOpts[uiOpt];
 			}
+			// Notify parent component
 			this.onSettingChg(optionType, option);
 		},
 		onResetAll(){
@@ -215,7 +218,7 @@ export default defineComponent({
 			let needReinit = this.uiOpts.tree != defaultUiOpts.tree;
 			Object.assign(this.lytOpts, defaultLytOpts);
 			Object.assign(this.uiOpts, defaultUiOpts);
-			// Notify App
+			// Notify parent component
 			this.$emit('reset', needReinit);
 			// Clear saved-indicator
 			this.saved = false;
-- 
cgit v1.2.3