From 0bbe3ec99af2410acc29c2f81308aec3856a22ed Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 29 Apr 2015 18:13:35 -0700 Subject: [PATCH] [Frontend] CSS enhancements WTD-1054 Better handling of different content cases; --- .../general/res/css/theme-espresso.css | 65 +++++++++++-------- .../general/res/sass/helpers/_bubbles.scss | 42 +++++++----- platform/commonUI/inspect/res/infobubble.html | 45 ++++++++----- 3 files changed, 92 insertions(+), 60 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6d1e916c26..b2668e99a7 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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; } diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss index 849cea01d3..63187c9690 100644 --- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss +++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss @@ -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 { diff --git a/platform/commonUI/inspect/res/infobubble.html b/platform/commonUI/inspect/res/infobubble.html index 97187a3465..436ba83557 100644 --- a/platform/commonUI/inspect/res/infobubble.html +++ b/platform/commonUI/inspect/res/infobubble.html @@ -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'}]; "> +
-
-
{{title}} +
+
+
{{title}} +
+ + + + + +
{{property.label}}{{property.value}}
- - - - - -
{{property.label}}{{property.value}}
\ No newline at end of file