topbar: modularize left sided buttons #639

This commit is contained in:
Sören Weber 2023-09-12 23:09:14 +02:00
parent 2c3c9d1013
commit 626841a16c
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
7 changed files with 178 additions and 166 deletions

View file

@ -69,88 +69,100 @@
<div id="body" class="default-animation"> <div id="body" class="default-animation">
<div id="sidebar-overlay"></div> <div id="sidebar-overlay"></div>
<div id="toc-overlay"></div> <div id="toc-overlay"></div>
<nav id="topbar" class="highlightable"> <nav id="topbar">
<div> <div>
{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }} <span class="topbar-right">
{{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }} {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
{{- $startarrow := "🡐" }} {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
{{- $endarrow := "🡒" }} {{- $startarrow := "🡐" }}
{{- if eq (T "Reading-direction" | default "ltr") "rtl" }} {{- $endarrow := "🡒" }}
{{- $startarrow = "🡒" }} {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
{{- $endarrow = "🡐" }} {{- $startarrow = "🡒" }}
{{- end }} {{- $endarrow = "🡐" }}
{{- $ispublished := true }} {{- end }}
{{- with .Parent }} {{- $ispublished := true }}
{{- $ispublished = gt (int (len .Permalink)) 0 }} {{- with .Parent }}
{{- end }} {{- $ispublished = gt (int (len .Permalink)) 0 }}
{{- $next := "" }} {{- end }}
{{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }} {{- $next := "" }}
{{- else }} {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
{{- $next = $.Scratch.Get "relearnNextPage" }} {{- else }}
{{- end }} {{- $next = $.Scratch.Get "relearnNextPage" }}
{{- partial "topbar-button.html" (dict {{- end }}
"page" $page {{- partial "topbar-button.html" (dict
"class" "topbar-next" "page" $page
"href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next)) "class" "topbar-next"
"icon" "chevron-right" "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next))
"title" (printf "%s (%s)" ($next | default $page).Title ($endarrow | safeHTML)) "icon" "chevron-right"
)}} "title" (printf "%s (%s)" ($next | default $page).Title ($endarrow | safeHTML))
{{- $prev := "" }} )}}
{{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }} {{- $prev := "" }}
{{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }} {{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
{{- $prev = .Site.Home }} {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
{{- else }} {{- $prev = .Site.Home }}
{{- $prev = $.Scratch.Get "relearnPrevPage" }} {{- else }}
{{- end}} {{- $prev = $.Scratch.Get "relearnPrevPage" }}
{{- partial "topbar-button.html" (dict {{- end}}
"page" $page {{- partial "topbar-button.html" (dict
"class" "topbar-prev" "page" $page
"href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev)) "class" "topbar-prev"
"icon" "chevron-left" "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev))
"title" (printf "%s (%s)" ($prev | default $page).Title ($startarrow | safeHTML)) "icon" "chevron-left"
)}} "title" (printf "%s (%s)" ($prev | default $page).Title ($startarrow | safeHTML))
{{- end }} )}}
{{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }} {{- end }}
{{- partial "topbar-button.html" (dict {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
"page" $page {{- partial "topbar-button.html" (dict
"class" "topbar-print" "page" $page
"href" .RelPermalink "class" "topbar-print"
"icon" "print" "href" .RelPermalink
"title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter")) "icon" "print"
)}} "title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
{{- end -}} )}}
{{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }} {{- end -}}
{{- partial "topbar-button.html" (dict {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
"page" $page {{- partial "topbar-button.html" (dict
"class" "topbar-edit" "page" $page
"href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName) "class" "topbar-edit"
"icon" "pen" "href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName)
"title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page")) "icon" "pen"
)}} "title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
{{- end }} )}}
{{- $defaultDisableToc := .Site.Params.disableToc | default false }} {{- end }}
{{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }} </span>
{{- $toc_content := partial "toc.html" . }} <span class="topbar-left">
{{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\t ")))) }} {{- partial "topbar-button.html" (dict
{{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }} "page" $page
<div id="breadcrumbs"> "class" "topbar-sidebar"
<span id="sidebar-toggle-span"> "href" "javascript:showNav()"
<a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }} (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a> "icon" "bars"
</span> "title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
{{- if $toc }} )}}
<span id="toc-menu" title='{{ T "Toc-toggle" }} (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span> {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
{{- end }} {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
{{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }} {{- $toc_content := partial "toc.html" . }}
{{- if $showBreadcrumb }} {{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\t ")))) }}
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList"> {{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }}
{{- if $toc }}
{{- partial "topbar-button.html" (dict
"page" $page
"class" "topbar-toc"
"href" "javascript:showToc()"
"icon" "list-alt"
"title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
)}}
{{- end }}
{{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
{{- if $showBreadcrumb }}
<ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
{{- template "breadcrumb" dict "page" . "to" . }} {{- template "breadcrumb" dict "page" . "to" . }}
</ol> </ol>
{{- else }} {{- else }}
<span class="links"> <span class="breadcrumbs highlightable">
{{ .Title }} {{ .Title }}
</span> </span>
{{- end }} {{- end }}
</div> </span>
{{- if $toc }} {{- if $toc }}
{{ $toc_content }} {{ $toc_content }}
{{- end }} {{- end }}

View file

@ -22,20 +22,20 @@
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }} {{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }} {{- end }}
<div class="topbar-button {{ $class }}"> <div class="topbar-button {{ $class }}">
{{- if $isDisabled }} {{- if $isDisabled }}
<span> <span>
{{- else if $isButton }} {{- else if $isButton }}
<button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}"> <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
{{- else }} {{- else }}
<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}"> <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
{{- end }} {{- end }}
<i class="{{ $icon }}"></i> <i class="{{ $icon }}"></i>
{{- if $isDisabled }} {{- if $isDisabled }}
</span> </span>
{{- else if $isButton }} {{- else if $isButton }}
</button> </button>
{{- else }} {{- else }}
</a> </a>
{{- end }} {{- end }}
</div> </div>

View file

@ -39,10 +39,10 @@ pre {
/* we don't need this while printing */ /* we don't need this while printing */
display: none; display: none;
} }
#body #breadcrumbs { #body .topbar-left {
width: 100%; width: 100%;
} }
#body #breadcrumbs .links { #body .topbar-left .breadcrumbs {
overflow-x: hidden; overflow-x: hidden;
visibility: visible; visibility: visible;
} }
@ -120,17 +120,6 @@ body,
put as HTML into markdown */ put as HTML into markdown */
text-decoration-line: underline; text-decoration-line: underline;
} }
#toc-menu {
/* we don't need this while printing */
display: none;
}
#body #sidebar-toggle-span {
/* we don't need this while printing */
display: none;
}
#breadcrumbs .links {
display: inline;
}
#topbar{ #topbar{
/* the header is sticky which is not suitable for print; */ /* the header is sticky which is not suitable for print; */
position: inherit; /* IE11 doesn't know "initial" here */ position: inherit; /* IE11 doesn't know "initial" here */
@ -138,6 +127,12 @@ body,
#topbar > div { #topbar > div {
background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */ background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */
} }
#body .topbar-left {
border-width: 0;
}
.topbar-left .breadcrumbs {
display: inline;
}
.tags { .tags {
display: none; display: none;
} }

View file

@ -70,27 +70,29 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-right-width: 0; border-right-width: 0;
} }
html[dir="rtl"] .topbar-button { html[dir="rtl"] .topbar-right .topbar-button {
float: right; float: right;
} }
.topbar-button > * { html[dir="rtl"] .topbar-left .topbar-button {
float: left;
}
.topbar-right .topbar-button > * {
border-left: thin solid rgba( 134, 134, 134, .333 ); border-left: thin solid rgba( 134, 134, 134, .333 );
} }
.topbar-left .topbar-button > * {
border-right: thin solid rgba( 134, 134, 134, .333 );
}
#body .topbar-left {
border-left-style: solid;
border-left-width: 1px;
}
html[dir="rtl"] #body .topbar-left {
float: left;
}
html[dir="rtl"] .topbar-prev i, html[dir="rtl"] .topbar-prev i,
html[dir="rtl"] .topbar-next i { html[dir="rtl"] .topbar-next i {
transform: scaleX(1); transform: scaleX(1);
} }
#toc-menu,
#sidebar-toggle-span {
border-right: thin solid rgba( 134, 134, 134, .333 );
}
#body #breadcrumbs {
border-left-style: solid;
border-left-width: 1px;
}
html[dir="rtl"] #body #breadcrumbs {
float: left;
}
.progress { .progress {
left: 1rem; left: 1rem;
} }
@ -228,23 +230,23 @@
a, a,
.anchor, .anchor,
#toc-menu, .topbar-button button,
#searchresults .autocomplete-suggestion { #searchresults .autocomplete-suggestion {
color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */ color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
} }
#body #breadcrumbs { #body .topbar-left {
border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */ border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 48rem) {
#body #breadcrumbs { #body .topbar-left {
border-left-color: transparent; border-left-color: transparent;
} }
} }
a:hover, a:hover,
.anchor:hover, .anchor:hover,
#toc-menu:hover { .topbar-button button:hover {
color: rgba( 32, 40, 145, 1 ); /* var(--MAIN-LINK-HOVER-color) */ color: rgba( 32, 40, 145, 1 ); /* var(--MAIN-LINK-HOVER-color) */
} }
@ -526,7 +528,7 @@
background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
} }
#body #breadcrumbs { #body .topbar-left {
border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */ border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */
} }

View file

@ -395,12 +395,12 @@ dd {
} }
} }
.links a:hover, .breadcrumbs a:hover,
.links a:active, .breadcrumbs a:active,
.links a:focus, .breadcrumbs a:focus,
.links a:hover *, .breadcrumbs a:hover *,
.links a:active *, .breadcrumbs a:active *,
.links a:focus *, .breadcrumbs a:focus *,
.toc-wrapper a:hover, .toc-wrapper a:hover,
.toc-wrapper a:active, .toc-wrapper a:active,
.toc-wrapper a:focus, .toc-wrapper a:focus,
@ -982,44 +982,49 @@ td {
.topbar-button { .topbar-button {
display: block; display: block;
float: right;
position: relative; position: relative;
}
.topbar-right .topbar-button {
float: right;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
html[dir="rtl"] .topbar-button { html[dir="rtl"] .topbar-right .topbar-button {
float: left; float: left;
} }
.topbar-left .topbar-button {
float: left;
}
html[dir="rtl"] .topbar-left .topbar-button {
float: right;
}
.topbar-button > * { .topbar-button > * {
border-inline-start: thin solid rgba( 134, 134, 134, .333 ); display: inline-block;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
html[dir="rtl"] .topbar-prev i, .topbar-right .topbar-button > * {
html[dir="rtl"] .topbar-next i { border-inline-start: thin solid rgba( 134, 134, 134, .333 );
transform: scaleX(-1);
} }
.topbar-left .topbar-button > * {
border-inline-end: thin solid rgba( 134, 134, 134, .333 );
}
.topbar-button span i{ .topbar-button span i{
color: rgba( 134, 134, 134, .333 ); color: rgba( 134, 134, 134, .333 );
} }
.topbar-button button{
#toc-menu{ -webkit-appearance: none;
cursor: pointer; appearance: none;
} background-color: transparent;
#toc-menu,
#sidebar-toggle-span {
border-inline-end: thin solid rgba( 134, 134, 134, .333 );
padding-left: 1rem;
padding-right: 1rem;
} }
#body #breadcrumbs { #body .topbar-left {
border-inline-start-style: solid; border-inline-start-style: solid;
border-inline-start-width: 1px; border-inline-start-width: 1px;
float: left; float: left;
height: auto; height: auto;
line-height: 1.2;
margin-bottom: 0; margin-bottom: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -1029,55 +1034,61 @@ html[dir="rtl"] .topbar-next i {
white-space: nowrap; white-space: nowrap;
width: calc(100% - 5*3.25rem); width: calc(100% - 5*3.25rem);
} }
html[dir="rtl"] #body #breadcrumbs { html[dir="rtl"] #body .topbar-left {
float: right; float: right;
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 48rem) {
#body #breadcrumbs { #body .topbar-left {
border-inline-start-color: transparent; border-inline-start-color: transparent;
text-overflow: unset; text-overflow: unset;
} }
} }
#sidebar-toggle-span { html[dir="rtl"] .topbar-prev i,
html[dir="rtl"] .topbar-next i {
transform: scaleX(-1);
}
.topbar-sidebar {
display: none; display: none;
} }
.progress { .progress {
inset-inline-start: 1rem; inset-inline-start: 1rem;
top: 1rem; top: 1rem;
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 48rem) {
.mobile-support #sidebar-toggle-span { .mobile-support .topbar-sidebar {
display: inline; display: block;
} }
.progress { .progress {
inset-inline-start: 4.25rem; inset-inline-start: 4.25rem;
} }
} }
#body #breadcrumbs .links { #body .topbar-left .breadcrumbs {
display: inline; display: inline;
padding: 0 .75rem; line-height: 1.2;
padding: 0 1rem;
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 48rem) {
#body #breadcrumbs .links { #body .topbar-left .breadcrumbs {
/* we just hide the breadcrumbs instead of display: none; /* we just hide the breadcrumbs instead of display: none;
this makes sure that the breadcrumbs are still usable for this makes sure that the breadcrumbs are still usable for
accessability */ accessability */
visibility: hidden; margin-left: -1000px;
} }
} }
#body #breadcrumbs .links * { #body .topbar-left .breadcrumbs * {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
} }
#body #breadcrumbs .links meta { #body .topbar-left .breadcrumbs meta {
display: none; display: none;
} }
#body #breadcrumbs .links li:last-of-type { #body .topbar-left .breadcrumbs li:last-of-type {
cursor: text; cursor: text;
} }
@ -1583,7 +1594,7 @@ html[dir="rtl"] .menu-control span {
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 48rem) {
#breadcrumbs .links { .topbar-left .breadcrumbs {
display: none; display: none;
} }
} }

View file

@ -12,14 +12,14 @@ body {
a, a,
.anchor, .anchor,
#toc-menu, .topbar-button button,
#searchresults .autocomplete-suggestion { #searchresults .autocomplete-suggestion {
color: var(--INTERNAL-MAIN-LINK-color); color: var(--INTERNAL-MAIN-LINK-color);
} }
a:hover, a:hover,
.anchor:hover, .anchor:hover,
#toc-menu:hover { .topbar-button button:hover {
color: var(--INTERNAL-MAIN-LINK-HOVER-color); color: var(--INTERNAL-MAIN-LINK-HOVER-color);
} }
@ -253,11 +253,11 @@ table {
background-color: var(--INTERNAL-MAIN-BG-color); background-color: var(--INTERNAL-MAIN-BG-color);
} }
#body #breadcrumbs { #body .topbar-left {
border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color); border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 48rem) {
#body #breadcrumbs { #body .topbar-left {
border-inline-start-color: transparent; border-inline-start-color: transparent;
} }
} }

View file

@ -886,7 +886,7 @@ function showNav(){
} }
function showToc(){ function showToc(){
var t = document.querySelector( '#toc-menu' ); var t = document.querySelector( '.topbar-toc' );
if( !t ){ if( !t ){
// we may not have a toc // we may not have a toc
return; return;
@ -941,13 +941,10 @@ function initToc(){
document.addEventListener( 'keydown', tocShortcutHandler ); document.addEventListener( 'keydown', tocShortcutHandler );
document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav ); document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc ); document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
var t = document.querySelector( '#toc-menu' );
var p = document.querySelector( '.progress' ); var p = document.querySelector( '.progress' );
if( t && p ){ if( p ){
// we may not have a toc // we may not have a toc
t.addEventListener( 'click', showToc );
p.addEventListener( 'click', showToc ); p.addEventListener( 'click', showToc );
} }
@ -1116,11 +1113,6 @@ function scrollToPositions() {
function mark() { function mark() {
// mark some additional stuff as searchable // mark some additional stuff as searchable
var topbarLinks = document.querySelectorAll( '#topbar :not(.topbar-button) a' );
for( var i = 0; i < topbarLinks.length; i++ ){
topbarLinks[i].classList.add( 'highlight' );
}
var bodyInnerLinks = document.querySelectorAll( '#body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)' ); var bodyInnerLinks = document.querySelectorAll( '#body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)' );
for( var i = 0; i < bodyInnerLinks.length; i++ ){ for( var i = 0; i < bodyInnerLinks.length; i++ ){
bodyInnerLinks[i].classList.add( 'highlight' ); bodyInnerLinks[i].classList.add( 'highlight' );