Make docs more mobile friendly

dashboard/src/components/Expandable.vue

@@ -34,12 +34,14 @@
         }
       }
 
-      .icon {
+      & .icon {
         transition: transform var(--animation-time);
-        transform-origin: 50% 60%;
+        transform-origin: 50% 50%;
+        position: relative;
+        top: 0.125rem;
       }
 
-      .icon-open {
+      & .icon-open {
         transform: rotate(179deg);
       }
     }

dashboard/src/components/docs/DocsLayout.vue

@@ -15,34 +15,31 @@
         <router-link
           to="/dashboard"
           role="menuitem"
-          class="py-1 px-2 rounded hover:bg-gray-700">
+          class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block">
           Go to dashboard
         </router-link>
+        <button class="link-button text-2xl leading-zero lg:hidden" v-on:click="toggleMobileMenu()">
+          <Menu />
+        </button>
       </div>
     </nav>
 
-    <!-- WIP bar -->
-    <div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
-      <alert class="mr-1 text-yellow-300" />
-      This documentation is a work in progress.
-    </div>
-
     <!-- Content wrapper -->
-    <div class="flex items-start mt-8">
+    <div class="flex flex-wrap items-start mt-8">
       <!-- Sidebar -->
-      <nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
+      <nav class="docs-sidebar px-4 pt-2 pb-3 mr-8 mb-4 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block" v-bind:class="{ hidden: !mobileMenuOpen }">
         <div role="none" v-for="(group, index) in menu">
           <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
           <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
             <li role="none" v-for="item in group.items">
-              <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
+              <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500" v-on:click.native="mobileMenuOpen = false">{{ item.label }}</router-link>
             </li>
           </ul>
         </div>
       </nav>
 
       <!-- Content -->
-      <div class="docs-content main-content flex-auto overflow-x-hidden">
+      <div class="docs-content main-content flex-flexible overflow-x-hidden">
         <router-view :key="$route.fullPath"></router-view>
       </div>
     </div>
@@ -52,7 +49,7 @@
 <script lang="ts">
   import Vue from "vue";
   import {mapState} from "vuex";
-  import Alert from 'vue-material-design-icons/Alert.vue';
+  import Menu from 'vue-material-design-icons/Menu.vue';
   import Title from "../Title.vue";
 
   type TMenuItem = {
@@ -120,11 +117,23 @@
   ];
 
   export default {
-    components: { Alert, Title },
+    components: { Menu, Title },
     async mounted() {
       await this.$store.dispatch("docs/loadAllPlugins");
     },
 
+    data() {
+      return {
+        mobileMenuOpen: false
+      };
+    },
+
+    methods: {
+      toggleMobileMenu() {
+        this.mobileMenuOpen = !this.mobileMenuOpen;
+      },
+    },
+
     computed: {
       ...mapState('docs', {
         plugins: 'allPlugins',

dashboard/src/components/docs/Introduction.vue

@@ -5,6 +5,12 @@
       Zeppelin is a private moderation bot for Discord, designed with large servers and reliability in mind.
     </p>
 
+    <!-- WIP bar -->
+    <div class="px-3 py-2 rounded bg-gray-800 shadow-md inline-block">
+      <alert class="inline-icon mr-1 text-yellow-300" />
+      This documentation is a work in progress.
+    </div>
+
     <h2>Getting the bot</h2>
     <p>
       Since the bot is currently private, access to the bot is granted on a case by case basis.<br>
@@ -28,3 +34,11 @@
     </p>
   </div>
 </template>
+
+<script lang="ts">
+  import Alert from 'vue-material-design-icons/Alert.vue';
+
+  export default {
+    components: { Alert },
+  };
+</script>

dashboard/src/style/app.pcss

@@ -9,6 +9,12 @@
 
 @import "docs.pcss";
 
+/* Reset some icon default styles for more predictable alignment */
+.material-design-icon > .material-design-icon__svg {
+  position: static;
+  bottom: 0;
+}
+
 body {
   overflow-y: scroll;
 

dashboard/src/style/components.pcss

@@ -28,3 +28,7 @@
     @apply p-0;
   }
 }
+
+.inline-icon {
+  top: 0.125rem;
+}

dashboard/tailwind.config.js

@@ -1,6 +1,15 @@
 module.exports = {
+  important: true,
   theme: {
-    extend: {}
+    extend: {
+      lineHeight: {
+        zero: '0'
+      },
+      flex: {
+        full: '0 0 100%',
+        flexible: '1 1 0'
+      }
+    }
   },
   variants: {},
   plugins: []

dashboard/webpack.config.js

@@ -102,9 +102,7 @@ let config = {
                     },
                   }),
                   require('postcss-nesting')(),
-                  require('tailwindcss')({
-                    important: true,
-                  }),
+                  require('tailwindcss')(),
                 ];
 
                 if (process.env.NODE_ENV === "production") {