diff options
author | Alexander Bilz <mail@alexbilz.com> | 2021-11-03 20:20:31 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-03 20:20:31 +0300 |
commit | 045dabb11992a0d77f404dd931cbb093f4e11b44 (patch) | |
tree | 2299fd7d2b9379098995f0f61a6894abd2608bdd | |
parent | 49de81b2e2c921f752d8b1d261fe4c148a00c51e (diff) |
feat: improved language dropdown menu (#261)v1.4.0
Closes #169
-rw-r--r-- | README.md | 14 | ||||
-rw-r--r-- | assets/css/style.css | 122 | ||||
-rw-r--r-- | assets/css/style.rtl.css | 11 | ||||
-rw-r--r-- | layouts/partials/navbar.html | 46 |
4 files changed, 183 insertions, 10 deletions
@@ -168,6 +168,20 @@ indexDateFormat = "Mon, Jan 2, 2006" listDateFormat = "Jan 2" ``` +### Change the language names in the language dropdown + +The language names displayed on the main menu are controlled by the variables `LanguageName`. You can set these to shortcode, full name or a flag emoji by simply changing the parameter. In the following example English will be displayed as "EN" and Arabic will be displayed as "Arabic". + +```toml +[languages] +[en] +LanguageName = "EN" + + +[ar] +LanguageName = "Arabic" +``` + ### Changing the sidebar/content ratio By default, the content fills up 60% of the screen width on devices with a full HD resolution. If you want to change the ratio, adjust the `contentratio` variable. Let's, for example, set the content ratio to 70%: diff --git a/assets/css/style.css b/assets/css/style.css index 76d0d57..3b7bc4d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -270,6 +270,93 @@ aside { width: var(--sidebar-width); } +/* +Language Switch +*/ + +.sl-nav { + margin: 0; + padding: 0; + list-style: none; + position: relative; + display: inline-block; + padding-right: 20px; +} + +.sl-nav a:hover { + cursor: pointer; +} + +.sl-nav li { + cursor: pointer; + padding-bottom: 10px; +} + +.sl-nav li .dropdown { + display: none; + position: absolute; + top: 29px; + right: -15px; + background: var(--pre-bg-color); + border-color: var(--border-color); + padding-left: 0; + padding-top: 0px; + z-index: 1; + border-radius: 5px; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); +} + +#languagepicker:checked ~ .dropdown { + display: block; +} + +.sl-nav li .dropdown li { + position: relative; + text-align: left; + background: transparent; + padding: 15px 15px; + padding-bottom: 0; + z-index: 2; + color: #3c3c3c; + display: block; +} +.sl-nav li .dropdown li:last-of-type { + padding-bottom: 15px; +} +.sl-nav li .dropdown li span { + padding-left: 5px; + font-size: 1.3rem; +} +.sl-nav li .dropdown li span.active { + color: var(--tag-color); +} + +#languagepicker:checked ~ .triangle { + position: absolute; + top: 15px; + right: -10px; + z-index: 10; + height: 14px; + overflow: hidden; + width: 30px; + background: transparent; +} + +#languagepicker:checked ~ .triangle:after { + content: ''; + display: block; + z-index: 20; + width: 15px; + transform: rotate(45deg) translateY(0px) translatex(10px); + height: 15px; + background: var(--pre-bg-color); + border-radius: 2px 0px 0px 0px; + border-color: var(--border-color); + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); + float: left; + display: block; +} + .sidebar { -webkit-background-size: cover; background-size: cover; @@ -1074,6 +1161,10 @@ a.btn { font-size: 1.3em; } + header .nav__list ul { + padding: inherit; + } + header .nav__list a.current { border-bottom: none; } @@ -1119,6 +1210,37 @@ a.btn { .list-with-title .listing .listing-post a { width: 80%; } + + .triangle { + display: none; + } + + .sl-nav { + padding-right: inherit; + } + + .sl-nav li .dropdown { + right: inherit; + position: relative; + top: inherit; + padding-right: 0px; + background: none; + border-color: inherit; + box-shadow: none; + } + + .sl-nav li .dropdown li { + text-align: center; + padding: initial; + } + + .sl-nav li .dropdown li span { + padding-left: initial; + } + + .sl-nav li label { + font-size: 0.75em; + } } /* Medium zoom */ diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css index 50fbe3f..9ab54b2 100644 --- a/assets/css/style.rtl.css +++ b/assets/css/style.rtl.css @@ -91,6 +91,14 @@ blockquote { text-align: left; } +.sl-nav li .dropdown { + padding-right: 0px; +} + +.triangle { + display: none; +} + @media screen and (min-width: 961px), print { header { position: fixed; @@ -103,6 +111,9 @@ blockquote { header .nav__list li:not(:last-of-type) { padding-right: inherit; } + .triangle { + display: inline-block; + } } @media (min-width: 1921px) { diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 92f87f6..0c465d3 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -35,23 +35,49 @@ </li> {{ end }} - {{ if .Site.IsMultiLingual }} - {{ range $.Site.Home.AllTranslations }} - <li><a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a></li> + </div> + <ul> + {{ if and .IsTranslated .Site.IsMultiLingual }} + <li> + <ul class="sl-nav" aria-label="Language switcher"> + <li> + <input type="checkbox" id="languagepicker" aria-label="switch language" hidden /> + <label for="languagepicker"><a>{{ .Site.Language.LanguageName }}</a></label> + <label for="languagepicker"><i class="fa fa-angle-down" aria-hidden="true"></i></label> + <div class="triangle"></div> + + <ul class="dropdown"> + {{ range $.Translations }} + + <li> + <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}" + ><span + {{ if eq . $.Site.Language }} + class="active" - {{ end }} + {{ end }} + aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}" + >{{ .Language.LanguageName }}</span + ></a + > + </li> + {{ end }} + </ul> + </li> + </ul> + </li> {{ end }} - </div> - <li> {{ if not .Site.Params.disableThemeSwitcher }} - <a class="theme-switch" title="Switch Theme"> - <i class="fas fa-adjust fa-fw" aria-hidden="true"></i> - </a> + <li> + <a class="theme-switch" title="Switch Theme"> + <i class="fas fa-adjust fa-fw" aria-hidden="true"></i> + </a> + </li> {{ end }} - </li> + </ul> </ul> </nav> </div> |