docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hugo: improve site layout on medium screens 

- Keep the top-nav menu on medium screens
- Keep the sidebar navigation on medium screens
- Keep the right-hand toc on large screens
- Adjust breakpoints

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-04-24 17:56:36 +02:00
parent 46a3512a54
commit 1fb862bcf9
9 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
hugo_stats.json
View File

@ -270,13 +270,14 @@
"leading-snug", "leading-snug",
"left-0", "left-0",
"lg:block", "lg:block",
"lg:flex",
"lg:grid-cols-2", "lg:grid-cols-2",
"lg:grid-cols-3", "lg:grid-cols-3",
"lg:grid-cols-main-lg", "lg:grid-cols-main-lg",
"lg:hidden", "lg:hidden",
"lg:max-w-[300px]", "lg:max-w-[300px]",
"lg:ml-auto", "lg:ml-auto",
"lg:no-underline",
"lg:pb-2",
"lg:scale-100", "lg:scale-100",
"lg:text-base", "lg:text-base",
"lg:w-[1200px]", "lg:w-[1200px]",
@ -294,11 +295,14 @@
"mb-8", "mb-8",
"md:block", "md:block",
"md:col-start-3", "md:col-start-3",
"md:flex",
"md:flex-row", "md:flex-row",
"md:gap-8", "md:gap-8",
"md:grid-cols-2", "md:grid-cols-2",
"md:grid-cols-3", "md:grid-cols-3",
"md:grid-cols-main-md",
"md:h-[334px]", "md:h-[334px]",
"md:hidden",
"md:max-w-[66%]", "md:max-w-[66%]",
"md:scale-100", "md:scale-100",
"min-h-screen", "min-h-screen",
@ -417,10 +421,7 @@
"warning", "warning",
"xl:grid-cols-3", "xl:grid-cols-3",
"xl:grid-cols-4", "xl:grid-cols-4",
"xl:grid-cols-main", "xl:grid-cols-main-xl",
"xl:hidden",
"xl:no-underline",
"xl:pb-2",
"xl:w-[1200px]", "xl:w-[1200px]",
"youtube-video", "youtube-video",
"z-10", "z-10",

4
layouts/_default/baseof.html
View File

@ -7,9 +7,9 @@
<body class="bg-background-light text-base dark:bg-background-dark dark:text-white"> <body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main class="grid grid-cols-1 xl:grid-cols-main lg:grid-cols-main-lg"> <main class="grid grid-cols-1 xl:grid-cols-main-xl lg:grid-cols-main-lg md:grid-cols-main-md">
<!-- First column: visible on lg and xl --> <!-- First column: visible on lg and xl -->
<div class="hidden lg:block bg-background-light dark:bg-gray-dark-100" <div class="hidden md:block bg-background-light dark:bg-gray-dark-100 overflow-y-scroll"
{{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }} {{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
x-data @togglesidebar.window=" x-data @togglesidebar.window="
if ($store.showSidebar == false) { if ($store.showSidebar == false) {

2
layouts/_default/list.html
View File

@ -8,7 +8,7 @@
{{ with .Title }} {{ with .Title }}
<h1 class="scroll-mt-36">{{ . }}</h1> <h1 class="scroll-mt-36">{{ . }}</h1>
{{ end }} {{ end }}
<div class="block xl:hidden"> <div class="block lg:hidden">
{{ partial "pagemeta.html" . }} {{ partial "pagemeta.html" . }}
</div> </div>
{{ .Content }} {{ .Content }}

2
layouts/_default/single.html
View File

@ -8,7 +8,7 @@
{{ with .Title }} {{ with .Title }}
<h1 class="scroll-mt-36">{{ . }}</h1> <h1 class="scroll-mt-36">{{ . }}</h1>
{{ end }} {{ end }}
<div class="block xl:hidden"> <div class="block lg:hidden">
{{ partial "pagemeta.html" . }} {{ partial "pagemeta.html" . }}
<hr> <hr>
</div> </div>

2
layouts/partials/header.html
View File

@ -3,7 +3,7 @@
<div class="flex h-full items-center md:gap-8 gap-2"> <div class="flex h-full items-center md:gap-8 gap-2">
{{ if not .IsHome }} {{ if not .IsHome }}
<button x-data @click="$dispatch('togglesidebar')" <button x-data @click="$dispatch('togglesidebar')"
class="icon-svg block px-4 lg:hidden h-full" aria-label="Menu"> class="icon-svg block px-4 md:hidden h-full" aria-label="Menu">
{{ partialCached "icon" "menu" "menu" }} {{ partialCached "icon" "menu" "menu" }}
</button> </button>
{{ end }} {{ end }}

4
layouts/partials/pagemeta.html
View File

@ -14,7 +14,7 @@
</div> </div>
{{- end }} {{- end }}
{{- with $toc }} {{- with $toc }}
<div class="text-lg pb-0 xl:pb-2">{{ T "tableOfContents" }}</div> <div class="text-lg pb-0 lg:pb-2">{{ T "tableOfContents" }}</div>
<nav class="toc"> <nav class="toc">
{{ $root := (index page.Fragments.Headings 0).Headings }} {{ $root := (index page.Fragments.Headings 0).Headings }}
{{- template "walkHeadingFragments" $root }} {{- template "walkHeadingFragments" $root }}
@ -30,7 +30,7 @@
{{- range . }} {{- range . }}
{{- if and (ge .Level $min) (le .Level $max) }} {{- if and (ge .Level $min) (le .Level $max) }}
<li> <li>
<a class="link xl:no-underline" href="#{{ .ID }}">{{ .Title }}</a> <a class="link lg:no-underline" href="#{{ .ID }}">{{ .Title }}</a>
</li> </li>
{{- end }} {{- end }}
{{- with .Headings }} {{- with .Headings }}

4
layouts/partials/sidebar.html
View File

@ -6,7 +6,7 @@
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }} {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
{{/* Render the top-nav in sidebar for small screens */}} {{/* Render the top-nav in sidebar for small screens */}}
<nav class="text-sm pb-4 gap-4 flex lg:hidden flex-col justify-evenly"> <nav class="text-sm pb-4 gap-4 flex md:hidden flex-col justify-evenly">
<div class="text-gray-light dark:text-gray-dark">Main sections</div> <div class="text-gray-light dark:text-gray-dark">Main sections</div>
{{ range site.Menus.main }} {{ range site.Menus.main }}
<div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75 <div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75
@ -23,7 +23,7 @@
{{ $allSections = $allSections | append (index $e "title") }} {{ $allSections = $allSections | append (index $e "title") }}
{{ end }} {{ end }}
<nav id="sectiontree" class="text-sm flex flex-col"> <nav id="sectiontree" class="text-sm flex flex-col">
<div class="block py-4 lg:hidden text-gray-light dark:text-gray-dark">This section</div> <div class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>
{{/* The current page is in the table of contents */}} {{/* The current page is in the table of contents */}}
<ul> <ul>
{{/* Walk the toc.yaml nodes under the current main section */}} {{/* Walk the toc.yaml nodes under the current main section */}}

2
layouts/partials/top-nav.html
View File

@ -2,7 +2,7 @@
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }} {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
<div> <div>
<nav> <nav>
<ul class="mt-1 box-content hidden gap-4 lg:flex"> <ul class="mt-1 box-content hidden gap-4 md:flex">
{{ range site.Menus.main }} {{ range site.Menus.main }}
<li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}> <li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
<a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a> <a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>

5
tailwind.config.js
View File

@ -46,8 +46,9 @@ module.exports = {
}), }),
gridTemplateColumns: { gridTemplateColumns: {
'main': 'minmax(300px, 1fr) minmax(840px, 1fr) 1fr', 'main-xl': 'minmax(300px, 1fr) minmax(100ch, 1fr) 1fr',
'main-lg': '300px 1fr', 'main-lg': '300px minmax(75ch, 2fr) 1fr',
'main-md': '250px 1fr',
}, },
}, },