diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5ee33e8739..9c0095193f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -71,59 +71,62 @@
<div id="toc-overlay"></div>
<nav id="topbar" class="highlightable">
<div>
- {{- $File := .File }}
- {{- $Site := .Site }}
{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
{{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
- {{- $parent := .Parent }}
- {{- $ispublished := true }}
- {{- if $parent }}
- {{- $ispublished = gt (int (len $parent.Permalink)) 0 }}
- {{- end }}
- {{- $startarrow := "🡐" }}
- {{- $endarrow := "🡒" }}
+ {{- $startarrow := "🡐" }}
+ {{- $endarrow := "🡒" }}
{{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
- {{- $startarrow = "🡒" }}
- {{- $endarrow = "🡐" }}
+ {{- $startarrow = "🡒" }}
+ {{- $endarrow = "🡐" }}
{{- end }}
- <div class="navigation">
+ {{- $ispublished := true }}
+ {{- with .Parent }}
+ {{- $ispublished = gt (int (len .Permalink)) 0 }}
+ {{- end }}
+ {{- $next := "" }}
{{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
- <span class="nav nav-next topbar-link"><i class="fa fa-chevron-right fa-fw"></i></span>
{{- else }}
- {{- with ($.Scratch.Get "relearnNextPage") }}
- <a class="nav nav-next topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $endarrow | safeHTML }})"><i class="fas fa-chevron-right fa-fw"></i></a>
- {{- end }}
+ {{- $next = $.Scratch.Get "relearnNextPage" }}
{{- end }}
- </div>
- <div class="navigation">
+ {{- partial "topbar-button.html" (dict
+ "page" $page
+ "class" "topbar-next"
+ "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next))
+ "icon" "chevron-right"
+ "title" (printf "%s (%s)" ($next | default $page).Title ($endarrow | safeHTML))
+ )}}
+ {{- $prev := "" }}
{{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
- <span class="nav nav-prev topbar-link"><i class="fa fa-chevron-left fa-fw"></i></span>
- {{- else if or (ne $outputFormat "html") (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) }}
- {{- with .Site.Home }}
- <a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $startarrow | safeHTML }})"><i class="fas fa-chevron-left fa-fw"></i></a>
- {{- end }}
+ {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
+ {{- $prev = .Site.Home }}
{{- else }}
- {{- with ($.Scratch.Get "relearnPrevPage") }}
- <a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $startarrow | safeHTML }})"><i class="fas fa-chevron-left fa-fw"></i></a>
- {{- end}}
+ {{- $prev = $.Scratch.Get "relearnPrevPage" }}
{{- end}}
- </div>
+ {{- partial "topbar-button.html" (dict
+ "page" $page
+ "class" "topbar-prev"
+ "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev))
+ "icon" "chevron-left"
+ "title" (printf "%s (%s)" ($prev | default $page).Title ($startarrow | safeHTML))
+ )}}
{{- end }}
{{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
- <div id="top-print-link">
- <a class="print-link topbar-link" title='{{ T "Print-this-chapter" }} (CTRL+ALT+p)' href="{{ .RelPermalink }}">
- <i class="fas fa-print fa-fw"></i>
- </a>
- </div>
+ {{- partial "topbar-button.html" (dict
+ "page" $page
+ "class" "topbar-print"
+ "href" .RelPermalink
+ "icon" "print"
+ "title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
+ )}}
{{- end -}}
- {{- if and (eq $outputFormat "html") .Site.Params.editURL $File }}
- {{- with $File.Path }}
- <div id="top-github-link">
- <a class="github-link topbar-link" title='{{ T "Edit-this-page" }} (CTRL+ALT+w)' href="{{ $Site.Params.editURL }}{{ strings.TrimLeft "/" (replace $File.Dir "\\" "/") }}{{ $File.LogicalName }}" target="_blank">
- <i class="fas fa-pen fa-fw"></i>
- </a>
- </div>
- {{- end }}
+ {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
+ {{- partial "topbar-button.html" (dict
+ "page" $page
+ "class" "topbar-edit"
+ "href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName)
+ "icon" "pen"
+ "title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
+ )}}
{{- end }}
{{- $defaultDisableToc := .Site.Params.disableToc | default false }}
{{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
diff --git a/layouts/partials/relLangPrettyUglyURL.hugo b/layouts/partials/relLangPrettyUglyURL.hugo
index 6d797b1b63..0844fe12d7 100644
--- a/layouts/partials/relLangPrettyUglyURL.hugo
+++ b/layouts/partials/relLangPrettyUglyURL.hugo
@@ -4,6 +4,7 @@
{{- $link := "" }}
{{- if isset . "link" }}
{{- $link = .link }}
+{{- else if not $to }}
{{- else if $abs }}
{{- $link = $to.Permalink }}
{{- else }}
diff --git a/layouts/partials/topbar-button.html b/layouts/partials/topbar-button.html
new file mode 100644
index 0000000000..764a7f026e
--- /dev/null
+++ b/layouts/partials/topbar-button.html
@@ -0,0 +1,41 @@
+{{- $page := .page }}
+{{- $class := .class | default "" }}
+{{- $href := (trim .href " ") | default "" }}
+{{- $target := .target | default "" }}
+{{- $type := .type | default "" }}
+{{- $isDisabled := not $href }}
+{{- $isButton := false }}
+{{- if or (not $href) (strings.HasPrefix $href "javascript:") }}
+ {{- $isButton = true }}
+ {{- $href = substr $href (len "javascript:") }}
+ {{- if not $type }}
+ {{- $type = "button" }}
+ {{- end }}
+{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
+ {{- $target = "_blank" }}
+ {{- if isset $page.Site.Params "externallinktarget" }}
+ {{- $target = $page.Site.Params.externalLinkTarget }}
+ {{- end }}
+{{- end }}
+{{- $title := (trim .title " ") | default "" }}
+{{- $icon := (trim .icon " ") | default "" }}
+{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
+ {{- $icon = printf "fa-fw fas fa-%s" $icon }}
+{{- end }}
+<div class="topbar-button {{ $class }}">
+{{- if $isDisabled }}
+ <span>
+{{- else if $isButton }}
+ <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
+{{- else }}
+ <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
+{{- end }}
+ <i class="{{ $icon }}"></i>
+{{- if $isDisabled }}
+ </span>
+{{- else if $isButton }}
+ </button>
+{{- else }}
+ </a>
+{{- end }}
+</div>
\ No newline at end of file
diff --git a/static/css/format-print.css b/static/css/format-print.css
index ed964431e3..88fd3f4068 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -35,9 +35,7 @@ pre {
padding-left: 0; /* for print, we want to align with the footer to ease the layout */
padding-right: 0;
}
-.navigation,
-#top-print-link,
-#top-github-link {
+.topbar-button {
/* we don't need this while printing */
display: none;
}
diff --git a/static/css/ie.css b/static/css/ie.css
index d5eea23c27..c1a4bab005 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -70,17 +70,14 @@
border-top-right-radius: 0;
border-right-width: 0;
}
- html[dir="rtl"] .navigation,
- html[dir="rtl"] #top-print-link,
- html[dir="rtl"] #top-github-link {
+ html[dir="rtl"] .topbar-button {
float: right;
}
- .nav,
- .print-link,
- .github-link {
+ .topbar-button > * {
border-left: thin solid rgba( 134, 134, 134, .333 );
}
- html[dir="rtl"] .nav i {
+ html[dir="rtl"] .topbar-prev i,
+ html[dir="rtl"] .topbar-next i {
transform: scaleX(1);
}
#toc-menu,
diff --git a/static/css/theme.css b/static/css/theme.css
index 47f8dacf6f..834a658966 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -980,40 +980,30 @@ td {
height: 100%;
}
-.navigation,
-#top-print-link,
-#top-github-link {
+.topbar-button {
display: block;
float: right;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
}
-html[dir="rtl"] .navigation,
-html[dir="rtl"] #top-print-link,
-html[dir="rtl"] #top-github-link {
+html[dir="rtl"] .topbar-button {
float: left;
}
-.nav,
-.print-link,
-.github-link {
+.topbar-button > * {
border-inline-start: thin solid rgba( 134, 134, 134, .333 );
padding-left: 1rem;
padding-right: 1rem;
}
-html[dir="rtl"] .nav i {
+html[dir="rtl"] .topbar-prev i,
+html[dir="rtl"] .topbar-next i {
transform: scaleX(-1);
}
-span.nav i{
+.topbar-button span i{
color: rgba( 134, 134, 134, .333 );
}
-.navigation,
-#top-print-link,
-#top-github-link {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
-}
-
#toc-menu{
cursor: pointer;
}
diff --git a/static/js/theme.js b/static/js/theme.js
index ca0f61a90a..a17927237d 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -644,9 +644,9 @@ function initArrowNav(){
}
// button navigation
- var prev = document.querySelector( 'a.nav-prev' );
+ var prev = document.querySelector( '.topbar-prev a' );
prev && prev.addEventListener( 'click', navPrev );
- var next = document.querySelector( 'a.nav-next' );
+ var next = document.querySelector( '.topbar-next a' );
next && next.addEventListener( 'click', navNext );
// keyboard navigation
@@ -906,26 +906,26 @@ function showToc(){
}
function showEdit(){
- var l = document.querySelector( '#top-github-link a' );
+ var l = document.querySelector( '.topbar-edit a' );
if( l ){
l.click();
}
}
function showPrint(){
- var l = document.querySelector( '#top-print-link a' );
+ var l = document.querySelector( '.topbar-print a' );
if( l ){
l.click();
}
}
function navPrev(){
- var e = document.querySelector( 'a.nav-prev' );
+ var e = document.querySelector( '.topbar-prev a' );
location.href = e && e.getAttribute( 'href' );
};
function navNext(){
- var e = document.querySelector( 'a.nav-next' );
+ var e = document.querySelector( '.topbar-next a' );
location.href = e && e.getAttribute( 'href' );
};
@@ -1116,7 +1116,7 @@ function scrollToPositions() {
function mark() {
// mark some additional stuff as searchable
- var topbarLinks = document.querySelectorAll( '#topbar a:not(.topbar-link):not(.btn)' );
+ var topbarLinks = document.querySelectorAll( '#topbar :not(.topbar-button) a' );
for( var i = 0; i < topbarLinks.length; i++ ){
topbarLinks[i].classList.add( 'highlight' );
}