Update copyright dates

[src/app-framework-binder.git] / test / monitoring / monitor-base.css

diff --git a/test/monitoring/monitor-base.css b/test/monitoring/monitor-base.css
index a394a44..feb6170 100644 (file)
--- a/test/monitoring/monitor-base.css
+++ b/test/monitoring/monitor-base.css
@@ -1,16 +1,58 @@
+/*
+ * Copyright (C) 2015-2020 "IoT.bzh"
+ * Author: José Bollo <jose.bollo@iot.bzh>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 /*******************************************************************/
 /* top */
 body {
        position: fixed;
        top: 0px;
-       bottom: 0px;
        left: 0px;
        right: 0px;
+       bottom: 0px;
 }
 
-body.on #params,
-body.off #controls,
-body.off #logmsg-box { display: none; }
+body.on #params, body.on #connect, body.off #disconnect { display: none; }
+
+/*******************************************************************/
+/* utilities */
+.-flex-h {
+       display: flex;
+       flex-flow: row nowrap;
+}
+.-flex-v {
+       display: flex;
+       flex-flow: column nowrap;
+}
+.-flex-v > .-flex-fill {
+       height: 100%;
+}
+.-flex-h > .-flex-fill {
+       width: 100%;
+}
+.-box-out {
+       position: relative;
+}
+.-box-in {
+       position: absolute;
+       left: 0px;
+       right: 0px;
+       top: 0px;
+       bottom: 0px;
+       overflow: auto;
+}
 
 /*******************************************************************/
 /* head */
@@ -32,57 +74,11 @@ body.off #logmsg-box { display: none; }
 /*******************************************************************/
 /* main area */
 
-#work {
-       position: relative;
-       top: 0px;
-       bottom: 0px;
-       left: 0px;
-       right: 0px;
-}
-
-#main {
-       position: relative;
-       top: 0px;
-       bottom: 0px;
-       left: 0px;
-       right: 0px;
-}
-
-.fillfix {
-       width: 100%;
-       height: 100%;
-}
-
-#controls {
-       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;
-}
-
-#trace-events {
-       overflow: auto;
-       position: absolute;
-       right: 250px;
-       left: 250px;
-       top: 0px;
-       bottom: 0px;
-       margin-bottom: 75px;
-}
+#work { overflow-x: auto; }
+#controls, #menu { flex: 1; }
+#middle { flex: 3; }
+#controls { min-width: 300px; }
+#menu { min-width: 200px; }
 
 /*******************************************************************/
 /* setting for apis */
@@ -93,8 +89,7 @@ body.off #logmsg-box { display: none; }
 /*******************************************************************/
 /* setting for traces */
 
-#apis .trace-evt {
-       visibility: hidden;
+#apis .event, #apis .global {
        display: none;
 }
 
@@ -104,6 +99,8 @@ body.off #logmsg-box { display: none; }
 /*******************************************************************/
 /* display of logmsg */
 
+#experts.closed ~ #expert-pane { visibility: hidden; }
+
 /*******************************************************************/
 /* close box */
 .close {
@@ -131,7 +128,7 @@ body.off #logmsg-box { display: none; }
 }
 
 .traceevent .time {
-       float: left;
+       float: right;
 }
 
 .traceevent.closed:hover {
@@ -147,12 +144,34 @@ body.off #logmsg-box { 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;
 }
 
-.traceevent {
+@-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 {
+       clear: both;
+       overflow-x: auto;
+}
+
+.traceevent, .x-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;