Merge pull request #367 from CodeNow/fix-error-modal-overflow

update error modals

Author: SomeKittens

client/assets/styles/scss/index.scss

@@ -66,6 +66,7 @@
 @import "modals/modals-fork";
 @import "modals/modals-rename";
 @import "modals/modals-sidebar";
+@import "modals/modals-error";
 
 // popovers
 @import "popover/popover";

client/assets/styles/scss/modals/modals-environment.scss

@@ -1,7 +1,4 @@
 .modal-environment {
-  max-width: 600px;
-  min-width: 450px;
-  top: 0;
 
   .modal-body {
     border-bottom: 1px solid rgba($black,.1);

client/assets/styles/scss/modals/modals-error.scss

@@ -0,0 +1,6 @@
+.modal-error .well-code {
+  height: auto;
+  line-height: 1.2;
+  max-height: none;
+  padding: 12px;
+}

client/assets/styles/scss/modals/modals-sidebar.scss

@@ -6,7 +6,7 @@
   right: 0;
   top: 0;
   transform: translate3d(0,0,0);
-  transition: transform .2s ease-in;
+  transition: transform .15s ease-in;
   width: 210px;
   z-index: $z-modal-sidebar;
 

client/assets/styles/scss/modals/modals.scss

@@ -2,7 +2,7 @@
 .modal-backdrop {
   align-items: center;
   animation: fade-in .3s ease-in forwards;
-  background: rgba($black,.3);
+  background: rgba($black,.45);
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -28,10 +28,12 @@
   box-shadow: 0 0 30px rgba($black,.12);
   color: $gray-dark;
   margin: auto;
-  min-width: 420px;
+  max-width: 75vw;
+  min-width: 370px;
   position: relative;
 
   @include media(xs) {
+    max-width: calc(100vw - 30px);
     min-width: 360px;
     width: calc(100% - 30px);
   }
@@ -120,6 +122,8 @@
 
 // main.modal-body
 .modal-body {
+  max-height: calc(100vh - 153px);
+  overflow-y: auto;
 
   // validation in modals:
   .validate-wrapper {

client/directives/modals/modalGeneric/viewModalError.jade

@@ -1,13 +1,13 @@
-.modal-dialog(
-  ng-class = "{in: data.in}"
+.modal-dialog.modal-error(
   ng-click = "$event.stopPropagation()"
 )
   header.modal-header
     h1.modal-heading Something went wrong.
   section.modal-body
-    p.modal-description(
+    .modal-description.well.well-code.gray(
       ng-repeat = "error in data.errors track by $index"
     ) {{ error | errJSON }}
+
   footer.modal-footer
     button.btn.white(
       ng-click = "defaultActions.cancel()"