[Frontend] New template for message-banner
open #159 open #170 Added markup and beginning of styling; Temporarily added mct-include elem to bottombar.html;
This commit is contained in:
@@ -39,6 +39,10 @@
|
|||||||
"key": "indicator",
|
"key": "indicator",
|
||||||
"templateUrl": "templates/indicator.html"
|
"templateUrl": "templates/indicator.html"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"key": "message-banner",
|
||||||
|
"templateUrl": "templates/message-banner.html"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"key": "time-controller",
|
"key": "time-controller",
|
||||||
"templateUrl": "templates/controls/time-controller.html"
|
"templateUrl": "templates/controls/time-controller.html"
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
/* Styles for messages */
|
/* Styles for messages and message banners */
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
&.block {
|
&.block {
|
||||||
@@ -10,3 +10,24 @@
|
|||||||
color: lighten($colorAlert, 20%);
|
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;
|
||||||
|
}
|
||||||
@@ -26,5 +26,6 @@
|
|||||||
key="indicator.template">
|
key="indicator.template">
|
||||||
</mct-include>
|
</mct-include>
|
||||||
</div>
|
</div>
|
||||||
|
<mct-include key="'message-banner'"></mct-include>
|
||||||
<mct-include key="'about-logo'"></mct-include>
|
<mct-include key="'about-logo'"></mct-include>
|
||||||
</div>
|
</div>
|
||||||
@@ -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">
|
||||||
|
x
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
@@ -1153,7 +1153,7 @@ mct-container {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0; }
|
left: 0; }
|
||||||
|
|
||||||
/* Styles for messages */
|
/* Styles for messages and message banners */
|
||||||
/* line 4, ../../../../general/res/sass/_messages.scss */
|
/* line 4, ../../../../general/res/sass/_messages.scss */
|
||||||
.message.block {
|
.message.block {
|
||||||
-moz-border-radius: 2px;
|
-moz-border-radius: 2px;
|
||||||
@@ -1165,6 +1165,37 @@ mct-container {
|
|||||||
background-color: rgba(255, 60, 0, 0.3);
|
background-color: rgba(255, 60, 0, 0.3);
|
||||||
color: #ff8a66; }
|
color: #ff8a66; }
|
||||||
|
|
||||||
|
/* line 14, ../../../../general/res/sass/_messages.scss */
|
||||||
|
.l-message-banner {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: auto;
|
||||||
|
bottom: 5px;
|
||||||
|
left: 50%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 300px;
|
||||||
|
padding: 0 10px;
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
-ms-transform: translateX(-50%);
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
/* line 24, ../../../../general/res/sass/_messages.scss */
|
||||||
|
.l-message-banner .s-btn, .l-message-banner .s-menu {
|
||||||
|
height: auto !important; }
|
||||||
|
|
||||||
|
/* line 29, ../../../../general/res/sass/_messages.scss */
|
||||||
|
.s-message-banner {
|
||||||
|
-moz-border-radius: 2px;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #999;
|
||||||
|
color: black; }
|
||||||
|
|
||||||
/*****************************************************************************
|
/*****************************************************************************
|
||||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
|
|||||||
@@ -1150,7 +1150,7 @@ mct-container {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0; }
|
left: 0; }
|
||||||
|
|
||||||
/* Styles for messages */
|
/* Styles for messages and message banners */
|
||||||
/* line 4, ../../../../general/res/sass/_messages.scss */
|
/* line 4, ../../../../general/res/sass/_messages.scss */
|
||||||
.message.block {
|
.message.block {
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
@@ -1162,6 +1162,37 @@ mct-container {
|
|||||||
background-color: rgba(255, 60, 0, 0.3);
|
background-color: rgba(255, 60, 0, 0.3);
|
||||||
color: #ff8a66; }
|
color: #ff8a66; }
|
||||||
|
|
||||||
|
/* line 14, ../../../../general/res/sass/_messages.scss */
|
||||||
|
.l-message-banner {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: auto;
|
||||||
|
bottom: 5px;
|
||||||
|
left: 50%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 300px;
|
||||||
|
padding: 0 10px;
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
-ms-transform: translateX(-50%);
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
/* line 24, ../../../../general/res/sass/_messages.scss */
|
||||||
|
.l-message-banner .s-btn, .l-message-banner .s-menu {
|
||||||
|
height: auto !important; }
|
||||||
|
|
||||||
|
/* line 29, ../../../../general/res/sass/_messages.scss */
|
||||||
|
.s-message-banner {
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #999;
|
||||||
|
color: black; }
|
||||||
|
|
||||||
/*****************************************************************************
|
/*****************************************************************************
|
||||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
|
|||||||
Reference in New Issue
Block a user