Skip to content
GitLab
Commit fb8c46b3 authored by Igor Oliveira's avatar Igor Oliveira Committed by Georg Koppen
Browse files

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.
parent 10606f2c
Hide whitespace changes
Inline Side-by-side
src/chrome/content/aboutTor/aboutTor.xhtml
View file @ fb8c46b3
<?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; &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>
src/chrome/skin/aboutTor.css
View file @ fb8c46b3
/*
* 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);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment