diff options
author | José Bollo <jose.bollo@iot.bzh> | 2017-08-27 13:35:37 +0200 |
---|---|---|
committer | José Bollo <jose.bollo@iot.bzh> | 2017-08-27 14:41:45 +0200 |
commit | 8ce4768e7bbb2f7fc00c885591aa20429f4c83af (patch) | |
tree | 0de9a26095e3128a47e89681d48126ee62383f8f /test/monitoring/monitor-base.css | |
parent | d0b0b6fe77b8ea06bac2830baa9008eefe1917ba (diff) |
monitoring: improvements
- use flex/css for correct layout
- handles disconnection nicely
- handles initial token
- fix typo in afb-api-so
Change-Id: I386b98f9d6a2182029d39a373a9820478f97cfa6
Signed-off-by: José Bollo <jose.bollo@iot.bzh>
Diffstat (limited to 'test/monitoring/monitor-base.css')
-rw-r--r-- | test/monitoring/monitor-base.css | 128 |
1 files changed, 53 insertions, 75 deletions
diff --git a/test/monitoring/monitor-base.css b/test/monitoring/monitor-base.css index 1318c914..f2de1d92 100644 --- a/test/monitoring/monitor-base.css +++ b/test/monitoring/monitor-base.css @@ -19,108 +19,67 @@ body { position: fixed; top: 0px; - bottom: 0px; left: 0px; right: 0px; + bottom: 0px; } -body.on #params, body.off #main { display: none; } +body.on #params, body.on #connect, body.off #disconnect { display: none; } /*******************************************************************/ -/* head */ -#head { - position: relative; +/* utilities */ +.-flex-h { + display: flex; + flex-flow: row nowrap; } - -#logo { - float: left; +.-flex-v { + display: flex; + flex-flow: column nowrap; } - -#connected { - float: right; +.-flex-v > .-flex-fill { + height: 100%; } - -/*******************************************************************/ -/* connection area */ - -/*******************************************************************/ -/* main area */ - -#work { - position: relative; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; +.-flex-h > .-flex-fill { + width: 100%; } - -#main { +.-box-out { position: relative; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; } - -.fillfix { - width: 100%; - height: 100%; -} - -#controls { +.-box-in { position: absolute; - width: 250px; left: 0px; - top: 0px; - bottom: 0px; - overflow: auto; - margin-bottom: 75px; -} - -#logmsg-box { - position: absolute; - width: 250px; right: 0px; top: 0px; bottom: 0px; -/* - font-size: smaller; overflow: auto; - margin-bottom: 75px; -*/ } -#logmsgs-inner-box { +/*******************************************************************/ +/* head */ +#head { position: relative; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; } -#logmsgs { - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - font-size: smaller; - overflow: auto; - margin-bottom: 380px; +#logo { + float: left; } - -#trace-events { - overflow: auto; - position: absolute; - right: 250px; - left: 250px; - top: 0px; - bottom: 0px; - margin-bottom: 75px; +#connected { + float: right; } /*******************************************************************/ +/* connection area */ + +/*******************************************************************/ +/* main area */ + +#controls, #menu { flex: 1; } +#middle { flex: 3; } +#controls { min-width: 300px; } +#menu { min-width: 200px; } + +/*******************************************************************/ /* setting for apis */ /*******************************************************************/ @@ -140,6 +99,8 @@ body.on #params, body.off #main { display: none; } /*******************************************************************/ /* display of logmsg */ +#experts.closed ~ #expert-pane { visibility: hidden; } + /*******************************************************************/ /* close box */ .close { @@ -167,7 +128,7 @@ body.on #params, body.off #main { display: none; } } .traceevent .time { - float: left; + float: right; } .traceevent.closed:hover { @@ -183,9 +144,26 @@ body.on #params, body.off #main { display: none; } .traceevent.closed:hover .content { display: block; background: inherit; + overflow: hidden; left: 40%; max-width: 55%; position: absolute; + animation-name: display-block; + animation-duration: 2s; + -webkit-animation-name: display-block; + -webkit-animation-duration: 2s; +} + +@-webkit-keyframes display-block { + from { opacity: 0; } + 50% { opacity: 0; } + to { opacity: 1; } +} + +@keyframes display-block { + from { opacity: 0; } + 50% { opacity: 0; } + to { opacity: 1; } } .traceevent .content { |