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 <hugo.martin.69@gmail.com>
Co-authored-by: hossainemruz <emruz@appscode.com>

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%;

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) */

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;

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 */

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;
 }
 

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();