writing mode: vertical responsive styles

src/App.scss

@@ -598,6 +598,7 @@ option {
 
 .hide-number-spinner {
   -moz-appearance: textfield;
+  appearance: textfield;
 
   &[type=number]::-webkit-inner-spin-button,
   &[type=number]::-webkit-outer-spin-button {
@@ -765,6 +766,11 @@ option {
   @media all and (min-width: 801px) {
     display: none;
   }
+  @media all and (min-height: 801px) {
+    [class^=#{$writing-mode-vertical}] & {
+      display: none;
+    }
+  }
 
   a {
     display: inline-block;
@@ -790,6 +796,11 @@ option {
     display: none;
   }
 }
+@media all and (max-height: 800px) {
+  [class^=#{$writing-mode-vertical}] .mobile-hidden {
+    display: none;
+  }
+}
 
 @keyframes spin {
   0% {

src/_logical.scss

@@ -1,13 +1,11 @@
 $writing-mode-prefix: "writing-mode-";
-$writing-mode-horizontal: "h";
-$writing-mode-vertical: "v";
-$writing-mode-sideways: "s";
+$writing-mode-horizontal: "#{$writing-mode-prefix}h";
+$writing-mode-vertical: "#{$writing-mode-prefix}v";
+$writing-mode-sideways: "#{$writing-mode-prefix}s";
 
-.#{$writing-mode-prefix} {
-  &#{$writing-mode-horizontal}tb { writing-mode: horizontal-tb; }
-  &#{$writing-mode-vertical}rl { writing-mode: vertical-rl; }
-  &#{$writing-mode-vertical}lr { writing-mode: vertical-lr; }
-}
+.#{$writing-mode-horizontal}tb { writing-mode: horizontal-tb; }
+.#{$writing-mode-vertical}rl { writing-mode: vertical-rl; }
+.#{$writing-mode-vertical}lr { writing-mode: vertical-lr; }
 
 $resize-translate: ("block": ("vertical", "horizontal"), "inline": ("horizontal", "vertical"));
 $axis-translate: ("block": ("y", "x"), "inline": ("x", "y"));
@@ -18,8 +16,8 @@ $axis-translate: ("block": ("y", "x"), "inline": ("x", "y"));
   @if map-has-key($resize-translate, $value) {
     @supports not (resize: $value) {
       resize: nth(map-get($resize-translate, $value), 1);
-      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-prefix}#{$writing-mode-horizontal}]) &,
-      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-prefix}#{$writing-mode-horizontal}]) {
+      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) &,
+      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) {
         resize: nth(map-get($resize-translate, $value), 2);
       }
     }
@@ -32,8 +30,8 @@ $axis-translate: ("block": ("y", "x"), "inline": ("x", "y"));
   @if map-has-key($axis-translate, $axis) {
     @supports not (#{$prop}-#{$axis}: $value) {
       #{$prop}-#{nth(map-get($axis-translate, $axis), 1)}: $value;
-      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-prefix}#{$writing-mode-horizontal}]) &,
-      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-prefix}#{$writing-mode-horizontal}]) {
+      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) &,
+      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) {
         #{$prop}-#{nth(map-get($axis-translate, $axis), 2)}: $value;
       }
     }

src/components/desktop_nav/desktop_nav.scss

@@ -1,4 +1,5 @@
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .DesktopNav {
   inline-size: 100%;
@@ -64,6 +65,11 @@
     @media all and (min-width: 800px) {
       opacity: 1 !important;
     }
+    @media all and (min-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        opacity: 1 !important;
+      }
+    }
 
     .mask {
       mask-repeat: no-repeat;

src/components/emoji_picker/emoji_picker.scss

@@ -1,4 +1,5 @@
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .Notification {
   .emoji-picker {
@@ -12,12 +13,26 @@
       min-inline-size: 50%;
       max-inline-size: 130%;
     }
+    @media (min-height: 800px) and (max-height: 1300px) {
+      [class^=#{$writing-mode-vertical}] & {
+        inset-inline-start: -50%;
+        min-inline-size: 50%;
+        max-inline-size: 130%;
+      }
+    }
 
     @media (max-width: 800px) {
       inset-inline-start: -10%;
       min-inline-size: 50%;
       max-inline-size: 130%;
     }
+    @media (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        inset-inline-start: -10%;
+        min-inline-size: 50%;
+        max-inline-size: 130%;
+      }
+    }
   }
 }
 .emoji-picker {

src/components/media_modal/media_modal.vue

@@ -74,7 +74,7 @@
     >
       <FAIcon
         class="button-icon arrow-icon"
-        icon="chevron-inline-end"
+        icon="chevron-right"
       />
     </button>
     <button

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -13,6 +13,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .MobilePostButton {
   &.button-default {
@@ -52,5 +53,10 @@
     display: none;
   }
 }
+@media all and (min-height: 801px) {
+  [class^=#{$writing-mode-vertical}] .new-status-button:not(.always-show) {
+    display: none;
+  }
+}
 
 </style>

src/components/mod_modal/mod_modal.scss

@@ -1,4 +1,5 @@
 @import 'src/_variables.scss';
+@import 'src/_logical.scss';
 .mod-modal {
   overflow: hidden;
 
@@ -6,13 +7,13 @@
     .mod-modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
-       * 100vb - 100% = Distance between modal's top+bottom boundaries and screen
-       * (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
        * + 100% - we move modal completely off-screen, it's top boundary touches
        *   bottom of the screen
        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
        */
-      transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
       @media all and (max-width: 800px) {
         /* For mobile, the modal takes 100% of the available screen.
@@ -20,6 +21,19 @@
         */
         transform: translateY(calc(100% - 50px));
       }
+
+      .#{$writing-mode-vertical}rl & {
+        transform: translateX(calc(50px - ((100vw - 100%) / 2 + 100%)));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(50px - 100%));
+        }
+      }
+      .#{$writing-mode-vertical}lr & {
+        transform: translateX(calc(((100vw - 100%) / 2 + 100%) - 50px));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(100% - 50px));
+        }
+      }
     }
   }
 
@@ -36,6 +50,12 @@
       max-inline-size: 100vi;
       block-size: 100%;
     }
+    @media all and (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        max-inline-size: 100vi;
+        block-size: 100%;
+      }
+    }
 
     .panel-body {
       block-size: inherit;

src/components/registration/registration.vue

@@ -373,4 +373,9 @@ $validations-cRed: #f04124;
     flex-direction: column-reverse;
   }
 }
+@media all and (max-height: 800px) {
+  [class^=#{$writing-mode-vertical}] .registration-form .container {
+    flex-direction: column-reverse;
+  }
+}
 </style>

src/components/search/search.vue

@@ -128,6 +128,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .search-result-heading {
   color: $fallback--faint;
@@ -146,6 +147,16 @@
     }
   }
 }
+@media all and (max-height: 800px) {
+  [class^=#{$writing-mode-vertical}] .search-nav-heading {
+    .tab-switcher .tabs .tab-wrapper {
+      display: block;
+      justify-content: center;
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
+}
 
 .search-result {
   box-sizing: border-box;

src/components/settings_modal/settings_modal.scss

@@ -19,13 +19,13 @@
     .settings-modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
-       * 100vb - 100% = Distance between modal's top+bottom boundaries and screen
-       * (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
        * + 100% - we move modal completely off-screen, it's top boundary touches
        *   bottom of the screen
        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
        */
-      transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
       @media all and (max-width: 800px) {
         /* For mobile, the modal takes 100% of the available screen.
@@ -33,6 +33,19 @@
         */
         transform: translateY(calc(100% - 50px));
       }
+
+      .#{$writing-mode-vertical}rl & {
+        transform: translateX(calc(50px - ((100vw - 100%) / 2 + 100%)));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(50px - 100%));
+        }
+      }
+      .#{$writing-mode-vertical}lr & {
+        transform: translateX(calc(((100vw - 100%) / 2 + 100%) - 50px));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(100% - 50px));
+        }
+      }
     }
   }
 
@@ -49,6 +62,12 @@
       max-inline-size: 100vi;
       block-size: 100%;
     }
+    @media all and (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        max-inline-size: 100vi;
+        block-size: 100%;
+      }
+    }
 
     >.panel-body {
       block-size: 100%;
@@ -82,6 +101,11 @@
       @media all and (max-width: 800px) {
         display: none;
       }
+      @media all and (max-height: 800px) {
+        [class^=#{$writing-mode-vertical}] & {
+          display: none;
+        }
+      }
     }
   }
 }

src/components/side_drawer/side_drawer.vue

@@ -218,7 +218,7 @@
   </div>
 </template>
 
-<script src="./side_drawer.js" ></script>
+<script src="./side_drawer.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -247,6 +247,9 @@
   [dir="rtl"] & {
     transform: translate(200%);
   }
+  [class^="#{$writing-mode-vertical}"] & {
+    transform: translateX(0) translateY(-100%);
+  }
 }
 
 .side-drawer-darken {
@@ -324,6 +327,9 @@
   [dir="rtl"] & {
     transform: translate(200%);
   }
+  [class^="#{$writing-mode-vertical}"] & {
+    transform: translateX(0) translateY(-100%);
+  }
 }
 
 .side-drawer-heading {

src/components/status/status.scss

@@ -1,4 +1,5 @@
 @import "../../_variables.scss";
+@import "../../_logical.scss";
 
 .Status {
   min-inline-size: 0;
@@ -454,4 +455,23 @@
       }
     }
   }
+  @media all and (max-height: 800px) {
+    [class^=#{$writing-mode-vertical}] & {
+      .repeater-avatar {
+        margin-inline-start: 20px;
+      }
+
+      .post-avatar {
+        inline-size: 40px;
+        block-size: 40px;
+
+        // TODO define those other way somehow?
+        // stylelint-disable rscss/class-format
+        &.-compact {
+          inline-size: 32px;
+          block-size: 32px;
+        }
+      }
+    }
+  }
 }

src/components/status/status.vue

@@ -148,7 +148,7 @@
             class="status-heading"
           >
             <div class="heading-name-row">
-              <div class="heading-inline-start">
+              <div class="heading-left">
                 <h4
                   v-if="status.user.name_html"
                   class="status-username"

src/components/tab_switcher/tab_switcher.scss

@@ -60,6 +60,11 @@
     @media all and (max-width: 800px) {
       @include overflow-inline(auto);
     }
+    @media all and (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        @include overflow-inline(auto);
+      }
+    }
 
     > .contents {
       flex: 1 1 auto;
@@ -96,6 +101,11 @@
         @media all and (max-width: 800px) {
           min-inline-size: 4em;
         }
+        @media all and (max-height: 800px) {
+          [class^=#{$writing-mode-vertical}] & {
+            min-inline-size: 4em;
+          }
+        }
 
         &:not(.active)::after {
           inset-block-start: 0;
@@ -140,6 +150,17 @@
             display: none
           }
         }
+        @media all and (max-height: 800px) {
+          [class^=#{$writing-mode-vertical}] & {
+            padding-inline-start: .25em;
+            padding-inline-end: calc(.25em + 200px);
+            margin-inline-end: calc(.25em - 200px);
+            margin-inline-start: .25em;
+            .text {
+              display: none
+            }
+          }
+        }
       }
     }
   }
@@ -229,5 +250,10 @@
     @media all and (min-width: 800px) {
       display: none;
     }
+    @media all and (min-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        display: none;
+      }
+    }
   }
 }

src/components/timeline_menu_tabs/timeline_menu_tabs.vue

@@ -57,6 +57,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .timeline-menu-tabs {
   .nav-icon {
@@ -92,5 +93,10 @@
       display: none;
     }
   }
+  @media all and (max-height: 900px) {
+    [class^=#{$writing-mode-vertical}] & .timeline-title {
+      display: none;
+    }
+  }
 }
 </style>

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -170,5 +170,31 @@
       margin-block-end: 12px;
     }
   }
+  @media all and (min-height: 801px) {
+    [class^=#{$writing-mode-vertical}] & {
+      .panel-body {
+        flex-direction: row;
+      }
+
+      &-left {
+        inline-size: 50%;
+        max-inline-size: 320px;
+        border-inline-end: 1px solid;
+        border-color: $fallback--border;
+        border-color: var(--border, $fallback--border);
+        padding: 1.1em;
+
+        > div {
+          margin-block-end: 2em;
+        }
+      }
+
+      &-right {
+        inline-size: 50%;
+        flex: 1 1 auto;
+        margin-block-end: 12px;
+      }
+    }
+  }
 }
 </style>

src/modules/interface.js

@@ -169,24 +169,27 @@ const interfaceMod = {
     removeGlobalNotice ({ commit }, notice) {
       commit('removeGlobalNotice', notice)
     },
-    setLayoutHeight ({ commit }, value) {
+    setLayoutHeight ({ commit, dispatch }, value) {
       commit('setLayoutHeight', value)
+      dispatch('setLayoutType')
     },
     // value is optional, assuming it was cached prior
-    setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
-      let width = value
+    setLayoutWidth ({ commit, dispatch }, value) {
       if (value !== undefined) {
         commit('setLayoutWidth', value)
-      } else {
-        width = state.layoutWidth
       }
-      const mobileLayout = width <= 800
+      dispatch('setLayoutType')
+    },
+    setLayoutType ({ commit, state, rootGetters, rootState }) {
+      const isVertical = window.getComputedStyle(document.documentElement).getPropertyValue('writing-mode').startsWith('vertical-')
+      const size = isVertical ? state.layoutHeight : state.layoutWidth
+      const mobileLayout = size <= 800
       const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
       const { thirdColumnMode } = rootGetters.mergedConfig
       if (thirdColumnMode === 'none' || !rootState.users.currentUser) {
         commit('setLayoutType', normalOrMobile)
       } else {
-        const wideLayout = width >= 1300
+        const wideLayout = size >= 1300
         commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
       }
     },