From 6f35177349c84016cbca9d5b626be433c4f949c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Fri, 18 Feb 2022 00:09:06 +0100 Subject: [PATCH] theme: rework header UX #151 --- layouts/index.html | 5 -- layouts/partials/footer.html | 11 --- layouts/partials/header.html | 31 +++++++-- static/css/print.css | 1 + static/css/theme.css | 129 ++++++++++++----------------------- static/js/relearn.js | 8 +-- 6 files changed, 73 insertions(+), 112 deletions(-) diff --git a/layouts/index.html b/layouts/index.html index be3bd94616..1bfd71053a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,9 +1,4 @@ {{- partial "header.html" . }} - - - - - {{if .Site.Home.Content }} {{.Site.Home.Content}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index f3769d2bf2..aa9e4c6110 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -4,17 +4,6 @@ {{- partial "custom-comments.html" . }} -
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 94d324b37e..8054d2d335 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -29,15 +29,35 @@
- {{- if not .IsHome }}
- {{- if and (or .IsPage .IsSection) .Site.Params.editURL }} + {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }} + {{- if $showPrevNext }} +
+ {{- if ($.Scratch.Get "relearnNextPage") }} + {{- with ($.Scratch.Get "relearnNextPage") }} + + {{- end }} + {{- else }} + + {{- end }} +
+
+ {{- if ($.Scratch.Get "relearnPrevPage") }} + {{- with ($.Scratch.Get "relearnPrevPage") }} + + {{- end}} + {{- else }} + + {{- end}} +
+ {{- end }} + {{- if .Site.Params.editURL }} {{- $File := .File }} {{- $Site := .Site }} {{- with $File.Path }} {{- end }} @@ -49,11 +69,11 @@
- {{- end }}
{{- partial "tags.html" . }}
diff --git a/static/css/print.css b/static/css/print.css index fe370892c9..2af90055fd 100644 --- a/static/css/print.css +++ b/static/css/print.css @@ -36,6 +36,7 @@ pre { padding-left: 0; /* for print, we want to align with the footer to ease the layout */ color: #777; } +.navigation, #top-github-link { /* we don't need this while printing */ display: none; diff --git a/static/css/theme.css b/static/css/theme.css index 0c0395d0e5..26f1fe1bfa 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -353,17 +353,22 @@ th { } #body .padding { - padding: 3rem 6rem; + padding: 0; +} +#body-inner { + padding: 0 3rem 4rem 3rem; } @media only all and (max-width: 59.938em) { #body .padding { position: static; - padding: 15px 3rem; + } + #body-inner { + padding: 0 2rem 15px 2rem; } } @media only all and (max-width: 47.938em) { - #body .padding { - padding: 5px 1rem; + #body-inner { + padding: 0 1rem 5px 1rem; } } @@ -372,60 +377,6 @@ th { margin-top: -1rem; } -@media only all and (max-width: 59.938em) { - #body #navigation { - display: table; - margin-right: 0 !important; - position: static; - width: 100%; - } -} - -#body .nav { - bottom: 0; - cursor: pointer; - display: table; - font-size: 50px; - height: 100%; - position: fixed; - text-align: center; - top: 0; - width: 4rem; -} -#body .nav > i { - display: table-cell; - text-align: center; - vertical-align: middle; -} -@media only all and (max-width: 59.938em) { - #body .nav { - display: table-cell; - height: 100px; - line-height: 100px; - padding-top: 0; - position: static; - text-align: center; - top: auto; - width: 50%; - } - #body .nav > i { - display: inline-block; - } -} - -#body .nav:hover { - background-color: rgba( 134, 134, 134, .066 ); -} - -#body .nav.nav-pref { - left: 0; -} - -#body .nav.nav-next { - margin-right: 0px; - right: 0; -} - /* we limit width if we have large screens */ @media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */ #body #body-inner { @@ -935,27 +886,40 @@ td { #top-bar > div { background-color: rgba( 134, 134, 134, .066 ); - padding: 0 1rem; height: 100%; } -#top-bar.is-sticky { - box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); -} - +.navigation, #top-github-link { display: block; float: right; z-index: 1; } -#top-github-link, -#body #breadcrumbs { +.nav, +.github-link { + border-left: thin solid rgba( 134, 134, 134, .333 ); + padding-left: 1rem; + padding-right: 1rem; +} +span.nav i{ + color: rgba( 134, 134, 134, .333 ); +} + +.navigation, +#top-github-link { position: relative; top: 50%; transform: translateY(-50%); } +#toc-menu, +#sidebar-toggle-span { + border-right: thin solid rgba( 134, 134, 134, .333 ); + padding-left: 1rem; + padding-right: 1rem; +} + #body #breadcrumbs { display: inline-block; float: left; @@ -963,29 +927,33 @@ td { line-height: 1.4; margin-bottom: 0; overflow: hidden; - padding-left: 0; + position: relative; text-overflow: ellipsis; + top: 50%; + transform: translateY(-50%); white-space: nowrap; - width: 70%; + width: calc(100% - 4*3.25rem); } #sidebar-toggle-span { display: none; } - +.progress { + left: 1rem; + top: 1rem; +} @media only all and (max-width: 47.938em) { #sidebar-toggle-span { display: inline; } -} - -#body #breadcrumbs span { - padding: 0 0.1rem; + .progress { + left: 4.25rem; + } } #body #breadcrumbs .links { display: inline; - padding: 0 0.1rem; + padding: 0 .75rem; } #body #breadcrumbs .links * { @@ -1042,7 +1010,7 @@ a[aria-disabled="true"] { position: absolute; right: 0; top: 0; - z-index: 10; + z-index: 1000; } } @@ -1224,6 +1192,7 @@ option { width: 100%; } +#body .navigation a.highlight:after, #body #sidebar-toggle-span a.highlight:after, #body #top-github-link a.highlight:after { background-color: transparent; @@ -1262,18 +1231,6 @@ option { font-weight: 500; } -#toc-menu { - border-right: thin solid rgba( 134, 134, 134, .333 ); - margin-right: 0.5rem !important; - padding-right: 1rem !important; -} - -#sidebar-toggle-span { - border-right: thin solid rgba( 134, 134, 134, .333 ); - margin-right: 1rem !important; - padding-right: 0.5rem !important; -} - .btn { background-image: none !important; border: 1px solid transparent !important; diff --git a/static/js/relearn.js b/static/js/relearn.js index 8fd0f2903d..92f7b2c266 100644 --- a/static/js/relearn.js +++ b/static/js/relearn.js @@ -375,10 +375,10 @@ jQuery(function() { // allow keyboard control for prev/next links jQuery(function() { - jQuery('.nav-prev').click(function(){ + jQuery('a.nav-prev').click(function(){ location.href = jQuery(this).attr('href'); }); - jQuery('.nav-next').click(function() { + jQuery('a.nav-next').click(function() { location.href = jQuery(this).attr('href'); }); }); @@ -393,12 +393,12 @@ jQuery(function() { jQuery(document).keydown(function(e) { // prev links - left arrow key if(e.which == '37') { - jQuery('.nav.nav-prev').click(); + jQuery('a.nav-prev').click(); } // next links - right arrow key if(e.which == '39') { - jQuery('.nav.nav-next').click(); + jQuery('a.nav-next').click(); } });