From 2b6f0331d5bf5f5bd93bf1fe5bf30e564d366753 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Fri, 20 Sep 2019 23:30:08 +0200 Subject: [PATCH] RTL language support --- README.md | 1 + package.json | 2 +- src/js/app.js | 11 ++++- src/js/home.js | 4 +- src/js/post.js | 5 ++- src/sass/components/_footer.scss | 6 +++ .../components/articles/_article-card.scss | 7 ++++ .../articles/_featured-article.scss | 31 ++++++++++++++ src/sass/components/articles/_share.scss | 23 ++++++++++ src/sass/components/author/_author.scss | 16 +++++++ src/sass/components/author/_links.scss | 7 ++++ src/sass/components/header/_logo.scss | 1 + src/sass/components/header/_menu.scss | 10 +++++ src/sass/components/header/_nav.scss | 15 +++++++ .../components/header/_recent-article.scss | 8 ++++ .../components/header/_submenu-title.scss | 6 +++ src/sass/components/hero/_hero.scss | 6 +++ src/sass/components/hero/_social.scss | 6 +++ .../subscribe/_subscribe-section.scss | 10 +++++ src/sass/components/ui/_back.scss | 14 +++++++ src/sass/components/ui/_icon-button.scss | 42 ++++++++++++++++++- src/sass/layouts/_post-content.scss | 39 +++++++++++++++++ 22 files changed, 264 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index eebfd1e..b4b9f8b 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,7 @@ To get the latest version please head over the [releases page](https://github.co * Slider for featured posts * Support for normal, wide and full images in posts * Reading progress indicator +* RTL language support ## Localization diff --git a/package.json b/package.json index 35304fa..1c96317 100644 --- a/package.json +++ b/package.json @@ -54,5 +54,5 @@ "desktop": "assets/screenshot-desktop.jpg", "mobile": "assets/screenshot-mobile.jpg" }, - "version": "0.3.1" + "version": "0.4.0" } diff --git a/src/js/app.js b/src/js/app.js index cf14586..1464e47 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -6,6 +6,12 @@ import GhostContentAPI from '@tryghost/content-api' import Fuse from 'fuse.js' $(document).ready(() => { + const isRTL = $('html').attr('lang') === 'ar' + + if (isRTL) { + $('html').attr('dir', 'rtl').addClass('rtl') + } + const $body = $('body') const $header = $('.js-header') const $openMenu = $('.js-open-menu') @@ -98,7 +104,7 @@ $(document).ready(() => { function getAllPosts(host, key) { const api = new GhostContentAPI({ - host, + url: host, key, version: 'v2' }) @@ -226,7 +232,8 @@ $(document).ready(() => { arrows: false, infinite: false, mobileFirst: true, - variableWidth: true + variableWidth: true, + rtl: isRTL }) } diff --git a/src/js/home.js b/src/js/home.js index 94695ce..4d48259 100644 --- a/src/js/home.js +++ b/src/js/home.js @@ -2,6 +2,7 @@ import $ from 'jquery' import slick from 'slick-carousel' $(document).ready(() => { + const isRTL = $('html').attr('lang') === 'ar' const $featuredArticles = $('.js-featured-articles') if ($featuredArticles.length > 0) { @@ -10,7 +11,8 @@ $(document).ready(() => { infinite: true, prevArrow: '', nextArrow: '', - mobileFirst: true + mobileFirst: true, + rtl: isRTL }) setTimeout(() => { diff --git a/src/js/post.js b/src/js/post.js index 9ef9cf1..8924660 100644 --- a/src/js/post.js +++ b/src/js/post.js @@ -102,6 +102,8 @@ function prepareProgressCircle() { } $(document).ready(() => { + const isRTL = $('html').attr('lang') === 'ar' + $aosWrapper = $('.js-aos-wrapper') const $scrollButton = $('.js-scrolltop') const $loadComments = $('.js-load-comments') @@ -150,7 +152,8 @@ $(document).ready(() => { slidesToShow: 3 } } - ] + ], + rtl: isRTL }) } diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss index 226cb8d..3142156 100644 --- a/src/sass/components/_footer.scss +++ b/src/sass/components/_footer.scss @@ -59,3 +59,9 @@ } } } + +.rtl { + .m-footer-social { + direction: ltr; + } +} diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss index b5c9d02..b551453 100644 --- a/src/sass/components/articles/_article-card.scss +++ b/src/sass/components/articles/_article-card.scss @@ -116,6 +116,7 @@ .m-article-card__name { position: absolute; left: $mobile-space; + right: $mobile-space; bottom: $mobile-space; color: $white; letter-spacing: 0.4px; @@ -316,3 +317,9 @@ } } } + +.rtl { + .m-article-card__social { + direction: ltr; + } +} diff --git a/src/sass/components/articles/_featured-article.scss b/src/sass/components/articles/_featured-article.scss index e082205..82db997 100644 --- a/src/sass/components/articles/_featured-article.scss +++ b/src/sass/components/articles/_featured-article.scss @@ -48,6 +48,18 @@ } } +.rtl { + .m-featured-article__meta { + left: auto; + right: $mobile-space; + + @include respond-to('medium') { + left: auto; + right: 40px; + } + } +} + .m-featured-article__author { display: block; width: 35px; @@ -121,6 +133,25 @@ } } +.rtl { + .m-featured-article__ribbon { + right: auto; + left: $mobile-space; + + @include respond-to('medium') { + right: auto; + left: 40px; + } + + span:first-of-type { + @include respond-to('medium') { + margin-right: 0; + margin-left: 4px; + } + } + } +} + .m-featured-article__content { display: flex; flex-direction: column; diff --git a/src/sass/components/articles/_share.scss b/src/sass/components/articles/_share.scss index a92a988..a4daae1 100644 --- a/src/sass/components/articles/_share.scss +++ b/src/sass/components/articles/_share.scss @@ -45,6 +45,23 @@ } } +.rtl { + .m-share { + @include respond-to('large') { + right: auto; + left: -75px; + } + + @include respond-to('extra-large') { + left: -175px; + } + + @include respond-to('largest') { + left: -200px; + } + } +} + .m-share__content { display: flex; align-items: center; @@ -57,3 +74,9 @@ height: auto; } } + +.rtl { + .m-share__content { + direction: ltr; + } +} diff --git a/src/sass/components/author/_author.scss b/src/sass/components/author/_author.scss index 6bd63b3..3493e45 100644 --- a/src/sass/components/author/_author.scss +++ b/src/sass/components/author/_author.scss @@ -39,6 +39,14 @@ } } +.rtl { + .m-author__picture { + @include respond-to('medium') { + margin: 0 0 0 30px; + } + } +} + .m-author__info { text-align: center; @@ -48,6 +56,14 @@ } } +.rtl { + .m-author__info { + @include respond-to('medium') { + text-align: right; + } + } +} + .m-author__name { color: $dark-blue; letter-spacing: 0.2px; diff --git a/src/sass/components/author/_links.scss b/src/sass/components/author/_links.scss index b76b827..3e0b5f1 100644 --- a/src/sass/components/author/_links.scss +++ b/src/sass/components/author/_links.scss @@ -21,3 +21,10 @@ } } } + +.rtl { + .m-author-links { + direction: ltr; + text-align: right; + } +} diff --git a/src/sass/components/header/_logo.scss b/src/sass/components/header/_logo.scss index d1143eb..6757605 100644 --- a/src/sass/components/header/_logo.scss +++ b/src/sass/components/header/_logo.scss @@ -11,5 +11,6 @@ &.in-mobile-topbar { height: 20px; + margin: 0 $mobile-space; } } diff --git a/src/sass/components/header/_menu.scss b/src/sass/components/header/_menu.scss index 674012f..17b433a 100644 --- a/src/sass/components/header/_menu.scss +++ b/src/sass/components/header/_menu.scss @@ -40,3 +40,13 @@ padding: 0; } } + +.rtl { + .m-menu__main { + padding-top: 75px; + + @include respond-to('medium') { + padding: 0; + } + } +} diff --git a/src/sass/components/header/_nav.scss b/src/sass/components/header/_nav.scss index f280278..0eb711f 100644 --- a/src/sass/components/header/_nav.scss +++ b/src/sass/components/header/_nav.scss @@ -52,3 +52,18 @@ } } } + +.rtl { + .m-nav__left ul li { + @include respond-to('medium') { + margin-right: 0; + margin-left: 35px; + + &:last-of-type { + @include respond-to('medium') { + margin-left: 0; + } + } + } + } +} diff --git a/src/sass/components/header/_recent-article.scss b/src/sass/components/header/_recent-article.scss index 1f7b16d..d381edd 100644 --- a/src/sass/components/header/_recent-article.scss +++ b/src/sass/components/header/_recent-article.scss @@ -16,6 +16,14 @@ } } +.rtl { + .m-recent-article { + @include respond-to('medium') { + margin: 0 0 0 60px; + } + } +} + .m-recent-article__picture { height: 130px; margin-bottom: 15px; diff --git a/src/sass/components/header/_submenu-title.scss b/src/sass/components/header/_submenu-title.scss index 8c773a5..9658e71 100644 --- a/src/sass/components/header/_submenu-title.scss +++ b/src/sass/components/header/_submenu-title.scss @@ -13,3 +13,9 @@ } } } + +.rtl { + .m-submenu-title { + direction: rtl; + } +} diff --git a/src/sass/components/hero/_hero.scss b/src/sass/components/hero/_hero.scss index fd0b88e..48993fb 100644 --- a/src/sass/components/hero/_hero.scss +++ b/src/sass/components/hero/_hero.scss @@ -70,3 +70,9 @@ justify-content: center; } } + +.rtl { + .m-hero__meta { + direction: ltr; + } +} diff --git a/src/sass/components/hero/_social.scss b/src/sass/components/hero/_social.scss index 8cf7c4a..f50faeb 100644 --- a/src/sass/components/hero/_social.scss +++ b/src/sass/components/hero/_social.scss @@ -27,3 +27,9 @@ } } } + +.rtl { + .m-hero-social { + direction: ltr; + } +} diff --git a/src/sass/components/subscribe/_subscribe-section.scss b/src/sass/components/subscribe/_subscribe-section.scss index eef7317..0c2d4ee 100644 --- a/src/sass/components/subscribe/_subscribe-section.scss +++ b/src/sass/components/subscribe/_subscribe-section.scss @@ -27,6 +27,16 @@ } } +.rtl { + .m-subscribe-section__text { + @include respond-to('medium') { + text-align: right; + padding-right: 0; + padding-left: 75px; + } + } +} + .m-subscribe-section__title { color: $titles; letter-spacing: 0.3px; diff --git a/src/sass/components/ui/_back.scss b/src/sass/components/ui/_back.scss index c32a11c..5990911 100644 --- a/src/sass/components/ui/_back.scss +++ b/src/sass/components/ui/_back.scss @@ -23,6 +23,14 @@ } } +.rtl { + .m-back { + span:first-of-type { + order: 2; + } + } +} + .m-back__icon { font-size: 0.750rem; margin-right: 10px; @@ -31,3 +39,9 @@ font-size: 0.875rem; } } + +.rtl { + .m-back__icon { + order: 1; + } +} diff --git a/src/sass/components/ui/_icon-button.scss b/src/sass/components/ui/_icon-button.scss index 4701fa4..f691236 100644 --- a/src/sass/components/ui/_icon-button.scss +++ b/src/sass/components/ui/_icon-button.scss @@ -75,7 +75,7 @@ @include respond-to('medium') { display: flex; - width: 25px; + width: 26px; height: 25px; } } @@ -215,3 +215,43 @@ } } } + +.rtl { + .m-icon-button { + &.in-featured-articles { + &.slick-prev { + right: auto; + left: 16px; + + @include respond-to('medium') { + right: auto; + left: 36px; + } + } + + &.slick-next { + right: auto; + left: 52px; + + @include respond-to('medium') { + right: auto; + left: 72px; + } + } + } + + &.in-recommended-articles { + &.slick-prev { + left: auto; + right: 0; + @include transform(rotate(180deg)); + } + + &.slick-next { + right: auto; + left : 0; + @include transform(rotate(180deg)); + } + } + } +} diff --git a/src/sass/layouts/_post-content.scss b/src/sass/layouts/_post-content.scss index bf3a90f..f310902 100644 --- a/src/sass/layouts/_post-content.scss +++ b/src/sass/layouts/_post-content.scss @@ -521,3 +521,42 @@ } } } + +.rtl { + .l-post-content { + ul, ol { + padding-left: 0; + padding-right: 20px; + + @include respond-to('medium') { + padding-left: 0; + padding-right: 40px; + } + } + + code { + direction: ltr; + } + + blockquote { + &:before { + left: auto; + right: 0; + } + } + + .kg-bookmark-icon { + margin-right: 0 !important; + margin-left: 8px !important; + } + + figure.kg-width-full { + @include respond-to('medium') { + margin-left: 0; + margin-right: 50%; + + @include transform(translateX(50%)); + } + } + } +}