topbar: switch to flex layout #639

layouts/partials/header.html

@@ -71,65 +71,7 @@
       <div id="toc-overlay"></div>
       <nav id="topbar">
         <div>
-          <div class="topbar-right">
+          <div class="topbar-sidebar-divider"></div>
-            {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
-            {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
-              {{- $startarrow := "🡐" }}
-              {{- $endarrow := "🡒" }}
-              {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
-                {{- $startarrow = "🡒" }}
-                {{- $endarrow = "🡐" }}
-              {{- end }}
-              {{- $ispublished := true }}
-              {{- with .Parent }}
-                {{- $ispublished = gt (int (len .Permalink)) 0 }}
-              {{- end }}
-              {{- $next := "" }}
-              {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
-              {{- else }}
-                {{- $next = $.Scratch.Get "relearnNextPage" }}
-              {{- end }}
-              {{- 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") }}
-              {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
-                {{- $prev = .Site.Home }}
-              {{- else }}
-                {{- $prev = $.Scratch.Get "relearnPrevPage" }}
-              {{- end}}
-              {{- 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") }}
-              {{- 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 -}}
-            {{- 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 }}
-          </div>
           <div class="topbar-left">
             {{- partial "topbar-button.html" (dict
               "page" $page
@@ -151,21 +93,78 @@
                 "icon" "list-alt"
                 "title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
               )}}
+{{ $toc_content }}
             {{- end }}
+          </div>
           {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
           {{- if $showBreadcrumb }}
-            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <ol class="topbar-breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
             {{- template "breadcrumb" dict "page" . "to" . }}
           </ol>
           {{- else }}
-            <span class="breadcrumbs highlightable">
+          <span class="topbar-breadcrumbs highlightable">
             {{ .Title }}
           </span>
           {{- end }}
-          </div>
+          <div class="topbar-right">
-        {{- if $toc }}
+            {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
-{{ $toc_content }}
+              {{- 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 }}
+            {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
+              {{- 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 -}}
+            {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
+            {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
+              {{- $startarrow := "🡐" }}
+              {{- $endarrow := "🡒" }}
+              {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
+                {{- $startarrow = "🡒" }}
+                {{- $endarrow = "🡐" }}
+              {{- end }}
+              {{- $ispublished := true }}
+              {{- with .Parent }}
+                {{- $ispublished = gt (int (len .Permalink)) 0 }}
+              {{- end }}
+              {{- $prev := "" }}
+              {{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
+              {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
+                {{- $prev = .Site.Home }}
+              {{- else }}
+                {{- $prev = $.Scratch.Get "relearnPrevPage" }}
+              {{- end}}
+              {{- 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))
+              )}}
+              {{- $next := "" }}
+              {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
+              {{- else }}
+                {{- $next = $.Scratch.Get "relearnNextPage" }}
+              {{- end }}
+              {{- 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))
+              )}}
+            {{- end }}
+          </div>
         </div>
       </nav>
       {{- $hook := "styleclass" }}

static/css/format-print.css

@@ -35,17 +35,15 @@ pre {
     padding-left: 0; /* for print, we want to align with the footer to ease the layout */
     padding-right: 0;
 }
-.topbar-button {
+#body .topbar-button {
-    /* we don't need this while printing */
+    /* we don't need the buttons while printing */
     display: none;
 }
-#body .topbar-left {
+@media screen and (max-width: 48rem) {
-    width: 100%;
+    #body .topbar-breadcrumbs {
-}
-#body .topbar-left .breadcrumbs {
-    overflow-x: hidden;
         visibility: visible;
     }
+}
 #body .copy-to-clipboard-button {
     display: none;
 }
@@ -130,9 +128,6 @@ body,
 #body .topbar-left {
     border-width: 0;
 }
-.topbar-left .breadcrumbs {
-    display: inline;
-}
 .tags {
     display: none;
 }

static/css/ie.css

@@ -70,24 +70,16 @@
 		border-top-right-radius: 0;
 		border-right-width: 0;
 	}
-	html[dir="rtl"] .topbar-right .topbar-button {
+	.topbar-left .topbar-button > * {
-		float: right;
+		border-right: 1px solid rgba( 134, 134, 134, .333 );
-	}
-	html[dir="rtl"] .topbar-left .topbar-button {
-		float: left;
 	}
 	.topbar-right .topbar-button > * {
-		border-left: thin solid rgba( 134, 134, 134, .333 );
+		border-left: 1px solid rgba( 134, 134, 134, .333 );
 	}
-	.topbar-left .topbar-button > * {
+	#body .topbar-sidebar-divider {
-		border-right: thin solid rgba( 134, 134, 134, .333 );
-	}
-	#body .topbar-left {
 		border-left-style: solid;
 		border-left-width: 1px;
-	}
+		margin-right: -1px;
-	html[dir="rtl"] #body .topbar-left {
-		float: left;
 	}
 	html[dir="rtl"] .topbar-prev i,
 	html[dir="rtl"] .topbar-next i {
@@ -235,11 +227,11 @@
 		color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
 	}
 
-	#body .topbar-left {
+	#body .topbar-sidebar-divider {
 		border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */
 	}
 	@media screen and (max-width: 48rem) {
-		#body .topbar-left {
+		#body .topbar-sidebar-divider {
 			border-left-color: transparent;
 		}
 	}

static/css/theme.css

@@ -395,12 +395,12 @@ dd {
     }
 }
 
-.breadcrumbs a:hover,
+.topbar-breadcrumbs a:hover,
-.breadcrumbs a:active,
+.topbar-breadcrumbs a:active,
-.breadcrumbs a:focus,
+.topbar-breadcrumbs a:focus,
-.breadcrumbs a:hover *,
+.topbar-breadcrumbs a:hover *,
-.breadcrumbs a:active *,
+.topbar-breadcrumbs a:active *,
-.breadcrumbs a:focus *,
+.topbar-breadcrumbs a:focus *,
 .toc-wrapper a:hover,
 .toc-wrapper a:active,
 .toc-wrapper a:focus,
@@ -976,39 +976,29 @@ td {
 }
 
 #topbar > div {
+    align-items: center;
     background-color: rgba( 134, 134, 134, .066 );
+    display: flex;
+    flex-basis: 100%;
+    flex-direction: row;
     height: 100%;
 }
 
 .topbar-button {
-    display: block;
+    display: inline-block;
     position: relative;
 }
-.topbar-right .topbar-button {
-    float: right;
-    top: 50%;
-    transform: translateY(-50%);
-}
-html[dir="rtl"] .topbar-right .topbar-button {
-    float: left;
-}
-.topbar-left .topbar-button {
-    float: left;
-}
-html[dir="rtl"] .topbar-left .topbar-button {
-    float: right;
-}
 
 .topbar-button > * {
     display: inline-block;
     padding-left: 1rem;
     padding-right: 1rem;
 }
-.topbar-right .topbar-button > * {
-    border-inline-start: thin solid rgba( 134, 134, 134, .333 );
-}
 .topbar-left .topbar-button > * {
-    border-inline-end: thin solid rgba( 134, 134, 134, .333 );
+    border-inline-end: 1px solid rgba( 134, 134, 134, .333 );
+}
+.topbar-right .topbar-button > * {
+    border-inline-start: 1px solid rgba( 134, 134, 134, .333 );
 }
 
 .topbar-button span i{
@@ -1020,33 +1010,30 @@ html[dir="rtl"] .topbar-left .topbar-button {
     background-color: transparent;
 }
 
-#body .topbar-right {
+.topbar-sidebar-divider {
-    display: inline;
-}
-#body .topbar-left {
     border-inline-start-style: solid;
     border-inline-start-width: 1px;
-    display: inline;
+    margin-inline-end: -1px;
-    float: left;
+    width: 1px;
-    height: auto;
-    margin-bottom: 0;
-    overflow: hidden;
-    position: relative;
-    text-overflow: ellipsis;
-    top: 50%;
-    transform: translateY(-50%);
-    white-space: nowrap;
-    width: calc(100% - 5*3.25rem);
 }
-html[dir="rtl"] #body .topbar-left {
+.topbar-sidebar-divider::after {
-    float: right;
+    content: "\00a0";
 }
 @media screen and (max-width: 48rem) {
-    #body .topbar-left {
+    .topbar-sidebar-divider {
         border-inline-start-color: transparent;
-        text-overflow: unset;
     }
 }
+.topbar-left {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+}
+.topbar-right {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+}
 
 html[dir="rtl"] .topbar-prev i,
 html[dir="rtl"] .topbar-next i {
@@ -1055,44 +1042,51 @@ html[dir="rtl"] .topbar-next i {
 .topbar-sidebar {
     display: none;
 }
+@media screen and (max-width: 48rem) {
+    .mobile-support .topbar-sidebar {
+        display: inline-block;
+    }
+}
 
 .progress {
     inset-inline-start: 1rem;
     top: 1rem;
 }
 @media screen and (max-width: 48rem) {
-    .mobile-support .topbar-sidebar {
-        display: block;
-    }
     .progress {
         inset-inline-start: 4.25rem;
     }
 }
 
-#body .topbar-left .breadcrumbs {
+.topbar-breadcrumbs {
-    display: inline;
+    flex-grow: 1;
     line-height: 1.2;
+    margin: 0;
+    min-width: 0;
+    overflow: hidden;
     padding: 0 1rem;
+    text-overflow: ellipsis;
+    width: 100%;
+    white-space: nowrap;
 }
 @media screen and (max-width: 48rem) {
-    #body .topbar-left .breadcrumbs {
+    .topbar-breadcrumbs {
         /* we just hide the breadcrumbs instead of display: none;
         this makes sure that the breadcrumbs are still usable for
         accessability */
-        margin-left: -1000px;
+        visibility: hidden;
     }
 }
 
-#body .topbar-left .breadcrumbs * {
+.topbar-breadcrumbs meta {
-    display: inline-block;
-    padding: 0;
-}
-
-#body .topbar-left .breadcrumbs meta {
     display: none;
 }
 
-#body .topbar-left .breadcrumbs li:last-of-type {
+.topbar-breadcrumbs li {
+    display: inline-block;
+}
+
+.topbar-breadcrumbs li:last-of-type {
     cursor: text;
 }
 
@@ -1597,12 +1591,6 @@ html[dir="rtl"] .menu-control span {
     display: block;
 }
 
-@media screen and (max-width: 48rem) {
-    .topbar-left .breadcrumbs {
-        display: none;
-    }
-}
-
 /* clears the 'X' from Chrome's search input */
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
@@ -2096,6 +2084,7 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
 }
 
 #header-topbar {
+    border-bottom-color: transparent;
     border-bottom-style: solid;
     border-bottom-width: 1px;
     border-inline-end-style: solid;

static/css/variant.css

@@ -253,15 +253,9 @@ table {
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 
-#body .topbar-left {
+.topbar-sidebar-divider {
     border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
 }
-@media screen and (max-width: 48rem) {
-    #body .topbar-left {
-        border-inline-start-color: transparent;
-    }
-}
-
 
 #body a[aria-disabled="true"],
 #searchresults .autocomplete-suggestion > .context {
@@ -452,7 +446,6 @@ article ul > li > input[type="checkbox"] {
 }
 
 #header-topbar {
-    border-bottom-color: transparent;
     border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color);
 }