[tbb-commits] [torbutton/master] Bug 25126: Make about:tor layout responsive

gk at torproject.org gk at torproject.org
Thu Apr 5 12:38:00 UTC 2018


commit fb8c46b3fb3e89b0fd182f87ba3139f5b31ad186
Author: Igor Oliveira <igt0 at torproject.org>
Date:   Tue Apr 3 20:15:38 2018 -0300

    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 | 149 +++++++++++++++--------------
 src/chrome/skin/aboutTor.css               |  87 +++++++++++------
 2 files changed, 132 insertions(+), 104 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index 7ae4b8b..0d8f680 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
-   - Copyright (c) 2017, The Tor Project, Inc.
+   - Copyright (c) 2018, The Tor Project, Inc.
    - See LICENSE for licensing information.
    - vim: set sw=2 sts=2 ts=8 et syntax=xml:
   -->
@@ -31,87 +31,88 @@ window.addEventListener("pageshow", function() {
 </script>
 </head>
 <body dir="&locale.dir;">
-<div id="torstatus" class="top">
-  <div id="torstatus-version"/>
-  <div id="torstatus-image"/>
-  <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
-    <h1>&aboutTor.success.label;</h1>
-    <br/>
-    <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
-    <br/>
-    <div style="margin-top: 20px;">
-      <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
-    </div>
-  </div>
-  <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
-    <h1>&aboutTor.failure.label;</h1>
-    <br/>
-    <h2>&aboutTor.failure2.label;</h2>
-  </div>
-</div>
-<div class="top">
   <div class="hideIfTorIsUpToDate">
-    <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
-    <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
-    <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
-
-    <div id="toolbarIconArrowHead" class="arrow"/>
-    <div id="toolbarIconArrowVertExtension" class="arrow"/>
-    <div id="toolbarIconArrowBend" class="arrow"/>
-    <div id="toolbarIconArrowHorzExtension" class="arrow"/>
+      <div id="toolbarIconArrowHead" class="arrow"/>
+      <div id="toolbarIconArrowVertExtension" class="arrow"/>
+      <div id="toolbarIconArrowBend" class="arrow"/>
+      <div id="toolbarIconArrowHorzExtension" class="arrow"/>
   </div>
-</div>
+  <div class="torcontent-container">
+    <div id="torstatus-version"/>
+    <div id="torstatus" class="top">
+      <div id="torstatus-image"/>
+      <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
+        <h1>&aboutTor.success.label;</h1>
+        <br/>
+        <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
+        <br/>
+        <div style="margin-top: 20px;">
+          <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
+        </div>
+      </div>
+      <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
+        <h1>&aboutTor.failure.label;</h1>
+        <br/>
+        <h2>&aboutTor.failure2.label;</h2>
+      </div>
+    </div>
+    <div class="top">
+      <div class="hideIfTorIsUpToDate">
+        <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
+        <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
+        <div>
+          <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
+        </div>
+      </div>
+    </div>
 
-<div class="searchbox hideIfTorOff"> <!-- begin form based search -->
-  <form action="&aboutTor.searchDDGPost.link;" method="post">
-  <div id="sxw">
-    <div id="sbutton">
-      <input name="b" id="sb" value="" title="&aboutTor.search.label;"
-             alt="&aboutTor.search.label;" type="submit"/>
+    <div class="searchbox hideIfTorOff"> <!-- begin form based search -->
+      <form action="&aboutTor.searchDDGPost.link;" method="post">
+      <div id="sxw">
+        <div id="sbutton">
+          <input name="b" id="sb" value="" title="&aboutTor.search.label;"
+                alt="&aboutTor.search.label;" type="submit"/>
+        </div>
+        <input name="q" autocomplete="off" id="sx" type="text"/>
+      </div>
+      <h4 id="searchProviderInfo" />
+      </form>
     </div>
-    <input name="q" autocomplete="off" id="sx" type="text"/>
-  </div>
-  <h4 id="searchProviderInfo" />
-  </form>
-</div>
 
-<div class="hideIfTorOn" style="height:100px"/>
+    <div class="hideIfTorOn" style="height:100px"/>
 
-<div id="middle" class="hideIfTorOff">
-  <div class="bubbleRow">
-    <div class="bubble">
-      <h1>&aboutTor.whatnextQuestion.label;</h1>
-      <p>&aboutTor.whatnextAnswer.label;</p>
-      <ul>
-        <li>
-          <a href="&aboutTor.whatnext.link;">
-            &aboutTor.whatnext.label;
-          </a>
-        </li>
-        <li class="showForManual">
-          <a id="manualLink">
-            &aboutTor.torbrowser_user_manual.label; »
-          </a>
-        </li>
-      </ul>
-    </div>
+    <div id="middle" class="hideIfTorOff">
+        <div class="bubble">
+          <h1>&aboutTor.whatnextQuestion.label;</h1>
+          <p>&aboutTor.whatnextAnswer.label;</p>
+          <ul>
+            <li>
+              <a href="&aboutTor.whatnext.link;">
+                &aboutTor.whatnext.label;
+              </a>
+            </li>
+            <li class="showForManual">
+              <a id="manualLink">
+                &aboutTor.torbrowser_user_manual.label; »
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="bubble">
+          <h1>&aboutTor.helpInfo1.label;</h1>
+          <p>&aboutTor.helpInfo2.label;</p>
+          <ul>
+            <li><a href="&aboutTor.helpInfo3.link;">&aboutTor.helpInfo3.label;</a></li>
+            <li><a href="&aboutTor.helpInfo4.link;">&aboutTor.helpInfo4.label;</a></li>
+            <li><a href="&aboutTor.helpInfo5.link;">&aboutTor.helpInfo5.label;</a></li>
+          </ul>
+        </div>
+    </div> <!-- middle -->
 
-    <div class="bubble">
-      <h1>&aboutTor.helpInfo1.label;</h1>
-      <p>&aboutTor.helpInfo2.label;</p>
-      <ul>
-        <li><a href="&aboutTor.helpInfo3.link;">&aboutTor.helpInfo3.label;</a></li>
-        <li><a href="&aboutTor.helpInfo4.link;">&aboutTor.helpInfo4.label;</a></li>
-        <li><a href="&aboutTor.helpInfo5.link;">&aboutTor.helpInfo5.label;</a></li>
-      </ul>
+    <div id="bottom">
+      <p>&aboutTor.footer.label;
+    <a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
     </div>
   </div>
-</div> <!-- middle -->
-
-<div id="bottom">
-  <p>&aboutTor.footer.label;
-<a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
-</div>
-
 </body>
 </html>
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index c0d2ebc..7ba7e7c 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2017, The Tor Project, Inc.
+ * Copyright (c) 2018, The Tor Project, Inc.
  * See LICENSE for licensing information.
  *
  * vim: set sw=2 sts=2 ts=8 et syntax=css:
@@ -11,8 +11,6 @@
 }
 
 body {
-  min-width: 920px;
-  max-width: 920px;
   width: 100%;
   height: 100%;
   margin: 0px auto;
@@ -43,8 +41,14 @@ body:not([initialized]) {
   display: none;
 }
 
+.torcontent-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,17 +121,19 @@ 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 {
-  text-align: center;
   white-space: nowrap;
 }
 
+.torstatus-container {
+  text-align: center;
+}
+
 body[toron][torNeedsUpdate] .hideIfTBBNeedsUpdate,
 body:not([torNeedsUpdate]) .hideIfTorIsUpToDate {
   display: none;
@@ -145,19 +152,22 @@ body:not([showmanual]) .showForManual {
   display: none;
 }
 
+div.hideIfTorIsUpToDate {
+  display: flex;
+  flex-direction: column;
+}
+
 div.hideIfTorIsUpToDate,
 body .top div.hideIfTorIsUpToDate h1 {
   color: black;
-}
-
-body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
-  margin-left: 30px;
+  text-align: center;
 }
 
 /* Use inline-block for text-oriented elements whose widths need to measured. */
 .torstatus-container *,
 .top div.hideIfTorIsUpToDate h3 {
   display: inline-block;
+  text-align: center;
 }
 
 .top div.hideIfTorOff h1 {
@@ -183,28 +193,21 @@ 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;
   padding: 20px 30px;
   color: #3B503C;
   background-color: #FFFFFF;
   border: none;
   border-radius: 16px;
+  margin-bottom: 40px;
   text-align: start;
   vertical-align: top;
 }
@@ -227,15 +230,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 +311,29 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
   font-size: 18px;
 }
 
+ at media only screen and (min-width : 820px) {
+.torcontent-container {
+    margin: auto;
+    margin-top: 40px;
+    max-width: 920px;
+    min-width: 920px;
+  }
+
+  #torstatus-image {
+    display: block;
+  }
+
+  #bottom p {
+    margin: 10px 125px 0px 125px;
+  }
+}
+
+ at media only screen and (max-width : 436px) {
+  .searchbox form {
+    width: auto;
+  }
+
+  #sx {
+    width: calc(100% - 46px);
+  }
+}



More information about the tbb-commits mailing list