From 26f62668c6659c913546a256aaada780c3f11699 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Mon, 21 Jul 2014 22:49:15 +0200
Subject: [PATCH] Fix add-account styles on mobile

---
 src/sass/components/_popover.scss |  5 +++++
 src/sass/views/_add-account.scss  | 13 +++++++++----
 src/tpl/add-account.html          | 12 ++++++------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/sass/components/_popover.scss b/src/sass/components/_popover.scss
index 233b2f4..33e6c44 100644
--- a/src/sass/components/_popover.scss
+++ b/src/sass/components/_popover.scss
@@ -29,6 +29,11 @@
     &.left {
       margin-left: -10px;
     }
+    &.desktop-only {
+        @include respond-to(mobile) {
+            display: none;
+        }
+    }
     .popover-title {
         margin: 0;
         padding: 8px 14px;
diff --git a/src/sass/views/_add-account.scss b/src/sass/views/_add-account.scss
index b54ced5..efac5d7 100644
--- a/src/sass/views/_add-account.scss
+++ b/src/sass/views/_add-account.scss
@@ -2,6 +2,7 @@
     height: 100%;
     background-color: $color-grey-lightest;
     color: $color-grey-dark;
+    overflow-y: auto;
 
     h1 {
         padding: 60px 0 50px 0;
@@ -9,15 +10,19 @@
         margin: 0;
         font-size: 32px;
         line-height: 64px;
+
+        @include respond-to(mobile) {
+            padding: 30px 0 20px 0;
+        }
     }
 
     ul {
         list-style-type: none;
         width: 320px;
-        margin: 0 auto;
+        margin: 0 auto 30px auto;
         padding: 0;
         border-width: 1px;
-        border-style: solid;                
+        border-style: solid;
         border-color: $color-grey-lighter;
 
         li {
@@ -80,7 +85,7 @@
                         width: 100%;
                     }
                 }
-            }     
+            }
 
             &.tonline {
                 background-color: white;
@@ -92,7 +97,7 @@
                     img {
                         width: 100%;
                     }
-                }           
+                }
             }
 
             &.other {
diff --git a/src/tpl/add-account.html b/src/tpl/add-account.html
index 572a897..4bf1c36 100644
--- a/src/tpl/add-account.html
+++ b/src/tpl/add-account.html
@@ -26,7 +26,7 @@
 </div>
 
 <!-- popovers -->
-<div id="google-info" class="popover right" ng-controller="PopoverCtrl">
+<div id="google-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
   <div class="arrow"></div>
   <div class="popover-title"><b>Google Account</b></div>
   <div class="popover-content">
@@ -36,7 +36,7 @@
   </div>
 </div><!--/.popover-->
 
-<div id="whiteout-info" class="popover right" ng-controller="PopoverCtrl">
+<div id="whiteout-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
   <div class="arrow"></div>
   <div class="popover-title"><b>Whiteout Mailbox (coming soon)</b></div>
   <div class="popover-content">
@@ -46,7 +46,7 @@
   </div>
 </div><!--/.popover-->
 
-<div id="outlook-info" class="popover right" ng-controller="PopoverCtrl">
+<div id="outlook-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
   <div class="arrow"></div>
   <div class="popover-title"><b>Outlook.com Account (coming soon)</b></div>
   <div class="popover-content">
@@ -56,7 +56,7 @@
   </div>
 </div><!--/.popover-->
 
-<div id="yahoo-info" class="popover right" ng-controller="PopoverCtrl">
+<div id="yahoo-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
   <div class="arrow"></div>
   <div class="popover-title"><b>Yahoo Mail (coming soon)</b></div>
   <div class="popover-content">
@@ -66,7 +66,7 @@
   </div>
 </div><!--/.popover-->
 
-<div id="tonline-info" class="popover right" ng-controller="PopoverCtrl">
+<div id="tonline-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
   <div class="arrow"></div>
   <div class="popover-title"><b>T-Online Account (coming soon)</b></div>
   <div class="popover-content">
@@ -76,7 +76,7 @@
   </div>
 </div><!--/.popover-->
 
-<div id="custom-info" class="popover right" ng-controller="PopoverCtrl">
+<div id="custom-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
   <div class="arrow"></div>
   <div class="popover-title"><b>Custom server (coming soon)</b></div>
   <div class="popover-content">