Skip to content
Snippets Groups Projects
Commit 3bf17f3f authored by Kathleen Brade's avatar Kathleen Brade
Browse files

Bug 27301: Improve about:tor behavior and appearance. 

Change TB Manual link to open in a new tab.
Use a dynamic margin between search box and TB Manual link (10% of viewport).
Add more onion circles to improve appearance on wide displays.
parent 36042781
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/chrome/content/aboutTor/aboutTor.xhtml
+ 53
− 1
View file @ 3bf17f3f
......@@ -61,7 +61,7 @@ window.addEventListener("pageshow", function() {
<div id="bottom">
<p class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
<a id="manualLink">&aboutTor.torbrowser_user_manual_link.label;</a></p>
<a id="manualLink" target="_blank">&aboutTor.torbrowser_user_manual_link.label;</a></p>
<p>&aboutTor.tor_mission.label;
<a href="&aboutTor.getInvolved.link;">&aboutTor.getInvolved.label;</a></p>
</div>
......@@ -138,6 +138,26 @@ window.addEventListener("pageshow", function() {
<div class="inner dashed"></div>
<div class="inner dashed"></div>
</div>
<div class="circle dotted"></div>
<div class="circle dotted">
<div class="inner dotted"></div>
<div class="inner dotted"></div>
<div class="inner dotted"></div>
</div>
<div class="circle dashed"></div>
<div class="circle dashed">
<div class="inner dashed"></div>
<div class="inner dashed"></div>
<div class="inner dashed"></div>
</div>
<div class="circle bold"></div>
<div class="circle solid"></div>
</div>
<div class="onion-pattern-row onion-pattern-offset-row">
......@@ -198,6 +218,38 @@ window.addEventListener("pageshow", function() {
</div>
<div class="circle dashed"></div>
<div class="circle solid"></div>
<div class="circle dashed">
<div class="inner dashed"></div>
<div class="inner dashed"></div>
<div class="inner dashed"></div>
</div>
<div class="circle border">
<div class="inner border"></div>
<div class="inner border"></div>
<div class="inner border"></div>
</div>
<div class="circle">
<div class="half solid"></div>
<div class="half solid"></div>
</div>
<div class="circle dotted">
<div class="inner dotted"></div>
<div class="inner dotted"></div>
<div class="inner dotted"></div>
</div>
<div class="circle">
<div class="half solid"></div>
<div class="half dotted"></div>
</div>
<div class="circle dotted"></div>
</div>
</div>
</body>
......
src/chrome/skin/aboutTor.css
+ 3
− 3
View file @ 3bf17f3f
......@@ -119,7 +119,7 @@ body:not([showmanual]) .showForManual {
}
#bottom {
margin-top: 170px;
margin-top: 10vh;
}
#bottom p {
......@@ -196,12 +196,12 @@ body:not([showmanual]) .showForManual {
.onion-pattern-container {
margin: 0px auto;
width: 100%;
max-width: 1624px; /* room for 14 of the widest circles */
max-width: 2200px; /* room for our 20 circles */
overflow: hidden;
}
.onion-pattern-row {
width: 1624px;
width: 2200px;
display: flex;
flex-direction: row;
position: relative;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment