scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

FIx layout problems (#1380)

Browse source 
* removed white-space: no wrap to let buttons flow in Cards section
* Fix download link (download should be part of the link)
* Set the size of the icons to fix alignment
This commit is contained in:
chrisgarrity 2017-06-27 16:27:07 -04:00 committed by GitHub
parent 970db19b44
commit 022d2dd506
3 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/tips/l10n.json
View file

@ -12,7 +12,7 @@
"tips.starterProjectsBody": "You can play with Starter Projects to get ideas for making your own projects.",
"tips.starterProjectsPlay": "Play with Starter Projects",
"tips.offlineEditorHeader": "Offline Editor",
"tips.offlineEditorBody": "To create projects without an Internet connection, you can download the <a href=\"/download\">offline editor</a>.",
"tips.offlineEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download the offline editor</a>.",
"tips.questionsHeader": "Questions",
"tips.questionsBody": "Have more questions? See the <a href=\"/info/faq\">Frequently Asked Questions</a> or visit the <a href=\"/discuss/7/\">Help with Scripts Forum</a>.",
"ttt.tutorial": "Tutorial",

12
src/views/tips/tips.jsx
View file

@ -102,7 +102,7 @@ var Tips = injectIntl(React.createClass({
<p>
<FormattedHTMLMessage id="tips.cardsBody"/>
</p>
<p>
<p className="tips-cards-buttons">
<a href={formatMessage({id: 'cards.ScratchCardsAllLink'})}>
<Button className="tips-button">
<FormattedMessage id="tips.cardsDownload"/>
@ -157,7 +157,10 @@ var Tips = injectIntl(React.createClass({
className="tips-info-section mod-align-top"
>
<div className="tips-info-body mod-narrow">
<img src="/images/tips/download-icon.svg"/>
<img
src="/images/tips/download-icon.svg"
className="tips-icon"
/>
<h3>
<FormattedMessage id="tips.offlineEditorHeader"/>
</h3>
@ -166,7 +169,10 @@ var Tips = injectIntl(React.createClass({
</p>
</div>
<div className="tips-info-body mod-narrow">
<img src="/images/tips/question-icon.svg"/>
<img
src="/images/tips/question-icon.svg"
className="tips-icon"
/>
<h3>
<FormattedMessage id="tips.questionsHeader"/>
</h3>

13
src/views/tips/tips.scss
View file

@ -74,6 +74,15 @@ $darken-button: rgba(0, 0, 0, .1);
text-align: left;
}
.tips-cards-buttons {
a {
white-space: normal;
}
}
img.tips-icon {
height: 1.75rem;
}
//4 columns
@media only screen and (max-width: $mobile - 1) {
@ -171,6 +180,10 @@ $darken-button: rgba(0, 0, 0, .1);
max-width: $cols4;
}
.tips-button {
width: 100%;
}
img.mod-flow-left {
transform: translate(-1*$cols2);
}