From 9a5136d0bec04249eed37fbcc619d45b0779a3d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Wed, 13 Sep 2023 23:10:41 +0200 Subject: [PATCH] topbar: switch to flex layout #639 --- layouts/partials/header.html | 143 +++++++++++++++++------------------ static/css/format-print.css | 17 ++--- static/css/ie.css | 22 ++---- static/css/theme.css | 117 +++++++++++++--------------- static/css/variant.css | 9 +-- 5 files changed, 138 insertions(+), 170 deletions(-) diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 5f2197035a..3ba1245719 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -71,65 +71,7 @@
{{- $hook := "styleclass" }} diff --git a/static/css/format-print.css b/static/css/format-print.css index ffa880ed7f..4ee95bf5aa 100644 --- a/static/css/format-print.css +++ b/static/css/format-print.css @@ -35,16 +35,14 @@ pre { padding-left: 0; /* for print, we want to align with the footer to ease the layout */ padding-right: 0; } -.topbar-button { - /* we don't need this while printing */ +#body .topbar-button { + /* we don't need the buttons while printing */ display: none; } -#body .topbar-left { - width: 100%; -} -#body .topbar-left .breadcrumbs { - overflow-x: hidden; - visibility: visible; +@media screen and (max-width: 48rem) { + #body .topbar-breadcrumbs { + 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; } diff --git a/static/css/ie.css b/static/css/ie.css index d4abd1246a..4fe4bb72ee 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -70,24 +70,16 @@ border-top-right-radius: 0; border-right-width: 0; } - html[dir="rtl"] .topbar-right .topbar-button { - float: right; - } - html[dir="rtl"] .topbar-left .topbar-button { - float: left; + .topbar-left .topbar-button > * { + border-right: 1px solid rgba( 134, 134, 134, .333 ); } .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 > * { - border-right: thin solid rgba( 134, 134, 134, .333 ); - } - #body .topbar-left { + #body .topbar-sidebar-divider { border-left-style: solid; border-left-width: 1px; - } - html[dir="rtl"] #body .topbar-left { - float: left; + margin-right: -1px; } 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; } } diff --git a/static/css/theme.css b/static/css/theme.css index 4cc4056d5e..f709c19e04 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -395,12 +395,12 @@ dd { } } -.breadcrumbs a:hover, -.breadcrumbs a:active, -.breadcrumbs a:focus, -.breadcrumbs a:hover *, -.breadcrumbs a:active *, -.breadcrumbs a:focus *, +.topbar-breadcrumbs a:hover, +.topbar-breadcrumbs a:active, +.topbar-breadcrumbs a:focus, +.topbar-breadcrumbs a:hover *, +.topbar-breadcrumbs a:active *, +.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 { - display: inline; -} -#body .topbar-left { +.topbar-sidebar-divider { border-inline-start-style: solid; border-inline-start-width: 1px; - display: inline; - float: left; - 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); + margin-inline-end: -1px; + width: 1px; } -html[dir="rtl"] #body .topbar-left { - float: right; +.topbar-sidebar-divider::after { + 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 { - display: inline; +.topbar-breadcrumbs { + 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 * { - display: inline-block; - padding: 0; -} - -#body .topbar-left .breadcrumbs meta { +.topbar-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; diff --git a/static/css/variant.css b/static/css/variant.css index 4f3669fb76..41bd1ff030 100644 --- a/static/css/variant.css +++ b/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); }