liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
NGPixel 2019-12-22 18:49:17 -05:00
parent f09f1f4f1e
commit 14c842ff9d
4 changed files with 65 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/common/nav-header.vue
View File

@ -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')

5
client/components/editor/editor-markdown.vue
View File

@ -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 => {

4
client/themes/default/components/page.vue
View File

@ -1,5 +1,5 @@
<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

62
client/themes/default/scss/app.scss
View File

@ -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');
}
}
}
}
@ -710,6 +744,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
// ---------------