Skip to content

Commit

Permalink
bug 25126: Make about:tor layout responsive
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
Igor Oliveira committed Feb 28, 2018
1 parent a35a746 commit 17b1d03
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 102 deletions.
144 changes: 71 additions & 73 deletions src/chrome/content/aboutTor/aboutTor.xhtml
View file
Expand Up @@ -31,87 +31,85 @@ 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 class="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>
<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 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>
</div>
<div id="toolbarIconArrowHead" class="arrow"/>
<div id="toolbarIconArrowVertExtension" class="arrow"/>
<div id="toolbarIconArrowBend" class="arrow"/>
<div id="toolbarIconArrowHorzExtension" class="arrow"/>
</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" href="https://tb-manual.torproject.org/en-US/">
&aboutTor.torbrowser_user_manual.label; &raquo;
</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; &raquo;
</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>
79 changes: 50 additions & 29 deletions src/chrome/skin/aboutTor.css
View file
Expand Up @@ -11,8 +11,6 @@
}

body {
min-width: 920px;
max-width: 920px;
width: 100%;
height: 100%;
margin: 0px auto;
Expand All @@ -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
Expand All @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
}

0 comments on commit 17b1d03

Please sign in to comment.