From caed89f0ae64217602a2832bbf2b5df9b66c0999 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 13:44:50 +0300
Subject: destroyed -> unmounted

---
 src/components/media_modal/media_modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/media_modal')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index e7384c93..38d66160 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -98,7 +98,7 @@ const MediaModal = {
     document.addEventListener('keyup', this.handleKeyupEvent)
     document.addEventListener('keydown', this.handleKeydownEvent)
   },
-  destroyed () {
+  unmounted () {
     window.removeEventListener('popstate', this.hide)
     document.removeEventListener('keyup', this.handleKeyupEvent)
     document.removeEventListener('keydown', this.handleKeydownEvent)
-- 
cgit v1.2.3-70-g09d2


From 6109fab14e4dac3a85ffa51ddfcd7e3aaef5149a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 8 Apr 2022 10:17:23 +0300
Subject: cleanup, fix some things, try to disable scrollbars on mobile

---
 src/App.scss                               | 28 ++++++++++++++++------------
 src/App.vue                                |  2 +-
 src/components/chat/chat.scss              |  9 ---------
 src/components/media_modal/media_modal.vue |  2 +-
 src/components/modal/modal.vue             |  2 +-
 5 files changed, 19 insertions(+), 24 deletions(-)

(limited to 'src/components/media_modal')

diff --git a/src/App.scss b/src/App.scss
index dd3d8cbb..0deac2b1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -116,7 +116,7 @@ nav {
 
 #content {
   overscroll-behavior-y: none;
-  overflow-y: auto;
+  overflow-y: scroll;
   overflow-x: hidden;
   position: sticky;
 }
@@ -198,19 +198,23 @@ nav {
       margin-left: -2em;
       padding-left: 2.5em;
 
-      &:not(.-show-scrollbar) {
-        scrollbar-width: none;
-        margin-right: -2em;
-        padding-right: 2.5em;
-
-        &::-webkit-scrollbar {
-          display: block;
-          width: 0;
+      // Only show custom scrollbars on devices which
+      // have a cursor/pointer to operate them
+      @media (pointer: fine) {
+        &:not(.-show-scrollbar) {
+          scrollbar-width: none;
+          margin-right: -2em;
+          padding-right: 2.5em;
+
+          &::-webkit-scrollbar {
+            display: block;
+            width: 0;
+          }
         }
-      }
 
-      .panel-heading.-sticky {
-        top: -10px;
+        .panel-heading.-sticky {
+          top: -10px;
+        }
       }
     }
   }
diff --git a/src/App.vue b/src/App.vue
index 243a3314..b5f6e7d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,8 +41,8 @@
         <router-view />
       </div>
       <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
-      <media-modal />
     </div>
+    <media-modal />
     <shout-panel
       v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 51bb3ea6..85e9f59d 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -133,18 +133,9 @@
     .chat-view-heading {
       box-sizing: border-box;
       position: static;
-      z-index: 9999;
       top: 0;
       margin-top: 0;
       border-radius: 0;
-
-      /* This practically overlays the panel heading color over panel background
-       * color. This is needed because we allow transparent panel background and
-       * it doesn't work well in this "disjointed panel header" case
-       */
-      background:
-        linear-gradient(to top, var(--panel), var(--panel)),
-        linear-gradient(to top, var(--bg), var(--bg));
       height: 50px;
     }
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 708a43c6..c7dcd007 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
 .modal-view.media-modal-view {
-  z-index: 1001;
+  z-index: 9000;
   flex-direction: column;
 
   .modal-view-button-arrow,
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 2b58913f..9394efff 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss">
 .modal-view {
-  z-index: 1000;
+  z-index: 2000;
   position: fixed;
   top: 0;
   left: 0;
-- 
cgit v1.2.3-70-g09d2


From 666498e7b76144b35d245d4b1c09e1dc62fac84b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 21:54:02 +0300
Subject: fix main post form having hidden emoji picker

---
 src/App.scss                                         | 12 ++++++------
 src/components/attachment/attachment.scss            |  2 +-
 src/components/desktop_nav/desktop_nav.scss          |  8 ++++----
 src/components/emoji_picker/emoji_picker.scss        |  2 +-
 src/components/media_modal/media_modal.vue           |  2 +-
 src/components/post_status_form/post_status_form.vue |  1 +
 src/components/user_panel/user_panel.vue             |  1 +
 src/hocs/with_load_more/with_load_more.scss          |  2 +-
 src/hocs/with_subscription/with_subscription.scss    |  2 +-
 9 files changed, 17 insertions(+), 15 deletions(-)

(limited to 'src/components/media_modal')

diff --git a/src/App.scss b/src/App.scss
index d8396562..cc8ef592 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 50px;
+  --navbar-height: 3.5em;
 }
 
 html {
@@ -159,8 +159,8 @@ nav {
 }
 
 .app-layout {
-  --miniColumn: 25em;
-  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --miniColumn: 25rem;
+  --maxiColumn: minmax(var(--miniColumn), 45rem);
   --columnGap: 1em;
   --status-margin: 0.75em;
 
@@ -227,7 +227,7 @@ nav {
 
   &.-has-new-post-button {
     .column {
-      padding-bottom: 20em;
+      padding-bottom: 10rem;
     }
   }
 
@@ -301,7 +301,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 14px;
+  font-size: 1rem;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
@@ -429,7 +429,7 @@ textarea,
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
-  font-size: 14px;
+  font-size: 1rem;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index dfda15bf..b2dea98d 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -173,7 +173,7 @@
       margin: 8px;
       word-break: break-all;
       h1 {
-        font-size: 14px;
+        font-size: 1rem;
         margin: 0px;
       }
     }
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 1e731c70..3c2e70b5 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -9,7 +9,7 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -75,7 +75,7 @@
 
     img {
       display: inline-block;
-      height: 50px;
+      height: var(--navbar-height);
     }
   }
 
@@ -101,8 +101,8 @@
 
   .item {
     flex: 1;
-    line-height: 50px;
-    height: 50px;
+    line-height: var(--navbar-height);
+    height: var(--navbar-height);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ec711758..1a696584 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -7,7 +7,7 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 1;
+  z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index c7dcd007..8b76aafb 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       height: $modal-view-button-icon-height;
       width: $modal-view-button-icon-width;
-      font-size: 14px;
+      font-size: 1rem;
       line-height: $modal-view-button-icon-height;
       color: #FFF;
       text-align: center;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0fdb6dc7..d6595354 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -509,6 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
+    z-index: 50;
   }
 
   form textarea.form-cw {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 50949b98..243de387 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -24,5 +24,6 @@
 <style lang="scss">
 .user-panel .signed-in {
   overflow: visible;
+  z-index: 10;
 }
 </style>
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index 1a26eb8d..de86ed4a 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -10,7 +10,7 @@
     border-top-color: var(--border, $fallback--border);
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
 
     a {
diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
index 52c7d94c..7fd83802 100644
--- a/src/hocs/with_subscription/with_subscription.scss
+++ b/src/hocs/with_subscription/with_subscription.scss
@@ -4,7 +4,7 @@
     text-align: center;
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2