FIx layout problems (#1380)

* 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
scratchfoundation · Jun 27, 2017 · 022d2dd · 022d2dd
1 parent 970db19
commit 022d2dd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/views/tips/l10n.json b/src/views/tips/l10n.json
@@ -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",

diff --git a/src/views/tips/tips.jsx b/src/views/tips/tips.jsx
@@ -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>

diff --git a/src/views/tips/tips.scss b/src/views/tips/tips.scss
@@ -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);
     }