[tor-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 tor-commits
mailing list