Merge pull request #134 from CodeNow/fix-error-overflow

Fix error overflow
CodeNow · Aug 12, 2016 · 4e6d541 · 4e6d541
2 parents 37b3412 + 4cc9df8
commit 4e6d541
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/src/html/private/preview-pricing/pricing-hero.hbs b/src/html/private/preview-pricing/pricing-hero.hbs
@@ -49,7 +49,7 @@
             <use xlink:href="#icons-chevron-right">
           </svg>
           <p class="weight-strong shrink">Enterprise</p>
-          <div class="grid-block shrink vertical price-wrapper">
+          <div class="grid-block vertical price-wrapper">
             <input class="grid-block shrink text-center input input-sm input-validate pristine" placeholder="Name" name="name" required>
             <input class="grid-block shrink text-center input input-sm input-validate pristine" placeholder="Work email" name="email" type="email" required>
             <p class="small text-gray text-center weight-light">No spam — we promise!</p>

diff --git a/src/js/signup.js b/src/js/signup.js
@@ -219,14 +219,15 @@ function submitForm(e) {
 function sundipValidation(resultMessage, form, formName) {
   var prevError = form.getElementsByClassName('red')[0];
   var error = document.createElement('small');
+  var submitButton = form.getElementsByTagName('button')[0];
 
   if (prevError) {
     prevError.parentNode.removeChild(prevError);
   }
 
-  error.classList.add('small','red','text-center');
+  error.classList.add('popover', 'bottom', 'in', 'small','red','text-center');
   error.innerHTML = resultMessage;
-  form.appendChild(error);
+  submitButton.appendChild(error);
 
   analytics.ready(function() {
     analytics.track('Error ' + formName + '-list form', {error: resultMessage, clientId: ga.getAll()[0].get('clientId')});

diff --git a/src/styles/components/popover.scss b/src/styles/components/popover.scss
@@ -90,6 +90,13 @@
   visibility: hidden;
   z-index: 100;
 
+  &.in {
+    opacity: 1;
+    transform: scale3d(1,1,1) translate3d(-50%,0,0);
+    transition: all .15s ease-in-out;
+    visibility: visible;
+  }
+
   &.bottom {
     box-shadow: 0 1px 3px rgba($black,.1);
     top: calc(100% + 12px);

diff --git a/src/styles/pricing/pricing-hero.scss b/src/styles/pricing/pricing-hero.scss
@@ -113,7 +113,7 @@
   &.form {
 
     .price-wrapper {
-      margin-bottom: 11px;
+      margin-bottom: 20px;
       padding-top: 20px;
     }
 
@@ -137,16 +137,16 @@
       }
     }
 
-    .divider {
-      background: $gray-lightest;
-      height: 1px;
-      margin: auto 0 20px;
-      width: 100%;
-    }
-
     .input {
       margin-bottom: 10px;
     }
+
+    .popover {
+      line-height: 1.4;
+      white-space: normal;
+      width: 100%;
+      word-wrap: break-word;
+    }
   }
 
   .sup {