[torbutton/master] Bug 25126: Make about:tor layout responsive
commit fb8c46b3fb3e89b0fd182f87ba3139f5b31ad186 Author: Igor Oliveira <igt0@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; } +@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; + } +} + +@media only screen and (max-width : 436px) { + .searchbox form { + width: auto; + } + + #sx { + width: calc(100% - 46px); + } +}
participants (1)
-
gk＠torproject.org