From 5e77976dec02b73aa60b2562edbc4467e2ac1b48 Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Sat, 10 Apr 2021 14:03:42 +0300
Subject: [PATCH] dashboard: improve mobile-friendliness

---
 .../dashboard/GuildConfigEditor.vue           |  9 +++--
 dashboard/src/components/dashboard/Layout.vue | 36 ++++++++++---------
 dashboard/src/style/content.pcss              | 10 +++++-
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/dashboard/src/components/dashboard/GuildConfigEditor.vue b/dashboard/src/components/dashboard/GuildConfigEditor.vue
index b9448ddc..b69b57a7 100644
--- a/dashboard/src/components/dashboard/GuildConfigEditor.vue
+++ b/dashboard/src/components/dashboard/GuildConfigEditor.vue
@@ -8,8 +8,8 @@
       <div v-for="error in errors">{{ error }}</div>
     </div>
 
-    <div class="flex items-center">
-      <h1 class="flex-auto">Config for {{ guild.name }}</h1>
+    <div class="flex items-center flex-wrap">
+      <h1 class="flex-full md:flex-auto">Config for {{ guild.name }}</h1>
       <button v-if="!saving" class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700" v-on:click="save">
         <span v-if="saved">Saved!</span>
         <span v-else>Save</span>
@@ -125,10 +125,13 @@
         this.fitEditorToWindow();
       },
       fitEditorToWindow() {
+        const mainContainer = document.querySelector('.dashboard');
+        const mainContainerStyles = window.getComputedStyle(mainContainer);
+
         const editorElem = this.$refs.aceEditor.$el;
         const newWidth = editorElem.parentNode.clientWidth;
         const rect = editorElem.getBoundingClientRect();
-        const newHeight = Math.round(window.innerHeight - rect.top - 48);
+        const newHeight = Math.round(window.innerHeight - rect.top - parseInt(mainContainerStyles.paddingLeft, 10));
         this.resizeEditor(newWidth, newHeight);
       },
       resizeEditor(newWidth, newHeight) {
diff --git a/dashboard/src/components/dashboard/Layout.vue b/dashboard/src/components/dashboard/Layout.vue
index 13b9c052..79d19701 100644
--- a/dashboard/src/components/dashboard/Layout.vue
+++ b/dashboard/src/components/dashboard/Layout.vue
@@ -1,28 +1,30 @@
 <template>
-  <div class="dashboard container mx-auto px-6 py-6">
+  <div class="dashboard container mx-auto px-2 py-2 md:px-6 md:py-6">
     <Title title="Zeppelin - Dashboard" />
 
-    <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
-      <div class="flex-initial flex items-center">
-        <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
+    <nav class="flex items-stretch flex-wrap pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
+      <div class="flex-full md:flex-initial flex items-center">
+        <img class="w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
 
         <router-link to="/dashboard">
-          <h1 class="flex-auto font-semibold">Zeppelin Dashboard</h1>
+          <h1 class="font-semibold">Zeppelin Dashboard</h1>
         </router-link>
-
-        <ul class="dashboard-nav list-none flex ml-8">
-          <router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
-          <a href="javascript:void(0)" class="navbar-item hover:text-red-400" v-on:click="logout()">Log out</a>
-        </ul>
       </div>
 
-      <div class="flex-1 flex items-center justify-end">
-        <router-link
-          to="/docs"
-          role="menuitem"
-          class="py-1 px-2 rounded hover:bg-gray-700">
-          Go to documentation
-        </router-link>
+      <div class="flex-1 flex items-center flex-wrap">
+        <ul class="dashboard-nav list-none flex md:ml-8">
+          <router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
+          <a href="javascript:void(0)" class="navbar-item hover:text-red-400 mr-2" v-on:click="logout()">Log out</a>
+        </ul>
+
+        <div class="flex-1 flex items-center md:justify-end">
+          <router-link
+            to="/docs"
+            role="menuitem"
+            class="py-1 px-2 rounded hover:bg-gray-700">
+            Go to documentation
+          </router-link>
+        </div>
       </div>
     </nav>
 
diff --git a/dashboard/src/style/content.pcss b/dashboard/src/style/content.pcss
index 3709ad7a..a4733b37 100644
--- a/dashboard/src/style/content.pcss
+++ b/dashboard/src/style/content.pcss
@@ -1,6 +1,6 @@
 .main-content {
   & h1 {
-    @apply text-5xl;
+    @apply text-3xl;
     @apply font-semibold;
     @apply leading-none;
     @apply mb-4;
@@ -55,6 +55,14 @@
   }
 }
 
+@screen lg {
+  .main-content {
+    & h1 {
+      @apply text-5xl;
+    }
+  }
+}
+
 @screen xl {
   .main-content {
     & a:not([class]),