Implemented improved translation selection. Closes aerohub#10

Lednerb · Jul 3, 2020 · 45d903e · 45d903e
1 parent c2607f7
commit 45d903e
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 33 deletions.
diff --git a/assets/less/lednerb.less b/assets/less/lednerb.less
@@ -21,12 +21,6 @@
             color: rgba(255, 255, 255, 0.75);
         }
 
-        .translations {
-            .currentLanguage {
-                border-bottom: 1px solid white;
-            }
-        }
-
         .education-container{
             .meta, .time {
                 color: rgba(255, 255, 255, 0.75);
@@ -81,3 +75,28 @@
         background-color: @theme-color;
     }
 }
+
+.translations-container {
+    position: absolute;
+    color: @theme-color;
+    right: 260px;
+    top: 0px;
+    transition: all 0.3s;
+
+    .sidebarLeft & {
+        right: 5px;
+    }
+
+    .currentLanguage {
+        font-weight: bold;
+    }
+
+    .btn {
+        padding: 6px 4px;
+        font-size: 12px;
+    }
+
+    .btn:hover {
+        color: darken(@theme-color, 15%);
+    }
+}
diff --git a/layouts/index.html b/layouts/index.html
@@ -11,6 +11,10 @@
 
         <div class="main-wrapper">
 
+        {{ if .IsTranslated }}
+        {{ partial "translate.html" . }}
+        {{ end }}
+
         {{ if .Site.Params.summary.enable }}
         {{ partial "summary.html" . }}
         {{ end }}

diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -2,10 +2,6 @@
 
 		{{ partial "profile.html" . }}
 
-		{{ if .IsTranslated }}
-		{{ partial "translate.html" . }}
-		{{ end }}
-
 		{{ if .Site.Params.contact.enable }}
 		{{ partial "contact.html" . }}
 		{{ end }}

diff --git a/layouts/partials/translate.html b/layouts/partials/translate.html
@@ -1,5 +1,12 @@
-            <div class="profile-container">
-                {{ range .Translations }}
-                <a class="btn btn-translate" href="{{ .Permalink }}">{{upper .Lang }}</a>
-                {{ end }}
-            </div><!--//profile-container-->
+<div class="translations-container">
+    <div class="translations">
+    {{- $.Scratch.Set "language" .Language -}}
+    {{ range $.Site.Home.AllTranslations }}
+        {{ if eq ($.Scratch.Get "language") .Language }}
+            <a href="{{ .Permalink }}" class="btn btn-translate currentLanguage">{{ upper .Language }}</a>
+        {{ else }}
+            <a href="{{ .Permalink }}" class="btn btn-translate">{{ upper .Language }}</a>
+        {{ end }}
+    {{ end }}
+    </div>
+</div>
diff --git a/static/assets/css/styles-1.css b/static/assets/css/styles-1.css
@@ -460,9 +460,6 @@ p {
 .wrapper .sidebar-wrapper .tagline {
   color: rgba(255, 255, 255, 0.75);
 }
-.wrapper .sidebar-wrapper .translations .currentLanguage {
-  border-bottom: 1px solid white;
-}
 .wrapper .sidebar-wrapper .education-container .meta,
 .wrapper .sidebar-wrapper .education-container .time {
   color: rgba(255, 255, 255, 0.75);
@@ -500,3 +497,23 @@ p {
 .tags .label-info {
   background-color: #42A8C0;
 }
+.translations-container {
+  position: absolute;
+  color: #42A8C0;
+  right: 260px;
+  top: 0px;
+  transition: all 0.3s;
+}
+.sidebarLeft .translations-container {
+  right: 5px;
+}
+.translations-container .currentLanguage {
+  font-weight: bold;
+}
+.translations-container .btn {
+  padding: 6px 4px;
+  font-size: 12px;
+}
+.translations-container .btn:hover {
+  color: #2d7788;
+}
diff --git a/static/assets/css/styles-2.css b/static/assets/css/styles-2.css
@@ -460,9 +460,6 @@ p {
 .wrapper .sidebar-wrapper .tagline {
   color: rgba(255, 255, 255, 0.75);
 }
-.wrapper .sidebar-wrapper .translations .currentLanguage {
-  border-bottom: 1px solid white;
-}
 .wrapper .sidebar-wrapper .education-container .meta,
 .wrapper .sidebar-wrapper .education-container .time {
   color: rgba(255, 255, 255, 0.75);
@@ -500,3 +497,23 @@ p {
 .tags .label-info {
   background-color: #4CAC9D;
 }
+.translations-container {
+  position: absolute;
+  color: #4CAC9D;
+  right: 260px;
+  top: 0px;
+  transition: all 0.3s;
+}
+.sidebarLeft .translations-container {
+  right: 5px;
+}
+.translations-container .currentLanguage {
+  font-weight: bold;
+}
+.translations-container .btn {
+  padding: 6px 4px;
+  font-size: 12px;
+}
+.translations-container .btn:hover {
+  color: #35776d;
+}
diff --git a/static/assets/css/styles-3.css b/static/assets/css/styles-3.css
@@ -460,9 +460,6 @@ p {
 .wrapper .sidebar-wrapper .tagline {
   color: rgba(255, 255, 255, 0.75);
 }
-.wrapper .sidebar-wrapper .translations .currentLanguage {
-  border-bottom: 1px solid white;
-}
 .wrapper .sidebar-wrapper .education-container .meta,
 .wrapper .sidebar-wrapper .education-container .time {
   color: rgba(255, 255, 255, 0.75);
@@ -500,3 +497,23 @@ p {
 .tags .label-info {
   background-color: #5BB66F;
 }
+.translations-container {
+  position: absolute;
+  color: #5BB66F;
+  right: 260px;
+  top: 0px;
+  transition: all 0.3s;
+}
+.sidebarLeft .translations-container {
+  right: 5px;
+}
+.translations-container .currentLanguage {
+  font-weight: bold;
+}
+.translations-container .btn {
+  padding: 6px 4px;
+  font-size: 12px;
+}
+.translations-container .btn:hover {
+  color: #3d884d;
+}
diff --git a/static/assets/css/styles-4.css b/static/assets/css/styles-4.css
@@ -460,9 +460,6 @@ p {
 .wrapper .sidebar-wrapper .tagline {
   color: rgba(255, 255, 255, 0.75);
 }
-.wrapper .sidebar-wrapper .translations .currentLanguage {
-  border-bottom: 1px solid white;
-}
 .wrapper .sidebar-wrapper .education-container .meta,
 .wrapper .sidebar-wrapper .education-container .time {
   color: rgba(255, 255, 255, 0.75);
@@ -500,3 +497,23 @@ p {
 .tags .label-info {
   background-color: #A15277;
 }
+.translations-container {
+  position: absolute;
+  color: #A15277;
+  right: 260px;
+  top: 0px;
+  transition: all 0.3s;
+}
+.sidebarLeft .translations-container {
+  right: 5px;
+}
+.translations-container .currentLanguage {
+  font-weight: bold;
+}
+.translations-container .btn {
+  padding: 6px 4px;
+  font-size: 12px;
+}
+.translations-container .btn:hover {
+  color: #6e3852;
+}
diff --git a/static/assets/css/styles-5.css b/static/assets/css/styles-5.css
@@ -460,9 +460,6 @@ p {
 .wrapper .sidebar-wrapper .tagline {
   color: rgba(255, 255, 255, 0.75);
 }
-.wrapper .sidebar-wrapper .translations .currentLanguage {
-  border-bottom: 1px solid white;
-}
 .wrapper .sidebar-wrapper .education-container .meta,
 .wrapper .sidebar-wrapper .education-container .time {
   color: rgba(255, 255, 255, 0.75);
@@ -500,3 +497,23 @@ p {
 .tags .label-info {
   background-color: #FDA246;
 }
+.translations-container {
+  position: absolute;
+  color: #FDA246;
+  right: 260px;
+  top: 0px;
+  transition: all 0.3s;
+}
+.sidebarLeft .translations-container {
+  right: 5px;
+}
+.translations-container .currentLanguage {
+  font-weight: bold;
+}
+.translations-container .btn {
+  padding: 6px 4px;
+  font-size: 12px;
+}
+.translations-container .btn:hover {
+  color: #f47c03;
+}
diff --git a/static/assets/css/styles-6.css b/static/assets/css/styles-6.css
@@ -460,9 +460,6 @@ p {
 .wrapper .sidebar-wrapper .tagline {
   color: rgba(255, 255, 255, 0.75);
 }
-.wrapper .sidebar-wrapper .translations .currentLanguage {
-  border-bottom: 1px solid white;
-}
 .wrapper .sidebar-wrapper .education-container .meta,
 .wrapper .sidebar-wrapper .education-container .time {
   color: rgba(255, 255, 255, 0.75);
@@ -500,3 +497,23 @@ p {
 .tags .label-info {
   background-color: #4B6A78;
 }
+.translations-container {
+  position: absolute;
+  color: #4B6A78;
+  right: 260px;
+  top: 0px;
+  transition: all 0.3s;
+}
+.sidebarLeft .translations-container {
+  right: 5px;
+}
+.translations-container .currentLanguage {
+  font-weight: bold;
+}
+.translations-container .btn {
+  padding: 6px 4px;
+  font-size: 12px;
+}
+.translations-container .btn:hover {
+  color: #2e4049;
+}