From 3417095768719fb75e0290b2891629676038aa4a Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Fri, 20 Feb 2015 12:07:48 +0100
Subject: [PATCH] add transparent overlay to feedback popup

---
 app/styles/app/_mixins/vars.sass |  2 ++
 app/styles/app/charm.sass        | 29 ++++++++++++++++++++++-------
 app/styles/app/top.sass          | 12 +++++++-----
 vendor/charmscout.js             |  9 +++++----
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass
index 8a49e900..2c12db49 100644
--- a/app/styles/app/_mixins/vars.sass
+++ b/app/styles/app/_mixins/vars.sass
@@ -7,6 +7,7 @@ $logo-red: #dc4136
 
 $topbar-bg: $blue-grey
 $topbar-bg-darker: #31363d
+$topbar-height: 55px
 
 $main-repo-link-color: #50555b
 $main-repo-hover-color: #607a84
@@ -17,6 +18,7 @@ $travis-lint-bg: #fafafa
 $left-bg: $light-gray
 $right-bg: $light-gray
 
+
 // dashboard
 $pass-color: #3ba85d
 $fail-color: #d04729
diff --git a/app/styles/app/charm.sass b/app/styles/app/charm.sass
index 84931d4e..2b8a89d2 100644
--- a/app/styles/app/charm.sass
+++ b/app/styles/app/charm.sass
@@ -24,13 +24,13 @@
   color: #a2afb3
   text-transform: uppercase
   box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15)
-  z-index: 999
+  z-index: 89
   &.hidden
     display: none
 
 .feedback-button:hover
   // transform: rotate(90deg) translateY(-130%)
-  transform: translateY(0)
+  transform: translateY(5%)
 
 .feedback-popup
   position: fixed
@@ -41,13 +41,13 @@
   padding: 1em 1.3em
   background-color: #ffffff
   border-radius: 5px
-  z-index: 999
+  z-index: 85
   box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15)
   h1
     margin: 0 0 .4em
     padding-left: .4em
     color: #347389
-    font-size: 20px
+    font-size: 22px
   textarea
     box-sizing: border-box
     display: block
@@ -57,7 +57,7 @@
     padding: .5em .6em
     resize: vertical
     background-color: #f4f3eb
-    font-size: 15px
+    font-size: 16px
     color: #7d7e80
     border: none
     font-family: $font-family-sans-serif
@@ -66,7 +66,7 @@
     padding: .3em .7em
     background-color: #37a766
     color: $white
-    font-size: 15px
+    font-size: 16px
     border: none
     border-radius: 4px
     font-family: $font-family-sans-serif
@@ -76,7 +76,7 @@
     margin: 0.3em 0 0
   a
     color: #7d7e80
-    font-size: 15px
+    font-size: 16px
     text-decoration: none
   a:hover
     text-decoration: underline
@@ -84,6 +84,21 @@
   .closed &
     display: none
 
+.feedback-overlay
+  display: block
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background-color: rgba(#D5D5CE, 0.7)
+  z-index: 84
+  .closed &
+    display: none
+
+
 #CHARM_FORM_TARGET
   display: none
 
diff --git a/app/styles/app/top.sass b/app/styles/app/top.sass
index d320186d..2b21e1da 100644
--- a/app/styles/app/top.sass
+++ b/app/styles/app/top.sass
@@ -1,5 +1,7 @@
 
 #top
+  position: relative
+  z-index: 999
   font-size: $font-size-normal
   background  : $topbar-bg
 
@@ -7,7 +9,7 @@
     position: relative
     float        : left
     width        : 123px
-    height       : 55px
+    height       : $topbar-height
     margin-right : 14px
     z-index: 999
     text-indent  : -9999px
@@ -51,13 +53,13 @@
 
   @media #{$medium-up}
     overflow: visible
-    height: 55px
+    height: $topbar-height
 
     #navigation
       height: auto
       overflow: visible
     ul
-      line-height: 55px
+      line-height: $topbar-height
       position: relative
     li
       display: inline-block
@@ -69,7 +71,7 @@
 
   .nav-burger
     overflow: auto
-    height: 55px
+    height: $topbar-height
     @media #{$medium-up}
       display: none
 
@@ -206,7 +208,7 @@
 // #user ul li ul
 //   padding    : 0
 //   position   : absolute
-//   top        : 55px
+//   top        : $topbar-height
 //   right      : 0
 //   width      : 150px
 //   display    : none
diff --git a/vendor/charmscout.js b/vendor/charmscout.js
index 36953230..27a4c815 100644
--- a/vendor/charmscout.js
+++ b/vendor/charmscout.js
@@ -15,7 +15,8 @@ window.bootstrapCharm = function(){
       '<input id="CHARM_SUBMIT" type="submit" class="submit" value="Send Feedback">' +
       '<a href="#" title="" id="CHARM_CANCEL">cancel</a>' +
       '</form>' +
-      '</div>',
+      '</div>' +
+      '<div class="feedback-overlay"></div>',
     DEFAULTS = {
       text: '',
       submit: 'Send feedback',
@@ -95,7 +96,7 @@ window.bootstrapCharm = function(){
     if(!box) {
       box = document.createElement('div');
       box.id = "CHARM_BOX";
-      box.className = 'feedback-popup';
+      //box.className = 'feedback-popup';
       box.innerHTML = BOX;
       document.body.appendChild(box);
       
@@ -137,7 +138,7 @@ window.bootstrapCharm = function(){
       setTimeout(function(){
         var scrollTop = document.body.scrollTop;
         
-        box.className = 'feedback-popup open' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
+        box.className = 'open' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
         $('CHARM_FORM').onsubmit = function(){ 
           var ok = !($('CHARM_COMMENT').value.replace(/^\s+/, '').replace(/\s+$/, '') == "");
           if(ok){
@@ -161,7 +162,7 @@ window.bootstrapCharm = function(){
       return;
     }
     box.offsetLeft;
-    box.className = 'feedback-popup open' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
+    box.className = 'open' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
     if($('CHARM_EMAIL'))
       $('CHARM_EMAIL').focus();
     else