Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add version toggle to download page #357

Merged
merged 4 commits into from
Nov 17, 2015
Merged

Add version toggle to download page #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7939c74
Add version toggle box to the download page
rnsloan Nov 13, 2015
a392cec
remove top left menu from download pages
rnsloan Nov 13, 2015
8fa5ce5
add spacing in toggle box for IE
rnsloan Nov 13, 2015
08ced31
update version toggle colors
rnsloan Nov 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions layouts/css/base.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,9 +156,6 @@ pre
.no-padding
padding 0

.pad-bottom-small
padding-bottom 1em

.highlight-box
background-color #f0f0f0
padding 5px 15px
Expand Down
69 changes: 52 additions & 17 deletions layouts/css/page-modules/_download.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,66 @@
content ""

.download-hero
display table
margin-bottom 1em

ul
width 100%
display flex
list-style none
text-align center

li
display flex
flex-grow 2

li:first-child
flex-basis 130px
flex-grow 1

a
display block
width 100%
padding-top 1em
background $lightgreen

img
display block
margin 0 auto
display table-row

li
width 33%
display table-cell
p
padding-bottom 1em
margin 1em 0 0

a
display block
width 100%
padding-top 1em
background $lightgreen

img
display block
margin 0 auto
a:hover, a:active
background $darkgray
color $node-green

.download-version-toggle
display flex
flex-wrap wrap
width calc(100% - 4px)
border 2px solid $node-green
background $lightgreen

a
margin 2px
padding 5px 2px

a:hover, a:active, a.is-version
color $node-green
background $darkgray

a:hover, a:active
background $darkgray
color $node-green
a.is-version
color $lightgreen
background $node-green

.title
font-size 1.5em
line-height 1

.tag
font-size 0.8em

.download-matrix
margin-bottom 1.5rem
Expand Down Expand Up @@ -100,11 +135,11 @@ td.download-table-last
.download-hero ul
width auto
display block
margin-bottom 1em

li
display block
width 100%
margin-bottom 1em

.download-matrix
display block
Expand Down
10 changes: 1 addition & 9 deletions layouts/download-stable.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,9 @@
<article>
<div class="download-header">
<h1>{{downloads.headline}}</h1>
<ul class="list-divider-pipe">
<li>
<a href="/{{site.locale}}/{{site.download.link}}" title="{{downloads.display-hint}} {{downloads.lts}}">{{downloads.lts}}</a>
</li>
<li>
<a href="/{{site.locale}}/{{site.download.link}}/stable" title="{{downloads.display-hint}} {{downloads.stable}}"><strong>{{downloads.stable}}</strong></a>
</li>
</ul>
</div>

{{> download-matrix version=project.currentVersions.stable}}
{{> download-matrix version=project.currentVersions.stable versionTypeStable="true"}}

<section>
<h2>{{additional.headline}}</h2>
Expand Down
13 changes: 1 addition & 12 deletions layouts/download.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,9 @@
<article>
<div class="download-header">
<h1>{{downloads.headline}}</h1>

{{#if project.currentVersions.stable}}
<ul class="list-divider-pipe">
<li>
<a href="/{{site.locale}}/{{site.download.link}}" title="{{downloads.display-hint}} {{downloads.lts}}"><strong>{{downloads.lts}}</strong></a>
</li>
<li>
<a href="/{{site.locale}}/{{site.download.link}}/stable" title="{{downloads.display-hint}} {{downloads.stable}}">{{downloads.stable}}</a>
</li>
</ul>
{{/if}}
</div>

{{> download-matrix version=project.currentVersions.lts}}
{{> download-matrix version=project.currentVersions.lts versionTypeLts="true"}}

<section>
<h2>{{additional.headline}}</h2>
Expand Down
18 changes: 15 additions & 3 deletions layouts/partials/download-matrix.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,37 @@

<div class="download-hero full-width">
<ul class="no-padding">
<li>
<div class="download-version-toggle">
<a {{#if versionTypeLts}}class="is-version"{{/if}} href="/{{site.locale}}/{{site.download.link}}" title="{{downloads.display-hint}} {{downloads.lts}}">
<div class="title">{{downloads.lts}}</div>
<div class="tag">{{downloads.tagline-lts}}</div>
</a>
<a {{#if versionTypeStable}}class="is-version"{{/if}} href="/{{site.locale}}/{{site.download.link}}/stable" title="{{downloads.display-hint}} {{downloads.stable}}">
<div class="title">{{downloads.stable}}</div>
<div class="tag">{{downloads.tagline-stable}}</div>
</a>
</div>
</li>
<li>
<a href="https://nodejs.org/dist/{{version}}/node-{{version}}-x86.msi" id="windows-downloadbutton" data-version="{{version}}">
<img src="/static/images/platform-icon-win.png" height="50" width="45" alt="">
Windows Installer
<p class="small color-lightgray pad-bottom-small">node-{{version}}-x86.msi</p>
<p class="small color-lightgray">node-{{version}}-x86.msi</p>
</a>
</li>
<li>
<a href="https://nodejs.org/dist/{{version}}/node-{{version}}.pkg">
<img src="/static/images/platform-icon-osx.png" height="50" width="45" alt="">
Macintosh Installer
<p class="small color-lightgray pad-bottom-small">node-{{version}}.pkg</p>
<p class="small color-lightgray">node-{{version}}.pkg</p>
</a>
</li>
<li>
<a href="https://nodejs.org/dist/{{version}}/node-{{version}}.tar.gz">
<img src="/static/images/platform-icon-generic.png" height="50" width="45" alt="">
Source Code
<p class="small color-lightgray pad-bottom-small">node-{{version}}.tar.gz</p>
<p class="small color-lightgray">node-{{version}}.tar.gz</p>
</a>
</li>
</ul>
Expand Down
2 changes: 2 additions & 0 deletions locale/en/download/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ downloads:
headline: Downloads
lts: LTS
stable: Stable
tagline-stable: Latest Features
tagline-lts: Mature and Dependable
display-hint: Display downloads for
intro: >
Download the Node.js source code or a pre-built installer for your platform, and start developing today.
Expand Down
2 changes: 2 additions & 0 deletions locale/en/download/stable.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ downloads:
headline: Downloads
lts: LTS
stable: Stable
tagline-stable: Latest Features
tagline-lts: Mature and Dependable
display-hint: Display downloads for
intro: >
Download the Node.js source code or a pre-built installer for your platform, and start developing today.
Expand Down