Add header to WebClient

1d9c005c · Nils G. · 93f73e17 · 1d9c005c · 1d9c005c · 1d9c005c
Commit 1d9c005c authored 4 years ago by Nils G.
--- a/static/css/base.css
+++ b/static/css/base.css
 /* ============== Color placeholder ===================== */

 :root {
+  --bar-bg: grey;
+
  --error-bg: #FFBBBB;
  --error-text: darkred;

@@ -8,6 +10,56 @@
  --info-text: #00004D;
 }

+body, html {
+    min-width: 375px;
+}
+
+/* =============== Header =================== */
+#header {
+    position: absolute;
+    display: block;
+
+    text-align: center;
+
+    color: white;
+    font-family: monospace;
+    font-size: 1.7em;
+    font-weight: bold;
+
+    background-color: var(--bar-bg);
+
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    min-width: inherit;
+    height: 30px;
+    line-height: 25px;
+
+    padding: 5px;
+}
+
+#header span {
+    vertical-align: middle;
+}
+
+#header #header_left {
+    margin-left: 15%;
+    float: left;
+}
+
+#header #header_center {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+#header #header_right {
+    margin-right: 15%;
+    float: right;
+}
+
+.spacer {
+    margin-bottom: 75px;
+}

 /* ============== Popup ===================== */

@@ -58,11 +110,12 @@
    left: 0px;
    bottom: 0px;
    width: 100%;
+    min-width: inherit;

    margin-top: 20px;
    padding: 5px;

-    background-color: gray;
+    background-color: var(--bar-bg);
    text-align: center;
 }


--- a/static/css/client.css
+++ b/static/css/client.css
 body {
    text-align: center;
    background-color: lightgrey;
-    padding-top: 50px;
 }

 #current_content {

--- a/views/layout.html
+++ b/views/layout.html
@@ -10,6 +10,9 @@
    </head>
    <body>

+        <div id="header"><span id="header_left"></span><span id="header_center"></span><span id="header_right"></span></div>
+        <div class="spacer"></div>
+
        <!-- Page Content -->
        {{include}}
        <!-- ======================== -->