[Frontend] New template for message-banner

open #159
open #170
Added markup and beginning of styling;
Temporarily added mct-include elem to bottombar.html;

platform/commonUI/general/bundle.json

@@ -39,6 +39,10 @@
                 "key": "indicator",
                 "templateUrl": "templates/indicator.html"
             },
+            {
+                "key": "message-banner",
+                "templateUrl": "templates/message-banner.html"
+            },
             {
               "key": "time-controller",
               "templateUrl": "templates/controls/time-controller.html"

platform/commonUI/general/res/sass/_messages.scss

@@ -1,4 +1,4 @@
-/* Styles for messages */
+/* Styles for messages and message banners */
 
 .message {
 	&.block {
@@ -9,4 +9,25 @@
 		background-color: rgba($colorAlert,0.3);
 		color: lighten($colorAlert, 20%);
 	}
+}
+
+.l-message-banner {
+    @include ellipsize();
+    display: block;
+    position: absolute;
+    top: $interiorMargin; right: auto; bottom: $interiorMargin; left: 50%;
+    height: auto; width: auto;
+    //line-height: $ueFooterH;
+    max-width: 300px;
+    padding: 0 $interiorMarginLg;
+    @include transform(translateX(-50%));
+    .s-btn {
+        height: auto !important;
+    }
+}
+
+.s-message-banner {
+    @include border-radius($basicCr);
+    background-color: #999;
+    color: black;
 }

platform/commonUI/general/res/templates/bottombar.html

@@ -26,5 +26,6 @@
                      key="indicator.template">
         </mct-include>
     </div>
+    <mct-include key="'message-banner'"></mct-include>
     <mct-include key="'about-logo'"></mct-include>
 </div>

platform/commonUI/general/res/templates/message-banner.html

@@ -0,0 +1,9 @@
+<div class="l-message-banner s-message-banner">
+    <span class="label">
+        Objects not saved
+    </span><!--span class="s-btn">
+        Try Again
+    </span--><span class="ui-symbol close">
+        &#x78;
+    </span>
+</div>