_content: All releases page update
This update is to the /dl page design.
- Page title updated
- Table updated to reflect design
- spacing/color adjustments to match design
Video: https://drive.google.com/file/d/1Yhov_7v4h6vS9lQlQuuVqF3T3M-dXQnU/view?usp=sharing
Change-Id: Ifc7d8ad64b99e5ec44f4b2be657082ef20f30fa5
Reviewed-on: https://go-review.googlesource.com/c/website/+/442515
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
diff --git a/_content/css/styles.css b/_content/css/styles.css
index a875d18..303fa69 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -4549,6 +4549,43 @@
}
.toggleButton {
cursor: pointer;
+ background-color: var(--color-background-accented);
+ padding: 0.5rem;
+}
+h3.toggleButton {
+ font-style: normal;
+ font-weight: 500;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ padding-left: 1rem;
+ display: flex;
+ align-items: center;
+}
+#archive h2.toggleButton {
+ background-color: var(--color-background);
+}
+.toggleButton span.toggleText {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ color: var(--color-text-link);
+ margin-left: 0.625rem;
+}
+.toggleButton-img {
+ display: block;
+}
+.toggleButton-img-dark {
+ display: none;
+}
+[data-theme='dark'] .toggleButton-img {
+ display: none;
+}
+[data-theme='dark'] .toggleButton-img-dark {
+ display: block;
+}
+.toggle .collapsed img {
+ transform: rotate(180deg);
}
.toggle > .collapsed {
display: block;
@@ -4805,16 +4842,34 @@
height: 2.5rem;
}
table.downloadtable {
- margin-left: 20px;
- margin-right: 20px;
+ width: 100%;
border-collapse: collapse;
}
-table.downloadtable tr {
- background-color: var(--color-background-accented);
+table.downloadtable thead {
+ border: 2px solid var(--color-background-accented);
}
table.downloadtable tr:nth-child(2n),
-table.downloadtable tr.first {
+table.downloadtable tr.first,
+table.downloadtable tr {
background-color: var(--color-background);
+ border: 2px solid var(--color-background-accented);
+}
+
+table.downloadtable tr.first th {
+ text-align: left;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+table.downloadtable td {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+table.downloadtable td.filename, table.downloadtable tr.first th:nth-child(1) {
+ padding-left: 4.5rem;
}
table.downloadtable td,
table.downloadtable th {
diff --git a/_content/dl.tmpl b/_content/dl.tmpl
index 623088f..4cc17e9 100644
--- a/_content/dl.tmpl
+++ b/_content/dl.tmpl
@@ -54,10 +54,10 @@
{{with .Archive}}
<div class="toggle" id="archive">
<div class="collapsed">
- <h2 class="toggleButton" title="Click to show versions">Archived versions ▸</h2>
+ <h2 class="toggleButton" title="Click to show versions">Archived versions <span class="toggleText">Show</span></h2>
</div>
<div class="expanded">
- <h2 class="toggleButton" title="Click to hide versions">Archived versions ▾</h2>
+ <h2 class="toggleButton" title="Click to hide versions">Archived versions <span class="toggleText">Hide</span></h2>
{{template "download-releases" .}}
</div>
</div>
@@ -105,10 +105,18 @@
{{range .}}
<div class="toggle{{if .Visible}}Visible{{end}}" id="{{.Version}}">
<div class="collapsed">
- <h3 class="toggleButton" title="Click to show downloads for this version">{{.Version}} ▸</h3>
+ <h3 class="toggleButton" title="Click to show downloads for this version">
+ <img class="toggleButton-img" src="/images/icons/arrow-down.svg" width="18" height="18" aria-hidden="true" />
+ <img class="toggleButton-img toggleButton-img-dark" src="/images/icons/arrow-down-dark.svg" width="18" height="18" aria-hidden="true" />
+ <span>{{.Version}}</span>
+ </h3>
</div>
<div class="expanded">
- <h3 class="toggleButton" title="Click to hide downloads for this version">{{.Version}} ▾</h3>
+ <h3 class="toggleButton" title="Click to hide downloads for this version">
+ <img class="toggleButton-img" src="/images/icons/arrow-down.svg" width="18" height="18" aria-hidden="true" />
+ <img class="toggleButton-img toggleButton-img-dark" src="/images/icons/arrow-down-dark.svg" width="18" height="18" aria-hidden="true" />
+ <span>{{.Version}}</span>
+ </h3>
{{if .Stable}}{{else}}
<p>This is an <b>unstable</b> version of Go. Use with caution.</p>
<p>If you already have Go installed, you can install this version by running:</p>
diff --git a/_content/images/icons/arrow-down-dark.svg b/_content/images/icons/arrow-down-dark.svg
new file mode 100644
index 0000000..4d22b9a
--- /dev/null
+++ b/_content/images/icons/arrow-down-dark.svg
@@ -0,0 +1,16 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18">
+ <title>arrow-down-svg</title>
+ <defs>
+ <clipPath clipPathUnits="userSpaceOnUse" id="cp1">
+ <path d="m12.75 7.5l-3.75 3.75-3.75-3.75z"/>
+ </clipPath>
+ <image width="18" height="18" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAQMAAABsABwUAAAAAXNSR0IB2cksfwAAAANQTFRF9fX1sGmfigAAAAxJREFUeJxjYKAOAAAASAABLrg8fgAAAABJRU5ErkJggg=="/>
+ </defs>
+ <style>
+ </style>
+ <g id="Clip-Path" clip-path="url(#cp1)">
+ <g id="Layer">
+ <use id="Layer" href="#img1" x="0" y="0"/>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/_content/images/icons/arrow-down.svg b/_content/images/icons/arrow-down.svg
new file mode 100644
index 0000000..7177a6b
--- /dev/null
+++ b/_content/images/icons/arrow-down.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="7" width="8" height="5"><path d="M5.25 7.5 9 11.25l3.75-3.75h-7.5Z" fill="#fff"/></mask><g mask="url(#a)"><path fill="#5F6368" d="M18 0v18H0V0z"/></g></svg>
\ No newline at end of file
diff --git a/internal/dl/server.go b/internal/dl/server.go
index f9f21de..101fc4b 100644
--- a/internal/dl/server.go
+++ b/internal/dl/server.go
@@ -72,7 +72,7 @@
}
h.site.ServePage(w, r, web.Page{
- "title": "Downloads",
+ "title": "All releases",
"layout": "dl",
"dl": d,
})
