From 0d9c7be909b83da6b7a860e38b810217471f5176 Mon Sep 17 00:00:00 2001 From: Nick Date: Sun, 11 Aug 2019 00:12:07 -0400 Subject: [PATCH] fix: arabic UI improvements --- client/components/admin/admin-dashboard.vue | 5 +++++ client/components/admin/admin-locale.vue | 4 ++-- client/components/common/nav-header.vue | 8 ++++---- client/scss/fonts/arabic.scss | 15 ++++++++++++++ client/themes/default/components/page.vue | 22 +++++++++++++++------ 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue index 903cfcdb..f9aa6a96 100644 --- a/client/components/admin/admin-dashboard.vue +++ b/client/components/admin/admin-dashboard.vue @@ -177,6 +177,11 @@ export default { top: 12px; font-size: 100px !important; opacity: .25; + + @at-root .v-application--is-rtl & { + left: 0; + right: initial; + } } diff --git a/client/components/admin/admin-locale.vue b/client/components/admin/admin-locale.vue index 7de2ef66..987beab8 100644 --- a/client/components/admin/admin-locale.vue +++ b/client/components/admin/admin-locale.vue @@ -114,7 +114,7 @@ template(v-slot:item.availability='{ item }') .d-flex.align-center.pl-4 v-progress-circular(:value='item.availability', width='2', size='20', :color='item.availability <= 33 ? `red` : (item.availability <= 66) ? `orange` : `green`') - .caption.ml-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}% + .caption.mx-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}% template(v-slot:item.isInstalled='{ item }') v-progress-circular(v-if='item.isDownloading', indeterminate, color='blue', size='20', :width='2') v-btn(v-else-if='item.isInstalled && item.installDate < item.updatedAt', icon, small, @click='download(item)') @@ -257,7 +257,7 @@ export default { _.delay(() => { window.location.reload(true) - }, 1500) + }, 1000) } else { this.$store.commit('showNotification', { message: `Error: ${resp.message}`, diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue index ed3ca256..9c98a53f 100644 --- a/client/components/common/nav-header.vue +++ b/client/components/common/nav-header.vue @@ -161,11 +161,11 @@ template(v-slot:activator='{ on: tooltip }') v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-0` : ``') v-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle - v-avatar(v-else-if='picture.kind === `image`', :size='29') + v-avatar(v-else-if='picture.kind === `image`', :size='34') v-img(:src='picture.url') span {{$t('common:header.account')}} v-list.py-0 - v-list-item.py-3.grey(avatar, :class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-5`') + v-list-item.py-3.grey(:class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-5`') v-list-item-avatar v-avatar.blue(v-if='picture.kind === `initials`', :size='40') span.white--text.subheading {{picture.initials}} @@ -189,7 +189,7 @@ v-tooltip(v-else, left) template(v-slot:activator='{ on }') - v-btn(icon, v-on='on', outlined, color='grey darken-3', href='/login') + v-btn(icon, v-on='on', color='grey darken-3', href='/login') v-icon(color='grey') mdi-account-circle span {{$t('common:header.login')}} @@ -378,7 +378,7 @@ export default { right: 12px; border-radius: 4px !important; - @at-root .application--is-rtl & { + @at-root .v-application--is-rtl & { right: initial; left: 12px; } diff --git a/client/scss/fonts/arabic.scss b/client/scss/fonts/arabic.scss index 921d26b4..aedaafd5 100644 --- a/client/scss/fonts/arabic.scss +++ b/client/scss/fonts/arabic.scss @@ -22,6 +22,14 @@ font-style: normal; } +@font-face { + font-family: 'BalooBhaijaan'; + src: url('/fonts/arabic/BalooBhaijaan-Regular.woff2') format('woff2'), + url('/fonts/arabic/BalooBhaijaan-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + @font-face { font-family: 'Roboto Mono'; src: url('/fonts/arabic/RobotoMono-Regular.woff2') format('woff2'), @@ -39,5 +47,12 @@ html:lang(ar), html:lang(fa) { & .headline, & .title { font-family: Tajawal, sans-serif !important; } + + &.v-application--is-rtl { + h1, h2, h3, h4, h5, h6 { + font-family: BalooBhaijaan, sans-serif; + font-weight: normal; + } + } } } diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue index 3f9193d8..1cb78fcc 100644 --- a/client/themes/default/components/page.vue +++ b/client/themes/default/components/page.vue @@ -61,13 +61,13 @@ v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``') template(v-for='(tocItem, tocIdx) in toc') v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)') - v-icon(color='grey', small) mdi-chevron-right - v-list-item-title.pl-3 {{tocItem.title}} + v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }} + v-list-item-title.px-3 {{tocItem.title}} //- v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length') template(v-for='tocSubItem in tocItem.children') v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)') - v-icon.pl-3(color='grey lighten-1', small) mdi-chevron-right - v-list-item-title.pl-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}} + v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }} + v-list-item-title.px-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}} //- v-divider(inset, v-if='tocIdx < toc.length - 1') v-card.mt-5 @@ -126,9 +126,19 @@ v-spacer v-flex.page-col-content(xs12, lg9, xl10) - v-tooltip(left, v-if='isAuthenticated') + v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='isAuthenticated') template(v-slot:activator='{ on }') - v-btn.btn-animate-edit(fab, bottom, right, color='primary', fixed, dark, :href='"/e/" + locale + "/" + path', v-on='on') + v-btn.btn-animate-edit( + fab + bottom + :right='!$vuetify.rtl' + :left='$vuetify.rtl' + color='primary' + fixed + dark + :href='"/e/" + locale + "/" + path' + v-on='on' + ) v-icon mdi-pencil span {{$t('common:page.editPage')}} .contents(ref='container')