Mobile friendlier

Signed-off-by: Vincent Fiduccia <[email protected]>

Author: vincent99

ui/app.vue

@@ -1,6 +1,53 @@
+<script lang="ts" setup>
+const sock = useSocket()
+const router = useRouter()
+
+useHead({
+  meta: [
+    { charset: 'utf-8' },
+    { name: 'apple-mobile-web-app-capable', content: 'yes' },
+    { name: 'format-detection', content: 'telephone=no' },
+    { name: 'viewport', content: `width=device-width, height=device-height` },
+  ],
+})
+
+const root = ref<HTMLDivElement>()
+
+watch(router.currentRoute, () => {
+  root.value?.classList.remove('open')
+})
+
+
+function toggle() {
+  root.value?.classList.toggle('open')
+}
+</script>
+
 <template>
-  <div class="root bg-slate-100 dark:bg-slate-950">
-    <LeftNav class="left-nav bg-slate-50 dark:bg-slate-900"/>
+  <div ref="root" class="root bg-slate-50 dark:bg-slate-950">
+    <header class="flex bg-slate-300 dark:bg-slate-900">
+      <div class="toggle flex-initial p-2">
+        <UButton icon="i-heroicons-bars-3" @click="toggle"/>
+      </div>
+      <div class="flex-initial">
+        <img src="~/assets/logo.svg" class="dark:invert" style="height: 100%; padding: 0.25rem;"/>
+      </div>
+
+      <div class="flex-1"/>
+
+      <div class="flex-initial text-right p-2" v-if="sock.sock.status !== 'OPEN'">
+        <UBadge color="red" size="lg" variant="solid">
+          <i class="i-heroicons-bolt-slash"/>&nbsp;{{ucFirst(sock.sock.status.toLowerCase())}}
+        </UBadge>
+      </div>
+
+      <div class="text-right p-2 flex-initial">
+        <ThemeToggle />
+      </div>
+    </header>
+
+    <LeftNav class="left-nav bg-slate-100 dark:bg-slate-900"/>
+
     <main>
       <NuxtPage />
     </main>
@@ -9,17 +56,24 @@
 
 <style lang="scss" scoped>
   .root {
-    --nav-width: 300px;
+    --nav-width: 500px;
+    --header-height: 50px;
 
     display: grid;
-    grid-template-areas: "nav main";
-    grid-template-columns: var(--nav-width) 1fr;
-
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    overflow: hidden;
+
+    grid-template-areas: "header header" "nav main";
+    grid-template-rows: var(--header-height) 1fr;
+    grid-template-columns: 300px 1fr;
+
+    HEADER {
+      grid-area: header;
+    }
 
     .left-nav {
       grid-area: nav;
@@ -33,4 +87,31 @@
       padding: 1rem;
     }
   }
+
+  // Desktop
+  @media all and (min-width: 768px)  {
+    .root {
+      .toggle {
+        display: none;
+      }
+    }
+  }
+
+  // Mobile
+  @media all and (max-width: 767px)  {
+    .root {
+      grid-template-columns: 0 100%;
+      transition: grid-template-columns 250ms;
+
+      .left-nav { opacity: 0; }
+      MAIN { opacity: 1}
+    }
+    .root.open {
+      grid-template-columns: 100% 0;
+
+      .left-nav { opacity: 1; }
+      MAIN { opacity: 0; }
+    }
+  }
+
 </style>

ui/assets/logo.svg

@@ -103,12 +103,12 @@ const outputTruncated = computed(() => {
     <i v-if="prefs.debug" class="text-blue-400">{{call}}</i>
     <div class="flex" :class="[isExpanded && 'mb-2']">
       <div class="flex-1">
-        <div>
+        <div class="break-all max-lg:text-sm">
           <UButton v-if="children.length || call.messages?.length || inputTruncated || outputTruncated" size="xs" :icon="icon" @click="toggle" class="align-baseline mr-1"/>
           {{displayName}}<template v-if="!isExpanded">({{inputShort}}) <i class="i-heroicons-arrow-right align-text-bottom"/> {{outputShort}}</template>
         </div>
       </div>
-      <div class="flex-inline text-right">
+      <div class="flex-inline text-right ml-1">
         <UTooltip v-if="isExpanded" :text="call.showSystemMessages ? 'Internal messages shown' : 'Internal messages hidden'">
           <UToggle v-model="call.showSystemMessages" class="mr-2" off-icon="i-heroicons-bars-2" on-icon="i-heroicons-bars-4" />
         </UTooltip>
@@ -117,7 +117,7 @@ const outputTruncated = computed(() => {
           <i class="i-heroicons-key"/>&nbsp;{{ prefs.mapCall(call.id) }}
         </UBadge> -->
         <UBadge size="md" :color="colorForState(call.state)" class="align-baseline" variant="subtle">
-          <i :class="iconForState(call.state)"/>&nbsp;{{ucFirst(call.state)}}
+          <i :class="iconForState(call.state)"/><span class="hidden lg:inline">&nbsp;{{ucFirst(call.state)}}</span>
         </UBadge>
       </div>
     </div>
@@ -143,7 +143,7 @@ const outputTruncated = computed(() => {
       />
     </template>
 
-    <div v-if="children.length" class="ml-9">
+    <div v-if="children.length" class="indent">
       <Call
         v-for="(child, idx) in children"
         :key="idx"
@@ -156,3 +156,15 @@ const outputTruncated = computed(() => {
     </div>
   </UCard>
 </template>
+
+<style lang="scss" scoped>
+  .indent {
+    margin-left: 10px;
+  }
+
+  @media all and (min-width: 768px)  {
+    .indent {
+      margin-left: 2.5rem;
+    }
+  }
+</style>

ui/components/call.vue

@@ -2,7 +2,6 @@
 // const router = useRouter()
 const gptList = await useGpts().listAll()
 const runList = await useRuns().findAll()
-const sock = useSocket()
 
 const gptLinks = computed(() => {
   return (gptList || []).map(x => { return {
@@ -32,7 +31,7 @@ async function remove(e: MouseEvent, id: any) {
 <template>
   <nav class="left">
     <div class="scripts text-slate-700 dark:text-slate-400">
-      <h4 class="header px-3 py-2 bg-slate-200 dark:bg-slate-800">GPTScripts</h4>
+      <h4 class="header px-3 py-2 bg-slate-200 dark:bg-slate-800">Scripts</h4>
       <UVerticalNavigation :links="gptLinks" />
     </div>
 
@@ -50,27 +49,14 @@ async function remove(e: MouseEvent, id: any) {
         </template>
       </UVerticalNavigation>
     </div>
-
-    <aside class="px-2 flex">
-      <div class="flex-1 mt-1">
-        <ThemeToggle />
-      </div>
-      <div class="flex-initial text-right" v-if="sock.sock.status !== 'OPEN'">
-        <UBadge color="red" class="mt-2">
-          <i class="i-heroicons-bolt-slash"/>&nbsp;{{ucFirst(sock.sock.status.toLowerCase())}}
-        </UBadge>
-      </div>
-    </aside>
   </nav>
 </template>
 
 <style lang="scss" scoped>
-  $aside-height: 45px;
-
   .left {
     display: grid;
-    grid-template-areas: "scripts" "runs" "aside";
-    grid-template-rows: 1fr 1fr $aside-height;
+    grid-template-areas: "scripts" "runs";
+    grid-template-rows: 1fr 1fr;
     height: 100%;
   }
 
@@ -84,9 +70,6 @@ async function remove(e: MouseEvent, id: any) {
     overflow-y: auto;
   }
 
-  ASIDE {
-  }
-
   .delete-btn {
     display: none;
   }