fix: rtl offset + list indent (#1326, #1327)

client/components/common/nav-header.vue

@@ -18,7 +18,7 @@
       )
     v-layout(row)
       v-flex(xs6, md4)
-        v-toolbar.nav-header-inner.pl-3(color='black', dark, flat)
+        v-toolbar.nav-header-inner(color='black', dark, flat, :class='$vuetify.rtl ? `pr-3` : `pl-3`')
           v-avatar(tile, size='34', @click='goHome')
             v-img.org-logo(:src='logoUrl')
           //- v-menu(open-on-hover, offset-y, bottom, left, min-width='250', transition='slide-y-transition')

client/components/editor/editor-markdown.vue

@@ -183,6 +183,8 @@ import _ from 'lodash'
 import { get, sync } from 'vuex-pathify'
 import markdownHelp from './markdown/help.vue'
 
+/* global siteConfig */
+
 // ========================================
 // IMPORTS
 // ========================================
@@ -491,7 +493,8 @@ export default {
       },
       viewportMargin: 50,
       inputStyle: 'contenteditable',
-      allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
+      allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif'],
+      direction: siteConfig.rtl ? 'rtl' : 'ltr'
     })
     this.cm.setValue(this.$store.get('editor/content'))
     this.cm.on('change', c => {

client/themes/default/components/page.vue

 <template lang="pug">
-  v-app(v-scroll='upBtnScroll', :dark='darkMode')
+  v-app(v-scroll='upBtnScroll', :dark='darkMode', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`')
     nav-header
     v-navigation-drawer(
       :class='darkMode ? `grey darken-4-d4` : `primary`'
@@ -49,7 +49,7 @@
         v-divider
       v-container.grey.pa-0(fluid, :class='darkMode ? `darken-4-l3` : `lighten-4`')
         v-row(no-gutters, align-content='center', style='height: 90px;')
-          v-col.pl-4.page-col-content(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;')
+          v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
             .headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
             .caption.grey--text.text--darken-1 {{description}}
       v-divider

client/themes/default/scss/app.scss

@@ -103,10 +103,10 @@
         background: linear-gradient(to right, mc('blue', '300') 0%, mc('blue', '500') 10%, rgba(mc('blue', '900'), 0) 100%);
       }
 
-      @at-root .application--is-rtl & {
+      @at-root .is-rtl & {
         background: linear-gradient(to left, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
       }
-      @at-root .theme--dark.application--is-rtl & {
+      @at-root .theme--dark.is-rtl & {
         background: linear-gradient(to left, mc('grey', '600'), rgba(mc('grey', '600'), 0));
       }
     }
@@ -133,10 +133,10 @@
         background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
       }
 
-      @at-root .application--is-rtl & {
+      @at-root .is-rtl & {
         background: linear-gradient(to left, mc('grey', '700'), rgba(mc('grey', '700'), 0));
       }
-      @at-root .theme--dark.application--is-rtl & {
+      @at-root .theme--dark.is-rtl & {
         background: linear-gradient(to left, mc('grey', '300'), rgba(mc('grey', '700'), 0));
       }
     }
@@ -315,9 +315,19 @@
     padding: 1rem 0 0 1rem;
     list-style-position: outside;
 
+    @at-root .is-rtl & {
+      padding-left: 0;
+      padding-right: 1rem;
+    }
+
     li > ul, li > ol {
       padding-top: .5rem;
       padding-left: 1rem;
+
+      @at-root .is-rtl & {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
     }
 
     li + li {
@@ -328,6 +338,10 @@
       padding-left: 0;
       list-style-type: none;
 
+      @at-root .is-rtl & {
+        padding-right: 0;
+      }
+
       li {
         background-color: mc('grey', '50');
         background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
@@ -339,10 +353,20 @@
         border-radius: 5px;
         font-weight: 500;
 
+        @at-root .is-rtl & {
+          border-left-width: 1px;
+          border-right-width: 5px;
+        }
+
         &:hover {
           background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
           border-left-color: mc('blue', '500');
           cursor: pointer;
+
+          @at-root .is-rtl & {
+            border-left-color: mc('grey', '200');
+            border-right-width: mc('blue', '500');
+          }
         }
 
         &::before {
@@ -387,10 +411,20 @@
           border-left: 5px solid mc('grey', '700');
           box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
 
+          @at-root .theme--dark.is-rtl & {
+            border-left-width: 1px;
+            border-right-width: 5px;
+          }
+
           &:hover {
             background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
             border-left-color: mc('indigo', '300');
             cursor: pointer;
+
+            @at-root .theme--dark.is-rtl & {
+              border-left-color: mc('grey', '900');
+              border-right-width: mc('indigo', '300');
+            }
           }
         }
       }
@@ -711,6 +745,26 @@
 }
 
 // ---------------
+// RTL FIXES
+// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317
+// ---------------
+
+.is-rtl {
+  .page-col-content.is-page-header {
+    @each $size, $width in $grid-breakpoints {
+      @media (min-width: $width) {
+        @for $n from 0 through 12 {
+          &.offset-#{$size}-#{$n} {
+            margin-left: 0;
+            margin-right: ($n / 12 * 100) * 1%;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ---------------
 // PRINT OVERRIDES
 // ---------------