Update style for mobile

source/app/web/statics/app.js

@@ -18,6 +18,16 @@
             } catch (error) {}
         },
         components:{Prism:PrismComponent},
+      //Watchers
+        watch:{
+          palette:{
+            immediate:true,
+            handler(current, previous) {
+              document.querySelector("body").classList.remove(previous)
+              document.querySelector("body").classList.add(current)
+            }
+          }
+        },
       //Data initialization
         data:{
           version,

source/app/web/statics/index.html

@@ -237,6 +237,27 @@
 
           <!-- Right section -->
           <div class="right">
+
+            <!-- Tabs (mobile screen)-->
+            <nav class="mobile flex">
+              <div class="left"></div>
+              <div class="right">
+                <div @click="tab = 'overview'" class="tab" :class="{active:tab === 'overview'}">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path></svg>
+                  Overview
+                </div>
+                <div @click="tab = 'action'" class="tab" :class="{active:tab === 'action', disabled:!user}">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>
+                  Action
+                </div>
+                <div @click="tab = 'markdown'" class="tab" :class="{active:tab === 'markdown', disabled:!user}">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0114.25 15h-9a.75.75 0 010-1.5h9a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 0110 4.25V1.5H5.75a.25.25 0 00-.25.25v2.5a.75.75 0 01-1.5 0v-2.5zm7.5-.188V4.25c0 .138.112.25.25.25h2.688a.252.252 0 00-.011-.013l-2.914-2.914a.272.272 0 00-.013-.011zM5.72 6.72a.75.75 0 000 1.06l1.47 1.47-1.47 1.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM3.28 7.78a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 001.06-1.06L1.81 9.25l1.47-1.47z"></path></svg>
+                  Markdown
+                </div>
+              </div>
+            </nav>
+
+            <!-- Body -->
             <div class="body">
               <div class="readme">
                 <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>

source/app/web/statics/style.css

@@ -3,6 +3,7 @@
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
     padding: 0;
     margin: 0;
+    background-color: var(--color-bg-canvas);
   }
   main {
     height: auto;
@@ -11,6 +12,9 @@
     display: flex;
     flex-direction: column;
   }
+  .flex {
+    display: flex;
+  }
 /* Title */
   .title {
     margin: 0;
@@ -32,7 +36,7 @@
   }
 /* Tabs */
   nav {
-    display: flex;
+    display: none;
     border-bottom: 1px solid var(--color-border-secondary);
     flex-shrink: 0;
     overflow-x: auto;
@@ -64,7 +68,6 @@
   nav .right {
     display: flex;
     border: none;
-    height: 100%;
   }
   nav .left {
     display: none;
@@ -288,10 +291,14 @@
     nav {
       margin: 32px 0 24px;
       overflow: hidden;
+      display: flex;
     }
     nav .left {
       display: block;
     }
+    nav .right {
+      height: 100%;
+    }
     .container {
       flex-direction: row;
     }
@@ -303,4 +310,7 @@
     .avatar {
       display: flex;
     }
+    .mobile {
+      display: none;
+    }
   }