feat(ui): better mode switch on mobile

Signed-off-by: Neko Ayaka <[email protected]>
qifi-dev · Oct 5, 2024 · 96f8c78 · 96f8c78
1 parent ae16a24
commit 96f8c78
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -2,23 +2,59 @@
   <div h-full w-full flex flex-col>
     <header flex flex-col gap-4 px-4 pb-4 pt-4>
       <nav flex items-center>
-        <div w-40 flex items-center gap-2 text-4xl>
+        <div w-40 flex="~" items-center gap-2 text-4xl>
           <img src="/logo.svg" alt="Qrs" size-1em>
           <h1>
             Qrs
           </h1>
         </div>
-        <div h-full flex flex-1 justify-center gap-8 text-lg>
+        <div
+          class="flex sm:hidden"
+          left="50%" bottom="40px" translate-x="-50%"
+          bg="neutral-100 dark:neutral-900"
+          absolute flex-1 justify-center gap-2
+          rounded-full
+          p-2
+          text-sm
+        >
+          <NuxtLink
+            to="/"
+            active-class="!op100 bg-neutral-700 dark:bg-neutral-300 !text-neutral-100 !dark:text-neutral-900"
+            rounded-full px-3 py-2
+            op70 hover="text-blue"
+            flex="~ items-center gap-1"
+            transition="all ease-in-out" duration-300
+          >
+            <span i-carbon-upload inline-block />
+            Send
+          </NuxtLink>
+          <NuxtLink
+            to="/scan"
+            active-class="!op100 bg-neutral-700 dark:bg-neutral-300 !text-neutral-100 !dark:text-neutral-900"
+            rounded-full px-3 py-2
+            op70 hover="text-blue"
+            flex="~ items-center gap-1"
+            transition="all ease-in-out" duration-300
+          >
+            <span i-carbon-download inline-block />
+            Receive
+          </NuxtLink>
+        </div>
+        <div
+          class="hidden sm:flex"
+          flex-1 justify-center gap-8
+          text-lg
+        >
           <NuxtLink op70 hover="text-blue" duration-300 transition="all ease-in-out" to="/" active-class="!op100" flex="~ items-center gap-1">
             <span i-carbon-upload inline-block />
-            Transfer
+            Send
           </NuxtLink>
           <NuxtLink op70 hover="text-blue" duration-300 transition="all ease-in-out" to="/scan" active-class="!op100" flex="~ items-center gap-1">
             <span i-carbon-download inline-block />
             Receive
           </NuxtLink>
         </div>
-        <div w-40 flex justify-end text-2xl>
+        <div w-40 flex="~ <sm:1" justify-end text-2xl>
           <a href="https://github.com/qqrss/qrs" target="_blank" op70 hover="text-blue" duration-300 transition="all ease-in-out" flex="~ items-center gap-1">
             <span i-carbon:logo-github inline-block />
           </a>

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -65,7 +65,7 @@ async function onFileChange(file?: File) {
         <InputSlide
           v-model="throttledFps"
           :min="1"
-          :max="120"
+          :max="60"
           smooth
           w-full flex-1
         />