_content: Download install redesign
- Updates /doc/install design - Updates /dl/ button style Screenshot Buttons: https://drive.google.com/file/d/1zfuQRuYxlvb1ej0LS5bCituFX91scQA1/view?usp=sharing Screenshot Doc Install: https://drive.google.com/file/d/1lhLf8DXq93F-u20i54eH9-CS5CzF9X_-/view?usp=sharing Change-Id: I7ced9f5cdd6540382d3df23b87caadfd1c78cb1d Reviewed-on: https://go-review.googlesource.com/c/website/+/441855 Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com> Reviewed-by: Jamal Carvalho <jamal@golang.org> TryBot-Result: Gopher Robot <gobot@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> Auto-Submit: Jamal Carvalho <jamal@golang.org>
This commit is contained in:
Frederick Mixell
Gopher Robot
Родитель
cc976e8098
Коммит
1272e65ac9
|
|
@ -770,6 +770,7 @@ a.Footer-link--primary {
|
|||
.Article {
|
||||
color: var(--color-text);
|
||||
margin: 0 auto 1.875rem;
|
||||
margin-top: 3rem;
|
||||
max-width: 75.75rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
|
@ -803,9 +804,18 @@ h1 + h2.subtitle {
|
|||
}
|
||||
.Article h1 {
|
||||
font-size: 2.25rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.Article h2 {
|
||||
font-size: 1.4rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
margin-top: 2.75rem;
|
||||
margin-bottom: 0.275rem;
|
||||
}
|
||||
.Article h3 {
|
||||
font-size: 1.125rem;
|
||||
|
|
@ -819,9 +829,10 @@ h1 + h2.subtitle {
|
|||
.Article ul,
|
||||
.Article ol {
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.Article ol .Article pre {
|
||||
background-color: var(--color-background-accented);
|
||||
|
|
@ -876,6 +887,13 @@ h1 + h2.subtitle {
|
|||
.Article.Doc img {
|
||||
background-color: var(--white);
|
||||
}
|
||||
.Article p.DownloadBtn {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.675rem;
|
||||
}
|
||||
.Article .DocInstall-footer {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.BreadcrumbNav-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -4633,25 +4651,37 @@ th.pkg-name {
|
|||
border-bottom: var(--border);
|
||||
}
|
||||
.TabSection-tab {
|
||||
background: var(--color-background-accented);
|
||||
background: var(--color-background);
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
line-height: 3rem;
|
||||
padding: 0 1.125rem;
|
||||
position: relative;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
.TabSection-underline {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.TabSection-tab[aria-selected='true'] .TabSection-underline {
|
||||
display: block;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.TabSection-tab[aria-selected='true'] {
|
||||
background-color: #e0ebf5;
|
||||
color: black;
|
||||
color: var(--color-text-link);
|
||||
outline: 0;
|
||||
}
|
||||
.TabSection-tab:focus {
|
||||
background-color: #e0ebf5;
|
||||
color: black;
|
||||
color: var(--color-text-link);
|
||||
outline: 0;
|
||||
}
|
||||
.TabSection-tabPanel {
|
||||
font-size: 0.875rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
/* Tutorial previous and next links */
|
||||
.Navigation {
|
||||
|
|
@ -4700,10 +4730,13 @@ th.pkg-name {
|
|||
}
|
||||
/* for doc/install */
|
||||
a#start {
|
||||
background: #e0ebf5;
|
||||
border: 0.0625rem solid #375eab;
|
||||
background: var(--deep-cerulian);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
border-radius: 0.3125rem;
|
||||
color: #222;
|
||||
color: #FFF;
|
||||
display: block;
|
||||
padding: 0.625rem;
|
||||
text-align: center;
|
||||
|
|
@ -4721,7 +4754,8 @@ a#start .desc {
|
|||
margin-top: 0.3125rem;
|
||||
}
|
||||
.download {
|
||||
width: 17.5rem;
|
||||
width: 10.25rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
table.downloadtable {
|
||||
margin-left: 20px;
|
||||
|
|
@ -4747,29 +4781,44 @@ table.downloadtable tr.highlight td {
|
|||
font-weight: bold;
|
||||
}
|
||||
a.downloadBox {
|
||||
display: block;
|
||||
color: #222;
|
||||
border: 0.0625rem solid #375eab;
|
||||
border-radius: 5px;
|
||||
background: #e0ebf5;
|
||||
width: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background-accented);
|
||||
width: 13.875rem;
|
||||
height: 8.375rem;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
padding: 1rem;
|
||||
}
|
||||
a.downloadBox:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.downloadBox .platform {
|
||||
font-size: large;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.downloadWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.downloadBox .filename {
|
||||
color: var(--color-text-link);
|
||||
font-weight: bold;
|
||||
line-height: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
a.downloadBox:hover .filename {
|
||||
.downloadBox .filename img {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
.downloadBox .filename span {
|
||||
color: var(--color-text-link);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
a.downloadBox:hover .filename span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.downloadBox .size {
|
||||
|
|
@ -4777,8 +4826,11 @@ a.downloadBox:hover .filename {
|
|||
font-weight: normal;
|
||||
}
|
||||
.downloadBox .reqs {
|
||||
font-size: small;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
.downloadBox .checksum {
|
||||
font-size: 5pt;
|
||||
|
|
|
|||
|
|
@ -32,10 +32,12 @@ information about Go releases.
|
|||
|
||||
{{with .Featured}}
|
||||
<h2 id="featured">Featured downloads</h2>
|
||||
<div class="downloadWrapper">
|
||||
{{range .}}
|
||||
{{template "download" .}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div style="clear: both;"></div>
|
||||
|
||||
|
|
@ -161,9 +163,9 @@ go install golang.org/dl/{{.Version}}@latest
|
|||
<a class="download downloadBox" href="{{.URL}}">
|
||||
<div class="platform">{{.Platform}}</div>
|
||||
{{with .Requirements}}<div class="reqs">{{.}}</div>{{end}}
|
||||
<div>
|
||||
<span class="filename">{{.Filename}}</span>
|
||||
{{if .Size}}<span class="size">({{.PrettySize}})</span>{{end}}
|
||||
<div class="filename">
|
||||
<img src="/images/icons/download.svg" aria-hidden="true" width="14" height="13" />
|
||||
<span>{{.Filename}}</span>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -54,32 +54,24 @@ class DownloadsController {
|
|||
// Set the download button UI for a specific OS.
|
||||
setDownloadForOS(osName) {
|
||||
const baseURL = '/dl/';
|
||||
let download;
|
||||
|
||||
switch(osName){
|
||||
case 'linux':
|
||||
document.querySelector('.js-downloadButton').textContent =
|
||||
'Download Go for Linux';
|
||||
document.querySelector('.js-downloadDescription').textContent =
|
||||
this.linuxFileName + ' (' + this.linuxFileSize + ' MB)';
|
||||
'Download (' + this.parseVersionNumber(this.linuxFileName) + ')';
|
||||
document.querySelector('.js-download').href = baseURL + this.linuxFileName;
|
||||
break;
|
||||
case 'mac':
|
||||
document.querySelector('.js-downloadButton').textContent =
|
||||
'Download Go for Mac';
|
||||
document.querySelector('.js-downloadDescription').textContent =
|
||||
this.macFileName + ' (' + this.macFileSize + ' MB)';
|
||||
'Download (' + this.parseVersionNumber(this.macFileName) + ')';
|
||||
document.querySelector('.js-download').href = baseURL + this.macFileName;
|
||||
break;
|
||||
case 'windows':
|
||||
document.querySelector('.js-downloadButton').textContent =
|
||||
'Download Go for Windows';
|
||||
document.querySelector('.js-downloadDescription').textContent =
|
||||
this.windowsFileName + ' (' + this.windowsFileSize + ' MB)';
|
||||
'Download (' + this.parseVersionNumber(this.windowsFileName) + ')';
|
||||
document.querySelector('.js-download').href = baseURL + this.windowsFileName;
|
||||
break;
|
||||
default:
|
||||
document.querySelector('.js-downloadButton').textContent = 'Download Go';
|
||||
document.querySelector('.js-downloadDescription').textContent =
|
||||
'Visit the downloads page.';
|
||||
document.querySelector('.js-download').href = baseURL;
|
||||
|
|
@ -137,6 +129,17 @@ class DownloadsController {
|
|||
this.setInstallTabData(el.id);
|
||||
}
|
||||
|
||||
// get version number.
|
||||
parseVersionNumber(string) {
|
||||
const rx = /(\d+\.)(\d+\.)(\d+)/g;
|
||||
const matches = rx.exec(string)
|
||||
if (matches?.[0]) {
|
||||
return matches[0];
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Instantiate controller for page event handling.
|
||||
|
|
|
|||
|
|
@ -16,26 +16,17 @@
|
|||
check out the sources, build them on your own machine, and run them.
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="download">1. Go download.</h2>
|
||||
<p>
|
||||
Click the button below to download the Go installer.
|
||||
</p>
|
||||
<p>
|
||||
<p class="DownloadBtn">
|
||||
<a href="/dl/" id="start" class="download js-download">
|
||||
<span id="download-button" class="big js-downloadButton">Download Go</span>
|
||||
<span id="download-description" class="desc js-downloadDescription"></span>
|
||||
<span id="download-description" class="js-downloadDescription"></span>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Don't see your operating system here? Try one of the
|
||||
<a href="/dl/">other downloads</a>.
|
||||
</p>
|
||||
<aside class="Note">
|
||||
<strong>Note:</strong> By default, the <code>go</code> command downloads and
|
||||
authenticates modules using the Go module mirror and Go checksum database
|
||||
run by Google. <a href="/dl">Learn more.</a>
|
||||
</aside>
|
||||
<h2 id="install">2. Go install.</h2>
|
||||
|
||||
<h2 id="install">Go installation</h2>
|
||||
<p>
|
||||
Select the tab for your computer's operating system below, then follow its
|
||||
installation instructions.
|
||||
|
|
@ -51,6 +42,7 @@
|
|||
class="TabSection-tab active"
|
||||
>
|
||||
Linux
|
||||
<img class="TabSection-underline" src="/images/icons/underline.svg" width="51" height="4" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
role="tab"
|
||||
|
|
@ -61,6 +53,7 @@
|
|||
class="TabSection-tab"
|
||||
>
|
||||
Mac
|
||||
<img class="TabSection-underline" src="/images/icons/underline.svg" width="51" height="4" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
role="tab"
|
||||
|
|
@ -71,6 +64,7 @@
|
|||
class="TabSection-tab"
|
||||
>
|
||||
Windows
|
||||
<img class="TabSection-underline" src="/images/icons/underline.svg" width="51" height="4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -211,9 +205,9 @@
|
|||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="code">3. Go code.</h2>
|
||||
<p>
|
||||
You're set up! Visit the
|
||||
<h2 id="code">You're all set!</h2>
|
||||
<p class="DocInstall-footer">
|
||||
Visit the
|
||||
<a href="tutorial/getting-started.html">Getting Started tutorial</a> to write
|
||||
some simple Go code. It takes about 10 minutes to complete.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="14" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.992 12.992V12c.619 0 1.088-.059 1.408-.176.256-.085.427-.213.512-.384.053-.096.08-.245.08-.448H.496L0 10.496v-10L.496 0h12.992L14 .496v9.248l-1.008-1.008V.992h-12V10H6.72l-.496.496 2.496 2.496H2.992Zm7.856 0 2.512-2.496-.72-.704-1.648 1.664V4.992H10v6.448L8.352 9.792l-.704.704 2.496 2.496h.704Z" fill="#6C7075"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 406 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="51" height="4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 0 1 4-4h43a4 4 0 0 1 4 4H0Z" fill="#007F9F"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 145 B |
Загрузка…
Ссылка в новой задаче