Merge branch 'develop' for release v1.1.22

config/demo-staging.json

@@ -1,6 +1,6 @@
 {
     "useStrict"    : "use strict",
-    "apiUrl"       : "http://api.demo.staging.ottemo.io",
-    "mediaPath"    : "http://demo.staging.ottemo.io/media/",
+    "apiUrl"       : "https://api.demo.staging.ottemo.io",
+    "mediaPath"    : "https://demo.staging.ottemo.io/media/",
     "itemsPerPage" : "15"
 }

config/dev.json

@@ -1,6 +1,6 @@
 {
     "useStrict"    : "use strict",
-    "apiUrl"       : "http://api.dev.ottemo.io",
-    "mediaPath"    : "http://dev.ottemo.io/media/",
+    "apiUrl"       : "https://api.dev.ottemo.io",
+    "mediaPath"    : "https://dev.ottemo.io/media/",
     "itemsPerPage" : "15"
 }

config/kg-staging.json

@@ -1,6 +1,6 @@
 {
     "useStrict"    : "use strict",
-    "apiUrl"       : "http://api.kg.staging.ottemo.io",
-    "mediaPath"    : "http://kg.staging.ottemo.io/media/",
+    "apiUrl"       : "https://api.kg.staging.ottemo.io",
+    "mediaPath"    : "https://kg.staging.ottemo.io/media/",
     "itemsPerPage" : "15"
 }

config/mp-staging.json

@@ -1,6 +1,6 @@
 {
     "useStrict"    : "use strict",
-    "apiUrl"       : "http://api.mp.staging.ottemo.io",
-    "mediaPath"    : "http://mp.staging.ottemo.io/media/",
+    "apiUrl"       : "https://api.mp.staging.ottemo.io",
+    "mediaPath"    : "https://mp.staging.ottemo.io/media/",
     "itemsPerPage" : "15"
-}
+}

config/rk-staging.json

@@ -1,7 +1,7 @@
 {
     "useStrict"    : "use strict",
-    "apiUrl"       : "http://api.rk.staging.ottemo.io",
-    "mediaPath"    : "http://rk.staging.ottemo.io/media/",
+    "apiUrl"       : "https://api.rk.staging.ottemo.io",
+    "mediaPath"    : "https://rk.staging.ottemo.io/media/",
     "itemsPerPage" : "15"
 }
 

config/sb-prod.json

@@ -0,0 +1,6 @@
+{
+    "useStrict"    : "use strict",
+    "apiUrl"       : "https://api.mystembox.com",
+    "mediaPath"    : "https://mystembox.com/media/",
+    "itemsPerPage" : "15"
+}

config/sb-staging.json

@@ -0,0 +1,6 @@
+{
+    "useStrict"    : "use strict",
+    "apiUrl"       : "https://api.sb.staging.ottemo.io",
+    "mediaPath"    : "https://sb.staging.ottemo.io/media/",
+    "itemsPerPage" : "15"
+}

config/scs-prod.json

@@ -0,0 +1,6 @@
+{
+    "useStrict"    : "use strict",
+    "apiUrl"       : "https://api.southcoastswords.com",
+    "mediaPath"    : "https://southcoastswords.com/media/",
+    "itemsPerPage" : "15"
+}

config/scs-staging.json

@@ -0,0 +1,6 @@
+{
+    "useStrict"    : "use strict",
+    "apiUrl"       : "https://api.scs.staging.ottemo.io",
+    "mediaPath"    : "https://scs.staging.ottemo.io/media/",
+    "itemsPerPage" : "15"
+}

deploy.sh

@@ -23,7 +23,11 @@ if [ "$BRANCH" == 'develop'  ]; then
     elif [ "$REMOTE_HOST" == 'demo.staging.ottemo.io' ]; then
         HOST=demo-staging
     elif [ "$REMOTE_HOST" == 'mp.staging.ottemo.io' ]; then
-        HOST=mp-staging    
+        HOST=mp-staging
+    elif [ "$REMOTE_HOST" == 'sb.staging.ottemo.io' ]; then
+        HOST=sb-staging
+    elif [ "$REMOTE_HOST" == 'scs.staging.ottemo.io' ]; then
+        HOST=scs-staging   
     fi
     # gulp build on remote host
     ssh ottemo@$REMOTE_HOST "cd $SRCDIR && npm install && gulp build --env=staging --config=${HOST}"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashboard",
-  "version": "1.1.16",
+  "version": "1.1.22",
   "description": "Ottemo Administration Tool",
   "main": "gulpfile.js",
   "repository": {

shippable.yml

@@ -25,6 +25,8 @@ after_success:
     - REMOTE_HOST=rk.staging.ottemo.io bash deploy.sh
     - REMOTE_HOST=demo.staging.ottemo.io bash deploy.sh
     - REMOTE_HOST=mp.staging.ottemo.io bash deploy.sh
+    - REMOTE_HOST=sb.staging.ottemo.io bash deploy.sh
+    - REMOTE_HOST=scs.staging.ottemo.io bash deploy.sh
     - python slack_notifier.py --org $SLACK_ORG --project $PROJECT --token $SLACK_TOKEN -s
 
 notifications:

src/app/_styles/bootstrap/_variables.scss

@@ -353,7 +353,7 @@ $container-lg:                 $container-large-desktop !default;
 //##
 
 // Basics of a navbar
-$navbar-height:                    60px !default;
+$navbar-height:                    47px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
 $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;

src/app/_styles/components/navigation.scss

@@ -23,24 +23,30 @@ body {
   width: 100%;
 }
 
+// xs navbar
+.navbar-default .navbar-nav {
+  float: right;
+  margin: 4px -15px;
+  @media (min-width: $screen-sm-min) {
+    margin: 0;
+  }
+}
 .navbar-brand {
   font-size: 22px;
 
   > img {
     display: inline-block;
-    height: 20px;
-    vertical-align: top;
-    position: relative;
-    top: -2px;
-    margin-right: 10px;
+    margin: -2px 2px 0 0;
+    width: 21px;
   }
 }
 
+// real menu, in sidebar
 .nav-menu {
   position: fixed;
   right: -$nav-width;
   top: 0;
-
+  z-index: 1001;
   width: $nav-width;
   height: 100%;
 
@@ -62,7 +68,6 @@ body {
   }
 
   &.nav-menu--active {
-    z-index: 20;
     right:0;
     -webkit-transition: all 0.4s ease;
     transition: all 0.4s ease;
@@ -73,16 +78,6 @@ body {
     left:0;
     right: auto;
   }
-
-  @media (min-width: $nav-break) and (min-height: 570px) {
-    .navbar-user {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      border-bottom: 0;
-      border-top: 1px #343438 solid;
-    }
-  }
 }
 
 .nav-menu {
@@ -91,7 +86,7 @@ body {
     padding: 0;
   }
 
-  a {
+  .menu-link {
     display: block;
     line-height: 1;
     font-size: 16px;
@@ -101,32 +96,14 @@ body {
     padding: 15px 0px 15px 15px;
     border-bottom: 1px #343438 solid;
     position: relative;
-    transition: all 0.4s ease;
 
     &:hover {
       background: $navbar-default-link-hover-bg;
       color: $navbar-default-link-hover-color;
-      transition: all 0.4s ease;
     }
     &.active {
       background: $navbar-default-link-active-bg;
       color: $navbar-default-link-active-color;
-      transition: all 0.4s ease;
-    }
-  }
-
-
-  .navbar-branding {
-    height: 59px;
-    line-height: 59px;
-    padding: 1px 0 0 15px;
-    font-size: 22px;
-    color: #fff;
-
-    img {
-      width: 20px;
-      margin-right: 10px;
-      vertical-align: baseline;
     }
   }
 
@@ -139,6 +116,49 @@ body {
     right: 0;
   }
 }
+.menu-item__user {
+  .fa {
+    margin-top: -5px;
+    margin-right: 2px;
+  }
+  .branding {
+    font-size: 22px;
+    color: #fff;
+  }
+  .fa-angle-down {
+    font-size: 14px;
+    margin-left: 3px;
+    color: #98978B;
+  }
+  .user-name {
+    margin-top: 5px;
+    font-size: 14px;
+  }
+}
+.user-menu-dropdown {
+  z-index: 1002;
+  margin-left: 12px;
+  margin-top: -10px;
+  border-color: #343438;
+  overflow: hidden; // prevent :hover bg from ruining border-radius
+  width: 250px;
+
+  .menu-header {
+    padding: 3px 20px;
+    img {
+      float: left;
+      margin: 0 12px 0 0;
+    }
+    div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .divider {
+    margin: 3px 0;
+  }
+}
 
 .nav-menu {
   .sub-menu {
@@ -147,16 +167,11 @@ body {
     overflow: hidden;
     transition: max-height .5s;
 
-    a {
+    .menu-link {
       padding-left: 55px;
     }
   }
-  .open {
-    a {
-      background: $navbar-default-link-active-bg;
-    }
-    .sub-menu {
-      max-height: 400px;
-    }
+  .open .sub-menu {
+    max-height: 400px; // 8 submenu items, hopefully pretty safe
   }
-}
+}

src/app/_styles/components/tables.scss

@@ -11,3 +11,25 @@
 .th-clickable {
     cursor: pointer;
 }
+
+// Shadow hinting for responsive tables
+// https://github.com/iKristjan/bootstrap-responsive-table-scrolling-shadows/blob/master/bootstrap-responsive-table-scrolling-shadows.css
+.table-responsive {
+  background:
+    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
+    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
+  background-color: white;
+  background-repeat: no-repeat;
+  background-size: 10px 100%;
+  margin-bottom: 15px;
+}
+
+.table-responsive > .table {
+  background:
+    linear-gradient(to right, white 30%, rgba(255,255,255,0)),
+    linear-gradient(to left, white 30%, rgba(255,255,255,0)) 100% 0;
+  background-size: 50px 100%;
+  background-repeat: no-repeat;
+  max-width: none;
+  margin-bottom: 0;
+}