From c7d67fa6a36d6d4e12ea5d1d2db2782bd81de6ac Mon Sep 17 00:00:00 2001
From: styppo <mail@styp-rekowsky.de>
Date: Wed, 28 Dec 2022 15:11:49 +0000
Subject: [PATCH] Responsive layout

---
 src/assets/variables.scss                |   4 +-
 src/components/BaseUserName.vue          |   3 +-
 src/components/CreatePost/PostEditor.vue |  19 +-
 src/components/MainMenu/MainMenu.vue     |  39 +++-
 src/components/MainMenu/MenuItem.vue     |  14 +-
 src/components/MainMenu/ProfilePopup.vue |  13 +-
 src/components/Trends/index.vue          |   2 +-
 src/layouts/MainLayout.vue               | 228 ++++++-----------------
 src/pages/Profile.vue                    |   2 +-
 9 files changed, 123 insertions(+), 201 deletions(-)

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index f3020b9..c1e93e4 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -1,3 +1,5 @@
 $phone-sm: 374px;
 $phone: 414px;
-$tablet: 1024px;
+$phone-lg: 755px;
+$tablet-sm: 1113px;
+$tablet: 1310px;
diff --git a/src/components/BaseUserName.vue b/src/components/BaseUserName.vue
index 2e9e925..85cc2ea 100644
--- a/src/components/BaseUserName.vue
+++ b/src/components/BaseUserName.vue
@@ -1,6 +1,7 @@
 <template>
   <span
-    :class="'username' + (wrap ? ' two-line' : '')"
+    class="username"
+    :class="{'two-line': wrap}"
   >
     <a @click.stop="toProfile(pubkey)">
       <span
diff --git a/src/components/CreatePost/PostEditor.vue b/src/components/CreatePost/PostEditor.vue
index f2ec0c2..cc300fc 100644
--- a/src/components/CreatePost/PostEditor.vue
+++ b/src/components/CreatePost/PostEditor.vue
@@ -1,5 +1,11 @@
 <template>
-  <div :class="rootCssClass">
+  <div
+    class="post-editor"
+    :class="{
+      'post-editor-compact': compact,
+      'post-editor-compact-collapsed': collapsed
+    }"
+  >
     <div class="post-editor-avatar">
       <BaseUserAvatar :pubkey="$store.state.keys.pub" />
     </div>
@@ -102,14 +108,6 @@ export default {
       collapsed: this.compact,
     }
   },
-  computed: {
-    rootCssClass() {
-      let classes = ['post-editor']
-      if (this.compact) classes.push('post-editor-compact')
-      if (this.collapsed) classes.push('post-editor-compact-collapsed')
-      return classes
-    }
-  },
   methods: {
     hasPostText() {
       return this.post.text.trim().length > 0
@@ -162,7 +160,7 @@ button.btn {
         padding: 12px;
         font-size: 1.5rem;
         line-height: 1.3em;
-        resize: vertical;
+        resize: none;
         background-color: transparent;
         border: none;
         width: 100%;
@@ -206,7 +204,6 @@ button.btn {
     .input-section {
       textarea {
         padding: 10px 0;
-        resize: none;
         min-height: 48px;
         height: 48px;
         overflow: hidden;
diff --git a/src/components/MainMenu/MainMenu.vue b/src/components/MainMenu/MainMenu.vue
index 0b2f75d..998e3f5 100644
--- a/src/components/MainMenu/MainMenu.vue
+++ b/src/components/MainMenu/MainMenu.vue
@@ -42,13 +42,14 @@
         class="menu-post-button"
         @click="$store.commit('toggleTweetButton')"
       >
-        Post
+        <span class="label">Post</span>
+        <BaseIcon class="icon" icon="pen" />
       </div>
     </div>
     <ProfilePopup />
     <div
       class="mobile-close-menu-button"
-      @click="$store.commit('setMobileMenuState', false)"
+      @click="$emit('mobile-menu-close')"
     >
       <div class="icon">
         <BaseIcon icon="left" />
@@ -76,6 +77,7 @@ export default {
     //MoreMenu,
     ProfilePopup
   },
+  emits: ['mobile-menu-close'],
   data: function() {
     return {
       items: MENU_ITEMS,
@@ -118,6 +120,7 @@ menu {
   flex-direction: column;
   justify-content: space-between;
   margin: 0;
+  padding-inline-start: 0;
   .menu {
     &-nav {
       position: relative;
@@ -141,7 +144,7 @@ menu {
       }
     }
     &-post-button {
-      width: 80%;
+      width: 90%;
       text-align: center;
       padding: 1rem 0;
       cursor: pointer;
@@ -151,6 +154,9 @@ menu {
       font-size: 1.2rem;
       border-radius: 999px;
       margin-top: 20px;
+      .icon {
+        display: none;
+      }
     }
   }
   .mobile-close-menu-button {
@@ -158,17 +164,37 @@ menu {
   }
 }
 
+@media screen and (max-width: $tablet) and (min-width: $phone) {
+  menu {
+    align-items: flex-end;
+    .menu-post-button {
+      width: fit-content;
+      padding: 1rem;
+      .label {
+        display: none;
+      }
+      .icon {
+        display: block;
+        width: 24px;
+        height: 24px;
+        fill: #fff;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: $phone) {
   menu {
     .mobile-close-menu-button {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 0;
+      top: 1rem;
       display: flex;
       align-items: center;
       padding: 6px;
       border-radius: 999px;
       background-color: $color-primary;
+      cursor: pointer;
       .icon {
         width: 1.2rem;
         height: 1.2rem;
@@ -181,7 +207,8 @@ menu {
       span {
         color: #fff;
         font-weight: bold;
-        margin-left: 8px;
+        margin: 0 4px;
+        line-height: 16px;
       }
     }
   }
diff --git a/src/components/MainMenu/MenuItem.vue b/src/components/MainMenu/MenuItem.vue
index 2f56d04..a73a41d 100644
--- a/src/components/MainMenu/MenuItem.vue
+++ b/src/components/MainMenu/MenuItem.vue
@@ -47,7 +47,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'assets/theme/colors.scss';
+@import "assets/theme/colors.scss";
+@import "assets/variables.scss";
 
 a {
   display: block;
@@ -101,4 +102,15 @@ a {
     }
   }
 }
+
+@media screen and (max-width: $tablet) and (min-width: $phone) {
+  .menu-item {
+    &-content {
+      visibility: hidden;
+      width: 0;
+      margin: 0;
+    }
+  }
+}
+
 </style>
diff --git a/src/components/MainMenu/ProfilePopup.vue b/src/components/MainMenu/ProfilePopup.vue
index f497296..84b337c 100644
--- a/src/components/MainMenu/ProfilePopup.vue
+++ b/src/components/MainMenu/ProfilePopup.vue
@@ -105,14 +105,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'assets/theme/colors.scss';
+@import "assets/theme/colors.scss";
+@import "assets/variables.scss";
 
 .menu-profile {
   display: flex;
   align-items: center;
-  padding: 4px 1rem;
   margin-bottom: 1rem;
-  margin-right: 1rem;
   cursor: pointer;
   border-radius: 999px;
   transition: 120ms ease-in-out;
@@ -123,7 +122,7 @@ export default {
     background-color: rgba($color: $color-primary, $alpha: 0.3);
   }
   &-pic {
-    margin: 6px 0;
+    padding: 2px;
     img {
       border-radius: 999px;
       width: 100%;
@@ -207,4 +206,10 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: $tablet) and (min-width: $phone) {
+  .menu-profile-items {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/Trends/index.vue b/src/components/Trends/index.vue
index d26d2b3..d71475a 100644
--- a/src/components/Trends/index.vue
+++ b/src/components/Trends/index.vue
@@ -30,7 +30,7 @@ export default {
     return {
       trends: [
         {
-          name: '#nostr',
+          name: '#todo',
           postCount: 58
         }
       ]
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 75c3dc5..8b2d923 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -4,10 +4,10 @@
       <TheKeyInitializationDialog style="max-height: 85vh" @look-around="setLookingAroundMode"/>
     </q-dialog>
 
-    <div class="layout">
+    <div class="layout" @click="mobileMenuOpen = false">
       <div class="layout-menu">
-        <div class="layout-menu-fixed">
-          <MainMenu />
+        <div class="layout-menu-fixed" :class="{active: mobileMenuOpen}">
+          <MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" />
         </div>
       </div>
 
@@ -46,6 +46,13 @@
           <Trends />
         </div>
       </div>
+
+      <div
+        class="mobile-menu-toggler"
+        @click.stop="mobileMenuOpen = !mobileMenuOpen"
+      >
+        <BaseIcon icon="hamburger" />
+      </div>
     </div>
 
     <q-page-sticky v-if="($q.screen.width < 600)" @click.stop="resizePostEntryPlaceholder" id="bottom-drawer" position="bottom" class="z-top xs lt-sm">
@@ -71,15 +78,6 @@
 
         />
       </div>
-
-      <TheUserMenu
-        id="bottom-menu"
-        :compact-mode="true"
-        :posting="postEntryOpen"
-        @toggle-post-entry="togglePostEntry"
-        @scroll-to-rect="scrollToRect"
-        @set-user="lookingAround=false"
-      />
     </q-page-sticky>
   </q-layout>
 </template>
@@ -90,19 +88,19 @@ import { scroll, useQuasar, LocalStorage } from 'quasar'
 const { getVerticalScrollPosition, setVerticalScrollPosition} = scroll
 import { activateSub, deactivateSub, destroyStreams } from '../query'
 import MainMenu from 'components/MainMenu/MainMenu.vue'
-import TheUserMenu from 'components/TheUserMenu.vue'
 import TheKeyInitializationDialog from 'components/TheKeyInitializationDialog.vue'
 import SearchBox from 'components/SearchBox/SearchBox.vue'
 import Trends from 'components/Trends/index.vue'
+import BaseIcon from 'components/BaseIcon/index.vue'
 import { setCssVar, getCssVar } from 'quasar'
 
 export default defineComponent({
   name: 'MainLayout',
   components: {
+    BaseIcon,
     MainMenu,
     SearchBox,
     Trends,
-    TheUserMenu,
     TheKeyInitializationDialog,
   },
 
@@ -124,6 +122,8 @@ export default defineComponent({
       postEntryOpen: false,
       replyEvent: null,
       lookingAround: false,
+
+      mobileMenuOpen: false,
     }
   },
 
@@ -355,25 +355,28 @@ export default defineComponent({
     width: 100%;
     max-width: 300px;
     &-fixed {
-      position: fixed;
+      position: sticky;
+      top: 0;
       width: 100%;
       max-width: inherit;
+      padding: 0 1rem;
     }
   }
   &-flow {
     border-right: $border-dark;
     border-left: $border-dark;
     width: 100%;
+    min-width: 660px;
     max-width: 660px;
     min-height: 100vh;
   }
   &-sidebar {
     width: 100%;
-    max-width: 330px;
-    margin-left: 1rem;
+    min-width: 330px;
+    margin: 0 1rem;
     &-fixed {
       position: fixed;
-      width: 100%;
+      width: 330px;
       max-width: inherit;
     }
   }
@@ -382,32 +385,44 @@ export default defineComponent({
   }
 }
 
-@media screen and (max-width: $phone) {
-  .layout-menu-fixed-container{
-    background-color: $color-bg;
-    transform: translateX(-100%);
-    box-shadow: $shadow-white;
-    transition: 200ms ease;
-    padding-left: 20px;
-    &.active {
-      transform: translateX(0%);
-      z-index: 666;
-    }
-  }
+@media screen and (max-width: $tablet-sm) {
   .layout-sidebar {
-    &-fixed {
-      display: none;
-    }
+    display: none;
   }
+}
 
+@media screen and (max-width: $phone-lg) {
+  .layout-menu {
+    max-width: 80px;
+  }
+  .layout-flow {
+    min-width: unset;
+  }
+}
+
+@media screen and (max-width: $phone) {
   .layout {
-    &-sidebar {
-      display: none;
-      max-width: unset;
-    }
     &-menu {
       max-width: 300px;
       width: unset;
+      &-fixed {
+        position: fixed;
+        background-color: $color-bg;
+        transform: translateX(-100%);
+        box-shadow: $shadow-white;
+        transition: 200ms ease;
+        z-index: 1000;
+        &.active {
+          transform: translateX(0%);
+        }
+      }
+    }
+    &-sidebar {
+      display: none;
+      max-width: unset;
+      &-fixed {
+        display: none;
+      }
     }
     .mobile-menu-toggler {
       position: fixed;
@@ -415,7 +430,7 @@ export default defineComponent({
       left: 1rem;
       width: 3rem;
       height: 3rem;
-      padding: 8px;
+      padding: 6px 8px 8px;
       border-radius: 999px;
       background-color: $color-primary;
       display: flex;
@@ -485,141 +500,4 @@ export default defineComponent({
 .q-fab__actions--left {
   margin: 0;
 }
-
-@media screen and (min-width: 600px) {
-  body {
-    height: unset;
-    overflow: unset;
-  }
-  #navagation-buttons .q-btn{
-    font-size: .8rem;
-  }
-  #layout-container {
-    justify-content: flex-start;
-    overflow: hidden;
-    height: 100vh;
-  }
-  #left-drawer {
-    display: flex;
-    overflow: hidden;
-    width: 50px;
-    max-width: 50px;
-    min-width: 50px;
-    flex: 0;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-  #middle-page {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-width: 550px;
-    max-width: 650px;
-    height: 100vh;
-    padding-bottom: 0;
-    flex: 1;
-    flex-shrink: 1;
-    flex-grow: 1;
-  }
-  #middle-page .q-page-container {
-    overflow: auto;
-    height: 100%;
-    flex: 1;
-    flex-shrink: 1;
-    flex-grow: 1;
-  }
-  #post-entry {
-    height: fit-content;
-    display: unset;
-  }
-  #bottom-menu,
-  #bottom-menu-placeholder,
-  #bottom-post-entry-placeholder {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 700px) {
-  #layout-container {
-    justify-content: flex-start;
-    overflow: hidden;
-    height: 100vh;
-  }
-  #left-drawer, #right-drawer {
-    display: flex;
-    visibility: inherit;
-    height: auto;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-  }
-  #right-drawer {
-    width: auto;
-    max-width: 300px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    flex: 1;
-    flex-shrink: 1;
-    flex-grow: 1;
-  }
-  #middle-page {
-    min-width: 400px;
-    max-width: 600px;
-  }
-}
-@media screen and (min-width: 1023px) {
-  #left-drawer {
-    width: 200px;
-    min-width: 200px;
-    max-width: 300px;
-  }
-  #middle-page {
-    width: 600px;
-    min-width: 600px;
-    max-width: 600px;
-    flex: 0;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-  #navagation-buttons .q-btn{
-    font-size: .9rem;
-  }
-}
-@media screen and (min-width: 1100px) {
-  #left-drawer {
-    width: 200px;
-    min-width: 200px;
-    max-width: 300px;
-    flex: 1;
-    flex-shrink: 1;
-    flex-grow: 1;
-  }
-  #right-drawer {
-    width: 300px;
-    min-width: 300px;
-    max-width: 300px;
-    flex: 0;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-}
-@media screen and (min-width: 1200px) {
-  #layout-container {
-    justify-content: center;
-  }
-  #left-drawer, #right-drawer {
-    width: calc((100vw - 600px) / 2);
-    max-width: 300px;
-    flex: 1;
-    flex-shrink: 1;
-    flex-grow: 1;
-  }
-  #middle-page {
-    width: 600px;
-    min-width: 600px;
-    max-width: 600px;
-    flex: 0;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-}
 </style>
diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue
index 4e20019..9c3af72 100644
--- a/src/pages/Profile.vue
+++ b/src/pages/Profile.vue
@@ -61,7 +61,7 @@
         </div>
         <div v-if='!searchText'>
           <BasePostThread v-for="thread in threads" :key="thread[0].id" :events="thread" @add-event='addEvent'/>
-          <BaseButtonLoadMore :loading-more='loadingMore' :reached-end='reachedEnd' @click='loadMore' />
+          <BaseButtonLoadMore :loading='loadingMore' :reached-end='reachedEnd' @click='loadMore' />
         </div>
       </q-tab-panel>