From 46b21e028c0a183ac1a7db40a9cd6479e7eafc22 Mon Sep 17 00:00:00 2001 From: Hugo MARTIN Date: Sat, 3 Oct 2020 05:59:28 +0200 Subject: Translations and i18n (#60) * Managing i18n * Fix absolute path * Config files * Home link manage langage * Fixing footer i18n * Implemented i18n on newsletter * Implemented two languages in example * Removed old section directory * Using yaml in data to organize home summary * Fully working for old versions without i18n * Integrating language menu CSS * Fix language dropdown CSS * Refactor translation codes * Remove duplicate code * Fix URL issues * Move customMenus and other site related config into data section * Fix error during language toggle * Only show the available translation for the posts * Handle navbar brand URL properly * Fix responsiveness Co-authored-by: Hugo MARTIN Co-authored-by: hossainemruz --- static/assets/css/layouts/list.css | 7 ++++ static/assets/css/layouts/main.css | 10 ++++- static/assets/css/layouts/single.css | 3 ++ static/assets/css/navigators/navbar.css | 58 +++++++++++++++++++------- static/assets/css/sections/home.css | 3 +- static/assets/js/main.js | 74 +++++++++++++++++---------------- static/assets/js/popper.min.js | 5 +++ 7 files changed, 107 insertions(+), 53 deletions(-) create mode 100644 static/assets/js/popper.min.js (limited to 'static') diff --git a/static/assets/css/layouts/list.css b/static/assets/css/layouts/list.css index b3fde85..8d09fa0 100644 --- a/static/assets/css/layouts/list.css +++ b/static/assets/css/layouts/list.css @@ -155,6 +155,13 @@ visibility: hidden; } + .navbar-collapse.lang-selector { + display: block !important; + position: absolute; + right: 0; + top: 0.5rem; + } + .content-cards { padding-top: 20px; width: 100%; diff --git a/static/assets/css/layouts/main.css b/static/assets/css/layouts/main.css index d54532b..248df5a 100644 --- a/static/assets/css/layouts/main.css +++ b/static/assets/css/layouts/main.css @@ -137,7 +137,7 @@ img.right { .card .card-head { height: 172px; -o-object-fit: cover; - object-fit: cover; + object-fit: cover; overflow: hidden; } @@ -238,6 +238,14 @@ img.right { /* IPad Pro */ @media (max-width: 1024px) { + .content-section .languageSelector { + position: fixed; + right: 0.5rem; + bottom: 1rem; + z-index: 10000000; + background-color: #f9fafc; + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + } } /* Large devices (desktops, 992px and up) */ diff --git a/static/assets/css/layouts/single.css b/static/assets/css/layouts/single.css index 35ecff1..b728777 100644 --- a/static/assets/css/layouts/single.css +++ b/static/assets/css/layouts/single.css @@ -368,6 +368,9 @@ mark { .navbar-toggler { display: block; } + .navbar-collapse.lang-selector { + display: none; + } .hero-area { height: 300px; diff --git a/static/assets/css/navigators/navbar.css b/static/assets/css/navigators/navbar.css index f8e13f3..d3003b8 100644 --- a/static/assets/css/navigators/navbar.css +++ b/static/assets/css/navigators/navbar.css @@ -116,6 +116,39 @@ margin-left: -10px; } +.top-navbar .dropdown-menu { + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + border: 1px solid #fff; + max-height: 0vh; + overflow: hidden; + display: block; + visibility: hidden; + transition: all 0.3s ease-out; +} + +.top-navbar .dropdown-menu.show { + max-height: 100vh; + visibility: visible; + transition: all 0.3s ease-in; +} + +.top-navbar .dropdown-menu a { + color: #1c2d41; + border-bottom: none; +} + +.top-navbar .dropdown-menu a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + border-bottom: none; + background: rgb(2, 0, 36); + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(34, 136, 168, 0.2) 0% + ); +} + /* ============= Device specific fixes ======= */ /* Large screens such as TV */ @@ -163,11 +196,6 @@ border-bottom: none; } - .final-navbar .navbar-collapse.show { - box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3); - transition: all 0.3s ease-out; - } - .dropdown-divider { border-top: 1px solid #c0ccda; } @@ -177,6 +205,12 @@ width: auto; margin-right: 15px; } + .top-navbar .dropdown-menu { + text-align: center; + margin-bottom: 0.5rem; + margin-right: 1rem; + transition: all 0.3s ease-out; + } } /* Large devices (desktops, 992px and up) */ @@ -201,11 +235,6 @@ border-bottom: none; } - .final-navbar .navbar-collapse.show { - box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3); - transition: all 0.3s ease-out; - } - .dropdown-divider { border-top: 1px solid #c0ccda; } @@ -239,11 +268,6 @@ border-bottom: none; } - .final-navbar .navbar-collapse.show { - box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3); - transition: all 0.3s ease-out; - } - .dropdown-divider { border-top: 1px solid #c0ccda; } @@ -258,6 +282,10 @@ /* Small devices (landscape phones, 576px and up) */ @media only screen and (max-width: 576px) { + .top-navbar .dropdown-menu { + margin-left: -1rem; + margin-right: 0rem; + } } /* iPhoneX, iPhone 6,7,8 */ diff --git a/static/assets/css/sections/home.css b/static/assets/css/sections/home.css index 81965ce..ad8fa2a 100644 --- a/static/assets/css/sections/home.css +++ b/static/assets/css/sections/home.css @@ -14,8 +14,7 @@ background-attachment: fixed; background-position: center; transform: scale(1.1); - -webkit-filter: blur(3px); - filter: blur(3px); + filter: blur(3px); background-size: cover; } diff --git a/static/assets/js/main.js b/static/assets/js/main.js index 745b547..1d468a8 100644 --- a/static/assets/js/main.js +++ b/static/assets/js/main.js @@ -25,44 +25,48 @@ var isMobile = false, isTablet = false, isLaptop = false; function addSmoothScroll() { // ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/ // Select all links with hashes - $('a[href*="#"]').click(function (event) { - // On-page links - if ( - location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') - && - location.hostname == this.hostname - ) { - // Figure out element to scroll to - var target = $(this.hash); - target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); - // Does a scroll target exist? - if (target.length) { - // Only prevent default if animation is actually gonna happen - event.preventDefault(); + $('a[href*="#"]') + // Remove links that don't actually link to anything + .not('[href="#"]') + .not('[href="#0"]') + .click(function (event) { + // On-page links + if ( + location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') + && + location.hostname == this.hostname + ) { + // Figure out element to scroll to + var target = $(this.hash); + target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); + // Does a scroll target exist? + if (target.length) { + // Only prevent default if animation is actually gonna happen + event.preventDefault(); - let offset = 60; - if (isMobile) { - offset = 710; - } else if (isTablet) { - offset = 60; + let offset = 60; + if (isMobile) { + offset = 710; + } else if (isTablet) { + offset = 60; + } + $('html, body').animate({ + scrollTop: target.offset().top - offset + }, 1000, function () { + // Callback after animation + // Must change focus! + var $target = $(target); + $target.focus(); + if ($target.is(":focus")) { // Checking if the target was focused + return false; + } else { + $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable + $target.focus(); // Set focus again + }; + }); } - $('html, body').animate({ - scrollTop: target.offset().top - offset - }, 1000, function () { - // Callback after animation - // Must change focus! - var $target = $(target); - $target.focus(); - if ($target.is(":focus")) { // Checking if the target was focused - return false; - } else { - $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable - $target.focus(); // Set focus again - }; - }); } - } - }); + }); } addSmoothScroll(); diff --git a/static/assets/js/popper.min.js b/static/assets/js/popper.min.js new file mode 100644 index 0000000..79ccbf5 --- /dev/null +++ b/static/assets/js/popper.min.js @@ -0,0 +1,5 @@ +/* + Copyright (C) Federico Zivolo 2018 + Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT). + */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll|overlay)/.test(r+s+p)?e:n(o(e))}function r(e){return 11===e?re:10===e?pe:re||pe}function p(e){if(!e)return document.documentElement;for(var o=r(10)?document.body:null,n=e.offsetParent;n===o&&e.nextElementSibling;)n=(e=e.nextElementSibling).offsetParent;var i=n&&n.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(n.nodeName)&&'static'===t(n,'position')?p(n):n:e?e.ownerDocument.documentElement:document.documentElement}function s(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||p(e.firstElementChild)===e)}function d(e){return null===e.parentNode?e:d(e.parentNode)}function a(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,n=o?e:t,i=o?t:e,r=document.createRange();r.setStart(n,0),r.setEnd(i,0);var l=r.commonAncestorContainer;if(e!==l&&t!==l||n.contains(i))return s(l)?l:p(l);var f=d(e);return f.host?a(f.host,t):a(e,d(t).host)}function l(e){var t=1=o.clientWidth&&n>=o.clientHeight}),l=0a[e]&&!t.escapeWithReference&&(n=J(f[o],a[e]-('right'===e?f.width:f.height))),ae({},o,n)}};return l.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';f=le({},f,m[t](e))}),e.offsets.popper=f,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,n=t.reference,i=e.placement.split('-')[0],r=Z,p=-1!==['top','bottom'].indexOf(i),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]r(n[s])&&(e.offsets.popper[d]=r(n[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){var n;if(!q(e.instance.modifiers,'arrow','keepTogether'))return e;var i=o.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var r=e.placement.split('-')[0],p=e.offsets,s=p.popper,d=p.reference,a=-1!==['left','right'].indexOf(r),l=a?'height':'width',f=a?'Top':'Left',m=f.toLowerCase(),h=a?'left':'top',c=a?'bottom':'right',u=S(i)[l];d[c]-us[c]&&(e.offsets.popper[m]+=d[m]+u-s[c]),e.offsets.popper=g(e.offsets.popper);var b=d[m]+d[l]/2-u/2,y=t(e.instance.popper),w=parseFloat(y['margin'+f],10),E=parseFloat(y['border'+f+'Width'],10),v=b-e.offsets.popper[m]-w-E;return v=$(J(s[l]-u,v),0),e.arrowElement=i,e.offsets.arrow=(n={},ae(n,m,Q(v)),ae(n,h,''),n),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(W(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=v(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement,e.positionFixed),n=e.placement.split('-')[0],i=T(n),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case he.FLIP:p=[n,i];break;case he.CLOCKWISE:p=z(n);break;case he.COUNTERCLOCKWISE:p=z(n,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(n!==s||p.length===d+1)return e;n=e.placement.split('-')[0],i=T(n);var a=e.offsets.popper,l=e.offsets.reference,f=Z,m='left'===n&&f(a.right)>f(l.left)||'right'===n&&f(a.left)f(l.top)||'bottom'===n&&f(a.top)f(o.right),g=f(a.top)f(o.bottom),b='left'===n&&h||'right'===n&&c||'top'===n&&g||'bottom'===n&&u,y=-1!==['top','bottom'].indexOf(n),w=!!t.flipVariations&&(y&&'start'===r&&h||y&&'end'===r&&c||!y&&'start'===r&&g||!y&&'end'===r&&u);(m||b||w)&&(e.flipped=!0,(m||b)&&(n=p[d+1]),w&&(r=G(r)),e.placement=n+(r?'-'+r:''),e.offsets.popper=le({},e.offsets.popper,C(e.instance.popper,e.offsets.reference,e.placement)),e=P(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],n=e.offsets,i=n.popper,r=n.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return i[p?'left':'top']=r[o]-(s?i[p?'width':'height']:0),e.placement=T(t),e.offsets.popper=g(i),e}},hide:{order:800,enabled:!0,fn:function(e){if(!q(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=D(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottomo.right||t.top>o.bottom||t.right