Merge branch 'aha-guide-milestone2' of https://github.com/CodeNow/runnable-angular into aha-guide-overview

Author: runnabro

client/assets/styles/scss/components/aha-guide.scss

@@ -3,6 +3,12 @@
   overflow: hidden;
   position: relative;
 
+  &.padding-md {
+    @include media(xxs) {
+      padding: 30px 15px;
+    }
+  }
+
   > .grid-block {
     overflow: visible;
   }
@@ -13,6 +19,7 @@
     height: $input-md;
     left: 15px;
     position: absolute;
+    top: 16px;
     transition: opacity .15s ease-in-out, transform .15s ease-in-out;
     width: $input-md;
 
@@ -37,6 +44,10 @@
     }
   }
 
+  .spinner-wrapper {
+    overflow: hidden;
+  }
+
   .aha-meter {
     background-image: linear-gradient(90deg, $gray-lightest 50%, transparent 50%, transparent), linear-gradient(0deg, $gray-lightest 50%, $gray-lightest 50%, $gray-lightest);
     border-radius: 50%;
@@ -154,6 +165,10 @@
     margin-left: 30px;
     min-width: 30px;
 
+    @include media(xxs) {
+      margin-left: 9px;
+    }
+
     .iconnables {
       height: 100%;
       width: 15px;

client/assets/styles/scss/components/aha-modals.scss

@@ -1,17 +1,22 @@
 .modal-backdrop > .aha-guide {
   animation: fade .15s ease-in-out;
   height: 105px;
-  left: auto;
+  left: 0;
+  margin: 0 auto;
   max-width: calc(100vw - 30px);
   position: absolute;
-  right: auto;
+  right: 0;
   top: 15px;
   width: 450px;
 
   @include media(lg) {
     height: 90px;
   }
 
+  @include media(xxxs) {
+    top: 0;
+  }
+
   &.fixed {
     position: fixed;
     z-index: $z-modal;
@@ -28,6 +33,11 @@
       margin-top: 105px;
     }
   }
+
+  .spinner-wrapper,
+  .aha-meter {
+    top: 24px;
+  }
 }
 
 .modal-dialog > .aha-guide {

client/assets/styles/scss/components/aha-popover.scss

@@ -4,6 +4,23 @@
   top: 66px;
   width: 450px;
 
+  @include media(xxs) {
+    left: 15px;
+    right: 15px;
+    top: 60px;
+    width: calc(100vw - 30px);
+
+    &.right {
+      margin-left: 0;
+    }
+  }
+
+  .arrow {
+    @include media(xxs) {
+      display: none;
+    }
+  }
+
   .popover-content {
     @extend %padding-sm;
   }

client/assets/styles/scss/components/aha-sidebar.scss

@@ -12,6 +12,11 @@
   width: 390px;
   z-index: $z-popover;
 
+  @include media(xxxs) {
+    left: 12px;
+    width: auto;
+  }
+
   &.ng-enter {
     transform: translate3d(100%,0,0);
   }

client/assets/styles/scss/components/help.scss

@@ -21,6 +21,7 @@
   overflow: visible;
   padding: 0 12px;
   position: absolute;
+  top: 0;
 
   &:hover {
     color: lighten($blue,10%);

client/assets/styles/scss/layout/environment-body.scss

@@ -1,6 +1,11 @@
 // environment body
 .environment-body {
   flex: 1 0 auto;
+
+  // aha guide
+  > .modal-dialog {
+    min-width: 0;
+  }
 }
 
 // card grid
@@ -51,7 +56,7 @@
     }
 
     @include media(lg) {
-      flex: 0 0 calc(33.333% - 10px);
+      flex: 0 0 calc(33.333% - 11px);
 
       // on the 6th card + 5 thereafter
       &:nth-child(5n+6) {

client/assets/styles/scss/layout/environment-header.scss

@@ -26,6 +26,13 @@
     display: table;
     margin: 0 auto;
 
+    @include media(xxxs) {
+      font-size: 16px;
+      height: $input-sm;
+      line-height: $input-line-height-sm;
+      margin-top: 3px;
+    }
+
     &.scale {
       animation: scale .4s ease;
     }
@@ -41,6 +48,10 @@
       height: 18px;
       margin: 10px 9px 0 0;
       width: 18px;
+
+      @include media(xxxs) {
+        margin-top: 8px;
+      }
     }
   }
 }

client/assets/styles/scss/modals/modals-server-select.scss

@@ -1,6 +1,10 @@
 .modal-servers,
 .modal-servers .animated-panel {
   min-width: 100%; // fix animated panel container
+
+  @include media(xxxs) {
+    max-width: 100%;
+  }
 }
 
 .modal-server-select {

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

@@ -472,6 +472,10 @@
     &.text-next {
       padding-right: 6px;
       width: 90px;
+
+      @include media(xxxs) {
+        width: auto;
+      }
     }
 
     &.float-right + .float-right {

client/assets/styles/scss/views/views-toolbar.scss

@@ -135,6 +135,7 @@
     color: rgba($orange,.75);
     cursor: default;
     font-family: $sans-serif;
+    padding: 0;
 
     .icons-alert {
       height: 12px;