Skip to content

Commit 81c1094

Browse files
authored
ux: improve release notes formatting (#23293)
Improve formatting of dowload links in release notes.
1 parent 170ae6d commit 81c1094

File tree

4 files changed

+86
-68
lines changed

4 files changed

+86
-68
lines changed

assets/css/components.css

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -84,40 +84,47 @@
8484
@apply list-disc pl-5 mb-1;
8585
}
8686

87-
8887
.download-links {
89-
@apply block;
90-
@apply text-gray-800;
91-
@apply dark:text-gray-200;
88+
@apply my-0 text-gray-600 dark:text-gray-400 rounded-sm border-1 border-gray-100 bg-gray-100/10 px-2 py-1;
89+
@apply dark:border-gray-800 dark:bg-gray-900;
90+
font-size: 86%;
9291
}
92+
9393
.download-links a {
9494
@apply link;
9595
}
96+
9697
.download-links-subcontainer {
97-
@apply flex flex-wrap gap-2;
98+
@apply flex flex-row gap-2 justify-between;
99+
ul{
100+
@apply m-0 p-0 list-none;
101+
li{
102+
@apply p-0 m-0;
103+
}
104+
}
98105
}
99106

100107
.card-image {
101108
@apply h-12 w-12 overflow-hidden;
102109
}
103110

104-
}
105-
.button {
106-
@apply my-2 mr-2 inline-block rounded-sm bg-blue-500 p-1 px-3 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400;
107-
}
111+
.button {
112+
@apply my-2 mr-2 inline-block rounded-sm bg-blue-500 p-1 px-3 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400;
113+
}
108114

109-
.summary-bar {
110-
@apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;
111-
}
115+
.summary-bar {
116+
@apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;
117+
}
112118

113-
.tabs {
114-
@apply bg-blue/2 rounded-sm p-2;
115-
}
116-
.tablist {
117-
@apply mb-1 border-b border-gray-100 dark:border-gray-800;
118-
}
119+
.tabs {
120+
@apply bg-blue/2 rounded-sm p-2;
121+
}
122+
.tablist {
123+
@apply mb-1 border-b border-gray-100 dark:border-gray-800;
124+
}
119125

120-
.tab-item {
121-
@apply inline-block rounded-t-sm px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-900;
122-
@apply dark:text-gray-200;
123-
}
126+
.tab-item {
127+
@apply inline-block rounded-t-sm px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-900;
128+
@apply dark:text-gray-200;
129+
}
130+
}

hugo_stats.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,9 @@
394394
"max-w-full",
395395
"max-w-none",
396396
"max-w-xl",
397+
"mb-0.5",
398+
"mb-0.6",
399+
"mb-0.7",
397400
"mb-1",
398401
"mb-1.5",
399402
"mb-2",

layouts/shortcodes/desktop-install-v2.html

Lines changed: 53 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,57 @@
55
{{- $linux := .Get "linux" -}}
66
{{- $build_path := .Get "build_path" -}}
77
<blockquote {{ if eq $build_path "/" }} class="tip" {{ end }} class="not-prose download-links">
8-
<p>Download Docker Desktop:</p>
9-
<div class="download-links-subcontainer">
10-
{{- if or $all $win }}
11-
<div>
12-
<a rel="noopener"
13-
href="https://desktop.docker.com/win/main/amd64{{ $build_path }}Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-windows">Windows</a>
14-
(<a rel="noopener"
15-
href="https://desktop.docker.com/win/main/amd64{{ $build_path }}checksums.txt">checksum</a>)
16-
</div>
17-
{{ end }}
18-
{{- if or $win_arm_release }}
19-
<div>
20-
<a rel="noopener"
21-
href="https://desktop.docker.com/win/main/arm64{{ $build_path }}Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-windows">Windows ARM {{ $win_arm_release }}</a>
22-
(<a rel="noopener"
23-
href="https://desktop.docker.com/win/main/arm64{{ $build_path }}checksums.txt">checksum</a>)
24-
</div>
25-
{{ end }}
26-
{{- if or $all $mac }}
27-
<div>
28-
<a rel="noopener" href="https://desktop.docker.com/mac/main/arm64{{ $build_path }}Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64">Mac with Apple chip</a>
29-
(<a rel="noopener"
30-
href="https://desktop.docker.com/mac/main/arm64{{ $build_path }}checksums.txt">checksum</a>)
31-
</div>
32-
<div>
33-
<a rel="noopener" href="https://desktop.docker.com/mac/main/amd64{{ $build_path }}Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-amd64">Mac with Intel chip</a>
34-
(<a rel="noopener"
35-
href="https://desktop.docker.com/mac/main/amd64{{ $build_path }}checksums.txt">checksum</a>)
36-
</div>
37-
{{ end -}}
38-
{{- if or $all $linux }}
39-
<div>
40-
<a rel="noopener"
41-
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}docker-desktop-amd64.deb?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64">Debian</a>
42-
-
43-
<a rel="noopener"
44-
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}docker-desktop-x86_64.rpm?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64">RPM</a>
45-
-
46-
<a rel="noopener"
47-
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}docker-desktop-x86_64.pkg.tar.zst?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64">Arch</a>
48-
(<a rel="noopener"
49-
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}checksums.txt">checksum</a>)
50-
</div>
51-
{{- end -}}
52-
</div>
8+
<p class="font-semibold mb-1">Download Docker Desktop</p>
9+
<div class="download-links-subcontainer">
10+
{{- if or $all $win $win_arm_release }}
11+
<ul> {{ end }}
12+
{{- if or $all $win }}
13+
<li>
14+
<a rel="noopener"
15+
href="https://desktop.docker.com/win/main/amd64{{ $build_path }}Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-windows">Windows</a>
16+
(<a rel="noopener"
17+
href="https://desktop.docker.com/win/main/amd64{{ $build_path }}checksums.txt">checksum</a>)
18+
</li>
19+
{{ end }}
20+
{{- if or $win_arm_release }}
21+
<li>
22+
<a rel="noopener"
23+
href="https://desktop.docker.com/win/main/arm64{{ $build_path }}Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-windows">Windows ARM {{ $win_arm_release }}</a>
24+
(<a rel="noopener"
25+
href="https://desktop.docker.com/win/main/arm64{{ $build_path }}checksums.txt">checksum</a>)
26+
</li>
27+
{{ end }}
28+
{{- if or $all $win $win_arm_release }}
29+
</ul> {{ end }}
30+
{{- if or $all $mac }}
31+
<ul>
32+
<li>
33+
<a rel="noopener" href="https://desktop.docker.com/mac/main/arm64{{ $build_path }}Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64">Mac with Apple chip</a>
34+
(<a rel="noopener"
35+
href="https://desktop.docker.com/mac/main/arm64{{ $build_path }}checksums.txt">checksum</a>)
36+
</li>
37+
<li>
38+
<a rel="noopener" href="https://desktop.docker.com/mac/main/amd64{{ $build_path }}Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-amd64">Mac with Intel chip</a>
39+
(<a rel="noopener"
40+
href="https://desktop.docker.com/mac/main/amd64{{ $build_path }}checksums.txt">checksum</a>)
41+
</li>
42+
</ul>
43+
{{ end -}}
44+
{{- if or $all $linux }}
45+
<ul>
46+
<li>
47+
<a rel="noopener"
48+
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}docker-desktop-amd64.deb?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64">Debian</a>
49+
-
50+
<a rel="noopener"
51+
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}docker-desktop-x86_64.rpm?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64">RPM</a>
52+
-
53+
<a rel="noopener"
54+
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}docker-desktop-x86_64.pkg.tar.zst?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64">Arch</a>
55+
(<a rel="noopener"
56+
href="https://desktop.docker.com/linux/main/amd64{{ $build_path }}checksums.txt">checksum</a>)
57+
</li>
58+
</ul>
59+
{{- end -}}
60+
</div>
5361
</blockquote>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<em class="text-gray-200 italic dark:text-gray-500">{{ .Get "date" }}</em>
1+
<em class="text-gray-400 italic dark:text-gray-500">{{ .Get "date" }}</em>

0 commit comments

Comments
 (0)