mirror/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-06-19 07:35:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

guides: minor layout fixes (#24679)

Browse Source 
<!--Delete sections as needed -->

## Description

At just the right medium width, some chips' text overlaps. Removed no
wrap for medium.
<img width="1248" height="837" alt="image"
src="https://github.com/user-attachments/assets/1ac818f2-2512-4669-891d-4b1ea0735bf0"
/>

Some tags in the left-nav have no guides (release notes, secrets, etc.).
Added conditional to make sure the tag and language has associated
guides before displaying
<img width="987" height="761" alt="image"
src="https://github.com/user-attachments/assets/d479a1d8-e287-4320-b620-6dcfab5e04da"
/>


https://deploy-preview-24679--docsdocker.netlify.app/guides/?tags=distributed-systems

## Related issues or tickets

ENGDOCS-3227

## Reviews

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Editorial review

Signed-off-by: Craig Osterhout <craig.osterhout@docker.com>
This commit is contained in:
Craig Osterhout
2026-04-09 23:34:43 -07:00
committed by GitHub
parent f229d48c47
commit c3bd7fb911
1 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/guides/landing.html
+32 -28
View File
@@ -41,38 +41,42 @@
<div class="pl-2"><strong>Tags</strong></div>
<fieldset class="flex flex-col gap-2">
{{- range $name, $data := site.Data.tags }}
{{- $id := anchorize (fmt.Printf "tag-%s" $name) }}
<div class="flex gap-2 pl-2">
<input
value="{{ $name }}"
type="checkbox"
id="{{ $id }}"
@change="toggleFilter('tags', '{{ $name }}')"
:checked="filters['tags'].includes('{{ $name }}')"
/>
<label class="select-none" for="{{ $id }}"
>{{ $data.title }}</label
>
</div>
{{- if where $.Pages "Params.tags" "intersect" (slice $name) }}
{{- $id := anchorize (fmt.Printf "tag-%s" $name) }}
<div class="flex gap-2 pl-2">
<input
value="{{ $name }}"
type="checkbox"
id="{{ $id }}"
@change="toggleFilter('tags', '{{ $name }}')"
:checked="filters['tags'].includes('{{ $name }}')"
/>
<label class="select-none" for="{{ $id }}"
>{{ $data.title }}</label
>
</div>
{{- end }}
{{ end }}
</fieldset>
<div class="pl-2"><strong>Languages</strong></div>
<fieldset class="flex flex-wrap gap-2 pl-2">
{{- range $name, $data := site.Data.languages }}
{{- $id := anchorize (fmt.Printf "lang-%s" $name) }}
<button
class="border-divider-light dark:border-divider-dark flex gap-1 rounded-full border bg-white px-2 py-1 dark:bg-gray-800"
:class="{ 'ring-3-2 ring-3-blue-light-400 dark:ring-3-blue-dark-400': filters['languages'].includes('{{ $name }}') }"
@click="toggleFilter('languages', '{{ $name }}')"
>
<img
height="18"
width="18"
title="{{ $data.title }}"
src="{{ $data.icon }}"
/>
<span>{{ $data.title }}</span>
</button>
{{- if where $.Pages "Params.languages" "intersect" (slice $name) }}
{{- $id := anchorize (fmt.Printf "lang-%s" $name) }}
<button
class="border-divider-light dark:border-divider-dark flex gap-1 rounded-full border bg-white px-2 py-1 dark:bg-gray-800"
:class="{ 'ring-3-2 ring-3-blue-light-400 dark:ring-3-blue-dark-400': filters['languages'].includes('{{ $name }}') }"
@click="toggleFilter('languages', '{{ $name }}')"
>
<img
height="18"
width="18"
title="{{ $data.title }}"
src="{{ $data.icon }}"
/>
<span>{{ $data.title }}</span>
</button>
{{- end }}
{{ end }}
</fieldset>
</div>
@@ -240,7 +244,7 @@
<div
class="flex items-center justify-between gap-8 text-sm text-gray-400 dark:text-gray-300"
>
<div class="flex flex-wrap gap-2 md:flex-nowrap">
<div class="flex flex-wrap gap-2">
{{- with .Params.languages }}
{{ partial "guide-languages.html" . }}
{{- end }}