From e407dd69fb37979000cebb2ef0e84ca108c409c1 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Wed, 8 Jul 2015 16:56:42 +0200
Subject: [PATCH] fix some responsive issues on settings page

---
 app/styles/app/layouts/settings.sass | 45 ++++++++++++++--------------
 app/styles/app/modules/forms.sass    | 14 +++------
 app/styles/app/modules/tooltips.sass | 18 +++++++----
 app/templates/components/ssh-key.hbs |  4 +--
 4 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass
index 911d8e8a..6de7e0f9 100644
--- a/app/styles/app/layouts/settings.sass
+++ b/app/styles/app/layouts/settings.sass
@@ -1,5 +1,4 @@
 
-
 .small-title
   font-size: 18px
   color: $teal-light
@@ -17,8 +16,6 @@
   .small-title
     margin-top: 0
 
-
-
 %settings-list
   padding: 0
   margin: 0
@@ -38,7 +35,7 @@
 
 .settings-input
   display: inline-block
-  margin-right: 1rem
+  margin-right: 1.4rem
   vertical-align: middle
   & + .label
     vertical-align: middle
@@ -47,8 +44,6 @@
     font-size: $font-size-s
     text-align: center
 
-
-
 %settings-row
   padding: .6em .5em
   border-radius: 4px
@@ -64,8 +59,6 @@
   span
     vertical-align: middle
 
-
-
 %settings-name-section
   display: inline-block
   position: relative
@@ -78,17 +71,25 @@
 
 .ssh-key-name
   @extend %settings-name-section
-  width: 40%
+  width: 100%
+  margin-bottom: 1em
   .icon-key
     @extend %icon
     @extend .icon-key
     width: 1.2em
     height: 1.3em
 
+  @media #{$medium-up}
+    width: 40%
+    margin-bottom: 0
+
 .env-var-name
   @extend %settings-name-section
-  width: grid-calc(6, 12)
-
+  width: 100%
+  margin-bottom: 1em
+  @media #{$medium-up}
+    width: grid-calc(6, 12)
+    margin-bottom: 0
 
 
 %settings-value-section
@@ -96,25 +97,23 @@
   vertical-align: middle
   white-space: nowrap
   overflow: hidden
+  width: 76%
+  @media #{$medium-up}
+    width: grid-calc(3, 12)
 
 .ssh-key-value
   @extend %settings-value-section
-  width: 48%
-  text-align: right
-  @media #{$medium-up}
-    width: grid-calc(3, 12)
   .icon-fingerprint
     @extend %icon
     @extend .icon-fingerprint
     width: 1.3em
     height: 1.3em
     margin-right: .5em
+  @media #{$medium-up}
+    text-align: right
 
 .env-var-value
-  display: inline-block
-  width: grid-calc(4, 12)
-  @media #{$medium-up}
-    width: grid-calc(3, 12)
+  @extend %settings-value-section
   input
     display: inline-block
     width: 100%
@@ -130,11 +129,10 @@
       position: 0.4em 0.7em
 
 
-
 %settings-action-section
   display: inline-block
   position: relative
-  width: grid-calc(2, 24)
+  width: 24%
   float: right
   vertical-align: middle
   text-align: center
@@ -146,6 +144,10 @@
   &:hover
     .icon-delete
       @extend .icon-delete-hover
+  @media #{$medium-up}
+    width: grid-calc(4, 24)
+  @media #{$xlarge-up}
+    width: grid-calc(4, 36)
 
 .env-var-action
   @extend %settings-action-section
@@ -164,4 +166,3 @@
     height: 1.3em
     margin: .2em auto 0
 
-
diff --git a/app/styles/app/modules/forms.sass b/app/styles/app/modules/forms.sass
index f86ab0d4..600541f3 100644
--- a/app/styles/app/modules/forms.sass
+++ b/app/styles/app/modules/forms.sass
@@ -45,18 +45,12 @@ textarea
   .form-elem
     display: inline-block
     vertical-align: middle
-
-  .form-elem:first-of-type,
-  .form-elem:nth-of-type(2)
-    width: 49.6%
-  .form-elem:nth-of-type(3)
-    width: 50%
-  .form-elem:last-of-type
-    width: 50%
-    float: right
-    text-align: right
+    width: 100%
+    margin-bottom: 1em
 
   @media #{$medium-up}
+    .form-elem
+      margin-bottom: 0
     .form-elem:first-of-type,
     .form-elem:nth-of-type(2)
       width: 31.5%
diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass
index f0a784a5..e5b88721 100644
--- a/app/styles/app/modules/tooltips.sass
+++ b/app/styles/app/modules/tooltips.sass
@@ -8,9 +8,10 @@
     position: absolute
     top: -3.2em
     width: auto
+    max-width: 8.6em
     height: 1.9em
     margin: auto
-    padding: .2em .8em .3em
+    padding: .2em .4em .3em
     z-index: 5
     background-color: #818383
     border-radius: 4px
@@ -38,14 +39,21 @@
     right: 0
     left: 0
     &:before
-      left: 42%
+      left: 46%
+      @media #{$medium-up}
+        left: 42%
 
-.tooltip--right
+.tooltip--height
   @extend %tooltip
   .tooltip-bubble
-    right: -0.5em
+    right: 0
+    left: 0
+    top: -4em
+    height: 3.2em
     &:before
-      left: 72%
+      left: 46%
+      @media #{$medium-up}
+        left: 42%
 
 .tooltip--jobs
   @extend %tooltip
diff --git a/app/templates/components/ssh-key.hbs b/app/templates/components/ssh-key.hbs
index 987ac2f4..94c5c741 100644
--- a/app/templates/components/ssh-key.hbs
+++ b/app/templates/components/ssh-key.hbs
@@ -25,11 +25,11 @@
     <span>e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a</span>
   </div>
   <div class="ssh-key-action">
-    <div class="tooltip--right">
+    <div class="tooltip--height">
       <a href="#" title="">
         <span class="icon-delete-disabled"></span>
       </a>
-      <div class="tooltip-bubble">Default keys cannot be deleted</div>
+      <div class="tooltip-bubble">Default keys <br>cannot be deleted</div>
     </div>
   </div>
 {{/if}}