summaryrefslogtreecommitdiffstats
path: root/test/monitoring/monitor-base.css
diff options
context:
space:
mode:
authorJosé Bollo <jose.bollo@iot.bzh>2017-08-27 13:35:37 +0200
committerJosé Bollo <jose.bollo@iot.bzh>2017-08-27 14:41:45 +0200
commit8ce4768e7bbb2f7fc00c885591aa20429f4c83af (patch)
tree0de9a26095e3128a47e89681d48126ee62383f8f /test/monitoring/monitor-base.css
parentd0b0b6fe77b8ea06bac2830baa9008eefe1917ba (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.css128
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 {