From 045dabb11992a0d77f404dd931cbb093f4e11b44 Mon Sep 17 00:00:00 2001 From: Alexander Bilz Date: Wed, 3 Nov 2021 18:20:31 +0100 Subject: [PATCH] feat: improved language dropdown menu (#261) Closes #169 --- README.md | 14 ++++ assets/css/style.css | 122 +++++++++++++++++++++++++++++++++++ assets/css/style.rtl.css | 11 ++++ layouts/partials/navbar.html | 46 ++++++++++--- 4 files changed, 183 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 34499c38..72530700 100644 --- a/README.md +++ b/README.md @@ -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 76d0d571..3b7bc4db 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 50fbe3f6..9ab54b24 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 92f87f6e..0c465d38 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -35,23 +35,49 @@ {{ end }} - {{ if .Site.IsMultiLingual }} - {{ range $.Site.Home.AllTranslations }} -
  • {{ .Language.LanguageName }}
    • + +