[tpo/master] Fix UI bugs in /download - tor-commits

26 Apr 2019

commit 091a6d2e3d5b6edbeb8f119343adaaa2387827d7
Author: Antonela hola@antonela.me
Date:   Fri Apr 26 09:06:22 2019 -0300
Fix UI bugs in /download
---
 templates/download-android.html | 50 +++++++++++++++++------------------------
 templates/hero-download.html    | 16 ++++++-------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/templates/download-android.html b/templates/download-android.html
index 6dfea22..8660c9a 100644
--- a/templates/download-android.html
+++ b/templates/download-android.html
@@ -1,6 +1,6 @@
 <div id="android" class="container-fluid bg-darker justify-content-center">
-  <div class="row col-lg-10 mx-auto">
-    <div class="col-lg-8 py-5 mt-5">
+  <div class="row col-xl-10 col-md-12 mx-auto">
+    <div class="col-lg-7 col-md-12 py-5 mt-5">
       <div class="row">
         <div class="oval-2 bg-dark mx-auto">
           <a href="{{ '/download/#android'|url(alt=this.alt) }}">
@@ -9,40 +9,30 @@
         </div>
       </div>
       <div class="row">
-        <h4 class="mx-auto display-4 text-center text-white">{{ _('Get Tor Browser for Android.') }}</h4>
+        <h1 class="mx-auto text-center text-white">{{ _('Get Tor Browser for Android.') }}</h1>
       </div>
       <div class="row">
-        <h3 class="mx-auto defend text-white">{{ _('Protect yourself against tracking, surveillance, and censorship.') }}</h3>
+        <h3 class="mx-auto text-center text-white">{{ _('Protect yourself against tracking, surveillance, and censorship.') }}</h3>
       </div>
-    </div>
-    <div class="d-none d-lg-block col-lg-4">
-      <img class="img-fluid p-5" height="auto" src="{{ 'static/images/tor-browser-mobile-window/png/TBAa-onboarding@2x.png'|asseturl }}">
-    </div>
-  </div>
-  <div class="row col-lg-10 mx-auto">
-    <div class="col-lg-12 py-5 mt-5">
       <div class="row my-5">
-          <div class="col-md-6 col-sm-4 text-center p1">
-            <div class="row">
-              {% set t = bag('versions', 'torbrowser-alpha') %}
-              <a class="btn btn-lg btn-light text-primary py-1 px-4 my-1" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-armv7-multi.apk">{{ _('Download .apk') }}  <small class="badge-pill badge-dark mx-1 nick">arm</small></a>
-              <a class="btn btn-primary btn-sm nick mx-3 my-2" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-armv7-multi.apk.asc"><small>sig</small></a>
-              <a class="btn btn-lg btn-light text-primary py-1 px-4 my-1" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-x86-multi.apk">{{ _('Download .apk') }}  <small class="badge-pill badge-dark mx-1 nick">x86</small></a>
-              <a class="btn btn-primary btn-sm nick mx-3 my-2" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-x86-multi.apk.asc"><small>sig</small></a>
-            </div>
-          </div>
-          <div class="col-md-3 col-sm-4 text-center p1">
-            <a class="btn btn-lg btn-light text-primary py-3 my-1" href="https://play.google.com/store/apps/details?id=org.torproject.torbrowser_alpha">{{ _('Go to Google Play') }}</a>
-          </div>
+        <div class="col-xl-6 mx-auto text-center">
+          {% set t = bag('versions', 'torbrowser-alpha') %}
+          <a class="btn btn-lg btn-light text-primary py-1 px-4 my-2" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-armv7-multi.apk">{{ _('Download .apk') }}  <small class="badge-pill badge-dark mx-1 nick">arm</small></a>
+          <a class="btn btn-primary btn-sm nick mx-3 my-2" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-armv7-multi.apk.asc"><small>sig</small></a>
+          <a class="btn btn-lg btn-light text-primary py-1 px-4 my-2" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-x86-multi.apk">{{ _('Download .apk') }}  <small class="badge-pill badge-dark mx-1 nick">x86</small></a>
+          <a class="btn btn-primary btn-sm nick mx-3 my-2" href="https://dist.torproject.org/torbrowser/{{ t.version }}/tor-browser-{{ t.version }}-android-x86-multi.apk.asc"><small>sig</small></a>
+          <a class="btn btn-block btn-lg btn-light text-primary my-2" href="https://play.google.com/store/apps/details?id=org.torproject.torbrowser_alpha">{{ _('Go to Google Play') }}</a>
           {% from "macros/downloads.html" import render_fdroid %}
-          <div class="col-md-3 col-sm-4 text-center p1">
-            <a class="btn btn-lg btn-light text-primary py-3 my-1 disabled" href="">{{ _('Go to F-droid %s')|format(render_fdroid())|safe }}</a>
-            <!--a class="btn btn-primary btn-sm nick mx-5 my-4" href="#"><small>sig</small></a-->
-          </div>
-      </div>
-      <div class="row">
-        <a class="text-light mx-auto nick" href="https://itunes.apple.com/us/app/onion-browser/id519296448?mt=8">{{ _('Are you a iOS user? We encourage you to try Onion Browser.') }} </a>
+          <a class="btn btn-block btn-lg btn-light text-primary disabled" href="">{{ _('Go to F-droid %s')|format(render_fdroid())|safe }}</a>
+          <!--a class="btn btn-primary btn-sm nick mx-5 my-4" href="#"><small>sig</small></a-->
+        </div>
       </div>
     </div>
+    <div class="d-none d-lg-block col-lg-5 col-md-6">
+      <img class="img-fluid p-5 m-5" height="auto" src="{{ 'static/images/tor-browser-mobile-window/png/TBAa-onboarding@2x.png'|asseturl }}">
+    </div>
+  </div>
+  <div class="row pb-5">
+      <a class="text-light mx-auto text-center nick" href="https://itunes.apple.com/us/app/onion-browser/id519296448?mt=8">{{ _('Are you a iOS user? We encourage you to try Onion Browser.') }} </a>
   </div>
 </div>
diff --git a/templates/hero-download.html b/templates/hero-download.html
index c215de8..7c3744a 100644
--- a/templates/hero-download.html
+++ b/templates/hero-download.html
@@ -1,8 +1,8 @@
 <div class="row">
-  <h1 class="mx-auto display-2 text-white">{{ _('Defend yourself.') }}</h1>
+  <h1 class="mx-auto display-2 text-white text-center">{{ _('Defend yourself.') }}</h1>
 </div>
 <div class="row">
-  <h3 class="mx-auto defend text-white">{{ _('Protect yourself against tracking, surveillance, and censorship.') }}</h3>
+  <h3 class="mx-auto defend text-white text-center">{{ _('Protect yourself against tracking, surveillance, and censorship.') }}</h3>
 </div>
 <div class="row p-5 mx-auto">
   {% for id, item in bag('platforms').items() %}
@@ -29,7 +29,7 @@
         <a class="downloadLink" href="{{ download_link }}">
           <i class="text-light fab fa-{{ id }}-png"></i>
         </a>
-        <p><small><a class="btn btn-primary btn-sm nick mx-5 my-4" href="{{ sig_link }}">sig</a></small></p>
+        <p><small class="float-left"><a class="btn btn-primary btn-sm nick mx-5 my-4" href="{{ sig_link }}">sig</a></small></p>
       </div>
     </div>
   {% endfor %}
@@ -42,10 +42,10 @@
   </div>
 </div>
 <div class="row p-5">
-  <a class="mx-auto text-white py-3" href="{{ 'languages'|url(alt=this.alt) }}"><u>{{ _('Download in another language or platform') }}</u></a>
-  <a class="mx-auto text-white py-3" href="{{ 'alpha'|url(alt=this.alt) }}"><u>{{ _('Advanced Install Options') }}</u></a>
-  <a class="mx-auto text-white py-3" href="{{ 'tor'|url(alt=this.alt) }}"><u>{{ _('Download Tor Source Code') }}</u></a>
+  <a class="mx-auto text-white py-3 text-center" href="{{ 'languages'|url(alt=this.alt) }}"><u>{{ _('Download in another language or platform') }}</u></a>
+  <a class="mx-auto text-white py-3 text-center" href="{{ 'alpha'|url(alt=this.alt) }}"><u>{{ _('Advanced Install Options') }}</u></a>
+  <a class="mx-auto text-white py-3 text-center" href="{{ 'tor'|url(alt=this.alt) }}"><u>{{ _('Download Tor Source Code') }}</u></a>
 </div>
-<div class="hidden-sm row p-5 justify-content-center window-bg">
-  <a class="mx-auto text-white text-center py-5" href="https://blog.torproject.org/category/tags/tor-browser"><u>{{ _('Read the latest release announcements') }}</u></a>
+<div class="hidden-sm row p-md-5 justify-content-center window-bg">
+  <a class="mx-auto text-white text-center py-md-5" href="https://blog.torproject.org/category/tags/tor-browser"><u>{{ _('Read the latest release announcements') }}</u></a>
 </div>

    