From 17b1d031bb64d4c4ad38ab35a1730cda18ac0664 Mon Sep 17 00:00:00 2001 From: Igor Oliveira Date: Wed, 28 Feb 2018 19:31:50 -0300 Subject: [PATCH] bug 25126: Make about:tor layout responsive Use flexbox and media queries to make the layout responsive. For small and medium break points, remove the tor status image since there isn't enough space. --- src/chrome/content/aboutTor/aboutTor.xhtml | 144 ++++++++++----------- src/chrome/skin/aboutTor.css | 79 ++++++----- 2 files changed, 121 insertions(+), 102 deletions(-) diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml index 97e5c970..54aad379 100644 --- a/src/chrome/content/aboutTor/aboutTor.xhtml +++ b/src/chrome/content/aboutTor/aboutTor.xhtml @@ -31,87 +31,85 @@ window.addEventListener("pageshow", function() { -
-
-
-
-

&aboutTor.success.label;

-
-

&aboutTor.success3.label;

-
-
- &aboutTor.check.label; +
+
+
+
+
+

&aboutTor.success.label;

+
+

&aboutTor.success3.label;

+
+ +
+
+

&aboutTor.failure.label;

+
+

&aboutTor.failure2.label;

+
-
-
-

&aboutTor.failure.label;

-
-

&aboutTor.failure2.label;

-
-
-
-
-

&aboutTor.outOfDateTorOn.label;

-

&aboutTor.outOfDateTorOff.label;

-

&aboutTor.outOfDate2.label;

+
+
+

&aboutTor.outOfDateTorOn.label;

+

&aboutTor.outOfDateTorOff.label;

+

&aboutTor.outOfDate2.label;

-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
- +
+ +
+
+ +
+ +
+

+

- -
-

- -

-
+
-
-
-
-

&aboutTor.whatnextQuestion.label;

-

&aboutTor.whatnextAnswer.label;

- -
+
+
+

&aboutTor.whatnextQuestion.label;

+

&aboutTor.whatnextAnswer.label;

+ +
+
+

&aboutTor.helpInfo1.label;

+

&aboutTor.helpInfo2.label;

+ +
+
-
-

&aboutTor.helpInfo1.label;

-

&aboutTor.helpInfo2.label;

- +
+

&aboutTor.footer.label; + &aboutTor.learnMore.label;

-
- -
-

&aboutTor.footer.label; -&aboutTor.learnMore.label;

-
- diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css index 2f801363..4205fa53 100644 --- a/src/chrome/skin/aboutTor.css +++ b/src/chrome/skin/aboutTor.css @@ -11,8 +11,6 @@ } body { - min-width: 920px; - max-width: 920px; width: 100%; height: 100%; margin: 0px auto; @@ -27,11 +25,11 @@ body { } body { - background-image: linear-gradient(to bottom, #ffffff, #ffffff 10%, #dddddd 50%, #dddddd); + background-image: -moz-linear-gradient(top, #ffffff, #ffffff 10%, #dddddd 50%, #dddddd); } body[toron] { - background-image: linear-gradient(to bottom, #ffffff, #ffffff 10%, #d5ffd5 50%, #d5ffd5); + background-image: -moz-linear-gradient(top, #ffffff, #ffffff 10%, #d5ffd5 50%, #d5ffd5); } /* Hide the entire document by default to avoid showing the incorrect @@ -43,8 +41,14 @@ body:not([initialized]) { display: none; } +.container { + margin: 40px 20px; + display: flex; + flex-direction: column; +} + #torstatus-version { - position: fixed; + position: absolute; top: 6px; right: 6px; height: 30px; @@ -59,8 +63,9 @@ body[toron] #torstatus-image { } #torstatus-image { + display: none; position: absolute; - left: 70px; + left: 85px; height: 128px; width: 128px; background-image: url('chrome://torbutton/content/aboutTor/tor-off.png'); @@ -116,15 +121,13 @@ a:hover { #torstatus { position: relative; /* needed for torstatus-image positioning */ - max-width: 620px; + display: flex; + justify-content: center; min-height: 148px; - padding: 15px 128px 0px 128px; - margin: 20px auto 0px auto; } -.top { +.torstatus-container { text-align: center; - white-space: nowrap; } body[toron][torNeedsUpdate] .hideIfTBBNeedsUpdate, @@ -183,28 +186,22 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { } #middle { - display: table; - width: 904px; /* 920px - (2 * 8px extra side margin) */ - margin: 40px auto 10px auto; - border-spacing: 100px 0px; - border-collapse: separate; - text-align: center; + display: flex; + flex-flow: row wrap; font-size: 1.6em; + justify-content: space-evenly; + margin-top: 40px; } -.bubbleRow { - display: table-row; -} - -.bubbleRow div.bubble { - display: table-cell; - width: 50%; - height: 100%; +.bubble { + width: 242px; + height: 176.4px; padding: 20px 30px; color: #3B503C; background-color: #FFFFFF; border: none; border-radius: 16px; + margin-bottom: 40px; text-align: start; vertical-align: top; } @@ -218,7 +215,7 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { padding: 5px 0 0 22px; } -#middle ul:dir(rtl) { +#middle ul:-moz-dir(rtl) { padding: 5px 22px 0 0; } @@ -227,15 +224,13 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { } #bottom { - margin: 30px 0px 0px 0px; padding-bottom: 40px; - float: left; } #bottom p { font-size: 1.6em; text-align: start; - margin: 10px 125px 0px 125px; + margin: auto; } #bottom a { @@ -310,3 +305,29 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { font-size: 18px; } +@media only screen and (min-width : 820px) { + .container { + margin: auto; + margin-top: 40px; + max-width: 920px; + min-width: 920px; + } + + #torstatus-image { + display: block; + } + + #bottom p { + margin: 10px 125px 0px 125px; + } +} + +@media only screen and (max-width : 436px) { + .searchbox form { + width: auto; + } + + #sx { + width: calc(100% - 46px); + } +}