fix(generators/app/templates): modernize environment ribbon (debug)

marviq · Oct 17, 2017 · 066ecad · 066ecad
1 parent 5e44e7e
commit 066ecad
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/generators/app/templates/src/sass/views/_debug.environment-ribbon.sass b/generators/app/templates/src/sass/views/_debug.environment-ribbon.sass
@@ -1,14 +1,14 @@
-$default_textColor:         #6a6340
+$default_textColor:         #6A6340
 $default_gradientHigh:      #BFDC7A
 $default_gradientLow:       #8EBF45
 
 $acceptance_textColor:      #801111
-$acceptance_gradientHigh:   #d64b4b
-$acceptance_gradientLow:    #ab2c2c
+$acceptance_gradientHigh:   #D64B4B
+$acceptance_gradientLow:    #AB2C2C
 
 $testing_textColor:         #807712
-$testing_gradientHigh:      #d4c94c
-$testing_gradientLow:       #aba02c
+$testing_gradientHigh:      #D4C94C
+$testing_gradientLow:       #ABA02C
 
 =ribbon-colors( $textColor, $gradientHigh, $gradientLow )
 
@@ -26,14 +26,15 @@ $testing_gradientLow:       #aba02c
     position:               fixed
     z-index:                1001
 
-    bottom:                 25px
-    right:                  -100px
+    bottom:                 0
+    right:                  0
     width:                  300px
 
     transform-origin:       initial
-    transform:              rotate(-45deg)
+    transform:              translate(30%,-40%) rotate(-45deg)
 
     .ribbon
+
         padding:                2px 0
         font:                   bold 15px Sans-Serif
 
@@ -47,22 +48,37 @@ $testing_gradientLow:       #aba02c
         transition:             opacity 0.2s
 
         &:hover
+
             opacity:                0
 
-        .stitches-top
-            margin-bottom:          2px
+
+        &::before,
+        &::after
+            //
+            //  Stitches
+
+            display:                block
+            content:                ''
             border-top:             1px dashed rgba(0, 0, 0, 0.2)
             box-shadow:             0px 0px 2px rgba(255, 255, 255, 0.3)
 
-        .stitches-bottom
+
+        &::before
+
+            margin-bottom:          2px
+
+
+        &::after
+
             margin-top:             2px
-            border-top:             1px dashed rgba(0, 0, 0, 0.2)
-            box-shadow:             0px 0px 2px rgba(255, 255, 255, 0.3)
 
         +ribbon-colors( $default_textColor, $default_gradientHigh, $default_gradientLow )
 
         &.env-acceptance
+
             +ribbon-colors( $acceptance_textColor, $acceptance_gradientHigh, $acceptance_gradientLow )
 
+
         &.env-testing
+
             +ribbon-colors( $testing_textColor, $testing_gradientHigh, $testing_gradientLow )
diff --git a/generators/app/templates/src/views/debug.environment-ribbon.hbs b/generators/app/templates/src/views/debug.environment-ribbon.hbs
@@ -1,7 +1,5 @@
 <div class="ribbon env-{{settings.environment}}">
-    <div class="stitches-top"></div>
-    {{#if buildBrief.buildNumber}}{{buildBrief.buildNumber}} / {{/if}} {{moment buildBrief.timestamp "MMM DD HH:mm"}}
-    <br />
-    {{settings.environment}}
-    <div class="stitches-bottom"></div>
+    {{#if buildBrief.buildNumber}}<span class="build-number">{{buildBrief.buildNumber}}</span> / {{/if}} <span class="build-timestamp">{{moment buildBrief.timestamp "MMM DD HH:mm"}}</span>
+    <br>
+    <span class="target-environment">{{settings.environment}}</span>
 </div>