From dbb4fcc8a2782cf84b304c19b27b4b6cf35ca198 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 23 Jun 2017 09:23:24 -0400
Subject: [PATCH] tweak some styling for the download page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Adds the numbers back in above the download steps, and also moves the “note for mac users” down into a callout.
---
src/views/download/download.jsx | 163 +++++++++++++++++--------------
src/views/download/download.scss | 25 +++++
2 files changed, 112 insertions(+), 76 deletions(-)
diff --git a/src/views/download/download.jsx b/src/views/download/download.jsx
index b5d979b0b..8eca5196b 100644
--- a/src/views/download/download.jsx
+++ b/src/views/download/download.jsx
@@ -58,28 +58,25 @@ var Download = React.createClass({
<p className="title-banner-p intro">
<FormattedMessage id='download.intro' />
</p>
- <p className="title-banner-p intro">
- <FormattedHTMLMessage id='download.introMac' />
- </p>
</div>
<div className="band">
<SubNavigation className="inner">
- <a href="#installation">
+ <a href="#installation" className="sub-nav-item">
<li>
<FormattedMessage id='download.installation' />
</li>
</a>
- <a href="#updates">
+ <a href="#updates" className="sub-nav-item">
<li>
<FormattedMessage id='download.updatesTitle' />
</li>
</a>
- <a href="#other">
+ <a href="#other" className="sub-nav-item">
<li>
<FormattedMessage id='download.otherVersionsTitle' />
</li>
</a>
- <a href="#issues">
+ <a href="#issues" className="sub-nav-item">
<li>
<FormattedMessage id='download.knownIssuesTitle' />
</li>
@@ -89,97 +86,111 @@ var Download = React.createClass({
</TitleBanner>
<div className="download-content">
<section id="installation" className="installation">
- <FlexRow className="three-col-row inner">
- <div className="installation-column">
- <h3><FormattedMessage id='download.airTitle' /></h3>
- <p><FormattedHTMLMessage id='download.airBody' /></p>
- <ul className="installation-downloads">
- <li className="installation-downloads-item">
- <FormattedMessage id='download.macOSX' /> -
- {' '}<a href="http://get.adobe.com/air/">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- <li className="installation-downloads-item">
- <FormattedMessage id='download.macOlder' /> -
- {' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- <li className="installation-downloads-item">
- <FormattedMessage id='download.windows' /> -
- {' '}<a href="http://get.adobe.com/air/">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- <li className="installation-downloads-item">
- <FormattedMessage id='download.linux' /> -
- {' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- </ul>
- </div>
- <div className="installation-column">
- <h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
- <p><FormattedMessage id='download.offlineEditorBody' /></p>
- {downloadUrls ? [
+ <div className="inner">
+ <p className="callout">
+ <FormattedHTMLMessage id='download.introMac' />
+ </p>
+ <FlexRow className="three-col-row">
+ <div className="installation-column">
+ <div className="installation-column-number">
+ <h2 className="installation-column-number-text">{'1'}</h2>
+ </div>
+ <h3><FormattedMessage id='download.airTitle' /></h3>
+ <p><FormattedHTMLMessage id='download.airBody' /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> -
- {' '}<a href={downloadUrls.mac}>
+ {' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.macOlder' /> -
- {' '}<a href={downloadUrls.mac105}>
+ {' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.windows' /> -
- {' '}<a href={downloadUrls.windows}>
+ {' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.linux' /> -
- {' '}<a href={downloadUrls.linux}>
+ {' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
<FormattedMessage id='download.download' />
</a>
</li>
</ul>
- ] : []}
- {this.state.swfVersion === -1 ? [
- <p><i><FormattedMessage id='download.notAvailable' /></i></p>
- ] : []}
- </div>
- <div className="installation-column">
- <h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
- <p><FormattedMessage id='download.supportMaterialsBody' /></p>
- <ul className="installation-downloads">
- <li className="installation-downloads-item">
- <FormattedMessage id='download.starterProjects' /> -
- {' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- <li className="installation-downloads-item">
- <FormattedMessage id='download.gettingStarted' /> -
- {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- <li className="installation-downloads-item">
- <FormattedMessage id='download.scratchCards' /> -
- {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
- <FormattedMessage id='download.download' />
- </a>
- </li>
- </ul>
- </div>
- </FlexRow>
+ </div>
+ <div className="installation-column">
+ <div className="installation-column-number">
+ <h2 className="installation-column-number-text">{'2'}</h2>
+ </div>
+ <h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
+ <p><FormattedMessage id='download.offlineEditorBody' /></p>
+ {downloadUrls ? [
+ <ul className="installation-downloads">
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.macOSX' /> -
+ {' '}<a href={downloadUrls.mac}>
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.macOlder' /> -
+ {' '}<a href={downloadUrls.mac105}>
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.windows' /> -
+ {' '}<a href={downloadUrls.windows}>
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.linux' /> -
+ {' '}<a href={downloadUrls.linux}>
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ </ul>
+ ] : []}
+ {this.state.swfVersion === -1 ? [
+ <p><i><FormattedMessage id='download.notAvailable' /></i></p>
+ ] : []}
+ </div>
+ <div className="installation-column">
+ <div className="installation-column-number">
+ <h2 className="installation-column-number-text">{'3'}</h2>
+ </div>
+ <h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
+ <p><FormattedMessage id='download.supportMaterialsBody' /></p>
+ <ul className="installation-downloads">
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.starterProjects' /> -
+ {' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.gettingStarted' /> -
+ {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ <li className="installation-downloads-item">
+ <FormattedMessage id='download.scratchCards' /> -
+ {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
+ <FormattedMessage id='download.download' />
+ </a>
+ </li>
+ </ul>
+ </div>
+ </FlexRow>
+ </div>
</section>
<div className="inner">
<section id="updates">
diff --git a/src/views/download/download.scss b/src/views/download/download.scss
index 7f4d4d7c4..7a82a04ae 100644
--- a/src/views/download/download.scss
+++ b/src/views/download/download.scss
@@ -50,6 +50,10 @@ $developer-spot: $splash-blue;
}
}
+ .sub-nav-item {
+ margin: .5rem;
+ }
+
.download-content {
padding-bottom: 2rem;
}
@@ -65,6 +69,23 @@ $developer-spot: $splash-blue;
.installation-column {
max-width: $cols4;
+ text-align: center;
+ }
+
+ .installation-column-number {
+ margin: 2rem auto;
+ border: 2px solid $active-gray;
+ border-radius: 2rem;
+ box-shadow: 0 0 0 .5rem lighten($ui-blue, 35);
+ background-color: $ui-blue;
+ width: 3.75rem;
+ height: 3.75rem;
+ }
+
+ .installation-column-number-text {
+ text-align: center;
+ line-height: 1.8em;
+ color: $type-white;
}
.installation-downloads {
@@ -75,6 +96,7 @@ $developer-spot: $splash-blue;
.installation-downloads-item {
margin: .25rem;
padding: 0;
+ text-align: center;
}
section {
@@ -91,8 +113,11 @@ $developer-spot: $splash-blue;
max-width: 100%;
}
}
+ }
+ @media only screen and (max-width: $desktop - 1) {
.three-col-row {
+ flex-direction: column;
align-items: center;
}
}