Render language dropdown in theme colors; move to partial

Uses the site parameter "crowdin" (URL) to link to the translation effort.
scientific-python · Nov 10, 2021 · bf73c7f · bf73c7f
1 parent 0d94659
commit bf73c7f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 33 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -108,6 +108,18 @@ em {
   font-weight: bold;
 }
 
+.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown {
+  border-top-color: var(--colorPrimaryDark);
+}
+
+.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link {
+  color: var(--colorPrimaryDark);
+}
+
+.navbar.is-fresh .navbar-item.has-dropdown:hover .navbar-link:after {
+  border-color: var(--colorPrimaryDark);
+}
+
 #feature-card {
     height: 475px;
 }

diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html
@@ -83,23 +83,7 @@
         {{- end }}
 
         {{- if .IsTranslated }}
-            <div class="navbar-item has-dropdown is-hoverable">
-                <a class="navbar-link">{{ .Language.LanguageName }}</a>
-              <div class="navbar-dropdown">
-              {{- range .Translations }}
-
-              <a href="{{ .RelPermalink }}" id="navbar-item" class="navbar-item">
-                {{ .Language.LanguageName }}
-              </a>
-
-              {{- end }}
-
-              <a href="https://crowdin.com/project/numpyorg"
-              id="navbar-item" class="navbar-item" target="_blank">
-                Help us to translate
-              </a>
-              </div>
-            </div>
+        {{ partial "translation.html" . }}
         {{- end }}
       </div>
     </div>

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -83,22 +83,7 @@
         {{- end }}
 
         {{- if .IsTranslated }}
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a aria-label="Select language" class="navbar-link">{{ .Language.LanguageName }}</a>
-          <div class="navbar-dropdown">
-            {{- range .Translations }}
-
-            <a href="{{ .RelPermalink }}" id="navbar-item" class="navbar-item">
-              {{ .Language.LanguageName }}
-            </a>
-
-            {{- end }}
-            <a href="https://crowdin.com/project/numpyorg"
-               id="navbar-item" class="navbar-item" target="_blank">
-              Help us to translate
-            </a>
-          </div>
-        </div>
+        {{ partial "translation.html" . }}
         {{- end }}
       </div>
     </div>

diff --git a/layouts/partials/translation.html b/layouts/partials/translation.html
@@ -0,0 +1,20 @@
+{{ $crowdin := .Site.Params.crowdin }}
+
+<div class="navbar-item has-dropdown is-hoverable">
+ <a aria-label="Select language" class="navbar-link">{{ default .Language .Language.LanguageName }}</a>
+ <div class="navbar-dropdown">
+   {{- range .Translations }}
+
+   <a href="{{ .RelPermalink }}" id="navbar-item" class="navbar-item">
+     {{ default .Language .Language.LanguageName }}
+   </a>
+
+   {{- end }}
+   {{ if $crowdin }}
+   <a href="{{ $crowdin }}"
+      id="navbar-item" class="navbar-item" target="_blank">
+     Help us translate
+   </a>
+   {{ end }}
+ </div>
+</div>