From 324582c671266cec0f802205ce9a742f3c94fe2b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 24 Mar 2022 21:24:32 +1100
Subject: Make settings appear at smaller display edge

---
 src/components/Settings.vue | 23 +++++++++++++++++++++--
 src/components/TileTree.vue |  2 +-
 2 files changed, 22 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index c06ad15..158c31e 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -4,6 +4,16 @@ import {defineComponent, PropType} from 'vue';
 export default defineComponent({
 	props: {
 		isOpen: {type: Boolean, required: true},
+		atRight: {type: Boolean, required: true},
+	},
+	computed: {
+		openStyles(){
+			if (this.atRight){
+				return {width: '20%', height: '100%'};
+			} else {
+				return {width: '100%', height: '20%'};
+			}
+		},
 	},
 	methods: {
 		openClicked(){
@@ -20,8 +30,8 @@ export default defineComponent({
 <template>
 <!-- outer div prevents overflow from transitioning to/from off-screen -->
 <div class="absolute left-0 top-0 w-full h-full invisible overflow-hidden">
-	<Transition name="slide-bottom">
-		<div v-if="isOpen" class="absolute bottom-0 bg-white visible">
+	<Transition :name="atRight ? 'slide-right' : 'slide-bottom'">
+		<div v-if="isOpen" :style="openStyles" class="absolute bottom-0 right-0 bg-white visible">
 			<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
 					font-bold hover:cursor-pointer"
 				@click="closeClicked">&times;</div>
@@ -66,6 +76,15 @@ export default defineComponent({
 </template>
 
 <style>
+.slide-right-enter-from, .slide-right-leave-to {
+	transform: translate(100%, 0);
+	opacity: 0;
+}
+.slide-right-enter-active, .slide-right-leave-active {
+	transition-property: transform, opacity;
+	transition-duration: 300ms;
+	transition-timing-function: ease-in-out;
+}
 .slide-bottom-enter-from, .slide-bottom-leave-to {
 	transform: translate(0, 100%);
 	opacity: 0;
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index f5a6199..39fd105 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -237,7 +237,7 @@ export default defineComponent({
 		:pos="[0,0]" :dims="parentBarDims" :nodes="sepdParents" :options="componentOptions"
 		@sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
 	<tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/>
-	<settings :open="settingsOpen" @settings-open="onSettingsOpen" @settings-close="onSettingsClose"/>
+	<settings :isOpen="settingsOpen" :atRight="wideArea" @settings-open="onSettingsOpen" @settings-close="onSettingsClose"/>
 </div>
 </template>
 
-- 
cgit v1.2.3