mirror of
https://github.com/nasa/openmct.git
synced 2025-04-09 12:21:25 +00:00
[Frontend] CSS enhancements
WTD-1054 Better handling of different content cases;
This commit is contained in:
Charles Hacskaylo
parent
eafc603e03
commit
0bbe3ec99a
@ -2726,7 +2726,7 @@ input[type="text"] {
|
||||
/* line 11, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble {
|
||||
display: inline-block;
|
||||
max-width: 400px;
|
||||
max-width: 250px;
|
||||
padding: 5px 10px; }
|
||||
/* line 15, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble:before {
|
||||
@ -2734,45 +2734,57 @@ input[type="text"] {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
/* line 22, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td {
|
||||
max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top; }
|
||||
/* line 29, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.value {
|
||||
padding-left: 10px; }
|
||||
/* line 32, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
|
||||
white-space: normal; }
|
||||
/* line 39, ../sass/helpers/_bubbles.scss */
|
||||
/* line 21, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table {
|
||||
width: 100%; }
|
||||
/* line 24, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td {
|
||||
padding: 2px 0;
|
||||
vertical-align: top; }
|
||||
/* line 31, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.label {
|
||||
padding-right: 10px;
|
||||
white-space: nowrap; }
|
||||
/* line 35, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.value {
|
||||
white-space: nowrap; }
|
||||
/* line 39, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
|
||||
white-space: normal; }
|
||||
/* line 45, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 5px; }
|
||||
/* line 52, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left {
|
||||
margin-left: 10px; }
|
||||
/* line 41, ../sass/helpers/_bubbles.scss */
|
||||
/* line 54, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left .l-infobubble::before {
|
||||
right: 100%;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 7.5px solid #dddddd; }
|
||||
/* line 49, ../sass/helpers/_bubbles.scss */
|
||||
/* line 62, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right {
|
||||
margin-right: 10px; }
|
||||
/* line 51, ../sass/helpers/_bubbles.scss */
|
||||
/* line 64, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right .l-infobubble::before {
|
||||
left: 100%;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 7.5px solid #dddddd; }
|
||||
/* line 60, ../sass/helpers/_bubbles.scss */
|
||||
/* line 73, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-top .l-infobubble::before {
|
||||
top: 10px; }
|
||||
/* line 66, ../sass/helpers/_bubbles.scss */
|
||||
/* line 79, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-btm .l-infobubble::before {
|
||||
bottom: 10px; }
|
||||
/* line 71, ../sass/helpers/_bubbles.scss */
|
||||
/* line 84, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down {
|
||||
margin-bottom: 10px; }
|
||||
/* line 73, ../sass/helpers/_bubbles.scss */
|
||||
/* line 86, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down .l-infobubble::before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
@ -2781,7 +2793,7 @@ input[type="text"] {
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 7.5px solid #dddddd; }
|
||||
|
||||
/* line 86, ../sass/helpers/_bubbles.scss */
|
||||
/* line 99, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
@ -2791,19 +2803,18 @@ input[type="text"] {
|
||||
background: #dddddd;
|
||||
color: #666666;
|
||||
font-size: 0.8rem; }
|
||||
/* line 92, ../sass/helpers/_bubbles.scss */
|
||||
/* line 105, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .title {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px; }
|
||||
/* line 98, ../sass/helpers/_bubbles.scss */
|
||||
font-weight: bold; }
|
||||
/* line 110, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr td {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
font-size: 0.9em; }
|
||||
/* line 102, ../sass/helpers/_bubbles.scss */
|
||||
/* line 114, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr:first-child td {
|
||||
border-top: none; }
|
||||
/* line 106, ../sass/helpers/_bubbles.scss */
|
||||
/* line 118, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .value {
|
||||
color: #333333; }
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ $infoBubbleBg: #ddd;
|
||||
z-index: 70;
|
||||
.l-infobubble {
|
||||
display: inline-block;
|
||||
max-width: 400px;
|
||||
max-width: 250px;
|
||||
padding: 5px 10px;
|
||||
&:before {
|
||||
content:"";
|
||||
@ -18,22 +18,35 @@ $infoBubbleBg: #ddd;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
table tr {
|
||||
td {
|
||||
max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
&.value {
|
||||
padding-left: $interiorMargin * 2;
|
||||
}
|
||||
&.align-wrap {
|
||||
white-space: normal;
|
||||
table {
|
||||
width: 100%;
|
||||
tr {
|
||||
td {
|
||||
//max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
&.label {
|
||||
padding-right: $interiorMargin * 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.value {
|
||||
white-space: nowrap;
|
||||
//width: 90%;
|
||||
}
|
||||
&.align-wrap {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
margin-bottom: $interiorMargin;
|
||||
//max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-left {
|
||||
@ -92,7 +105,6 @@ $infoBubbleBg: #ddd;
|
||||
.title {
|
||||
color: $emFg;
|
||||
font-weight: bold;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
|
||||
@ -6,36 +6,45 @@ bubbles = [
|
||||
{layout: 'arw-btm arw-right'}
|
||||
];
|
||||
|
||||
titlex='Egress Scenario scelerisque mauris pid montes nunc ut aliquam elementum tincidunt phasellus 1';
|
||||
title='Egress Scenario 1';
|
||||
|
||||
propertiesShort=[{label:'Type', value:'Timeline', align:'left'},
|
||||
{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
|
||||
{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'},
|
||||
{label:'ID', value:'WRP-T-89', align:'left'}];
|
||||
|
||||
properties=[{label:'Type', value:'Timeline', align:'left'},
|
||||
{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
|
||||
{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'},
|
||||
{label:'Duration', value:'09:15:37', align:'left'},
|
||||
{label:'Created', value:'2015-04-26 06:54:00 UTC', align:'left'},
|
||||
{label:'Modified', value:'2015-04-26 18:38:00 UTC', align:'left'},
|
||||
{label:'End', value:'2015-04-27 06:07:26 UTC', align:'left'},
|
||||
{label:'Duration', value:'06:07:26', align:'left'},
|
||||
{label:'Created', value:'2015-04-26 12:27:00 UTC', align:'left'},
|
||||
{label:'Modified', value:'2015-04-26 23:21:00 UTC', align:'left'},
|
||||
{label:'Status', value:'Up to date', align:'left'},
|
||||
{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'left'},
|
||||
{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'wrap'},
|
||||
{label:'Description', value:'Enjoy exceptional battery life for a Bluetooth mouse, and work for up to a full year between battery changes, An On/Off switch helps conserve power, smart sleep mode extends battery life, and an indicator light helps to ensure that you’ll never be caught off guard.', align:'wrap'},
|
||||
{label:'ID', value:'WRP-T-89', align:'left'}];
|
||||
"></div>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute"
|
||||
ng-repeat="bubble in bubbles"
|
||||
class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}"
|
||||
ng-style="{left: $index * 250 + 'px'}"
|
||||
ng-style="{left: $index * 300 + 'px'}"
|
||||
>
|
||||
<div class="l-infobubble">
|
||||
<div
|
||||
ng-show="title.length > 0"
|
||||
class="title"
|
||||
>{{title}}
|
||||
<div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}">
|
||||
<div class="l-infobubble">
|
||||
<div
|
||||
ng-show="title.length > 0"
|
||||
class="title"
|
||||
>{{title}}
|
||||
</div>
|
||||
<table>
|
||||
<tr ng-repeat="property in properties">
|
||||
<td class="label">{{property.label}}</td>
|
||||
<td title="{{property.value}}" class="value align-{{property.align}}">{{property.value}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<table>
|
||||
<tr ng-repeat="property in properties">
|
||||
<td class="label">{{property.label}}</td>
|
||||
<td title="{{property.value}}" class="value align-{{property.align}}">{{property.value}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user