Web UI - style update

mupif · Jul 8, 2024 · 0ac6b1e · 0ac6b1e
1 parent fb6c720
commit 0ac6b1e
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 14 deletions.
diff --git a/webapi/index.py b/webapi/index.py
@@ -282,8 +282,7 @@ def logout():
 def about():
     msg = """
         <h3>Welcome to MuPIFDB web interface</h3>
-        <p><a href=\"http://www.mupif.org\">MuPIF</a> is open-source, modular, object-oriented integration platform allowing to create complex, distributed, multiphysics simulation workflows across the scales and processing chains by combining existing simulation tools. <a href=\"https://github.com/mupif/mupifDB\">MuPIFDB</a> is database layer (based on MongoDB) and workflow manager/scheduler for MuPIF with REST API.</p>
-        <p>The MuPIFDB web interface allows to use MupifDB REST API from web browser in a user friendly way, allowing to inspect all the stored data and to intialize, schedule and monitor individual workflow executions.</p> 
+        <p><a href=\"http://www.mupif.org\">MuPIF</a> MuPIF is open-source, modular, object-oriented simulation platform allowing to create complex, distributed, multiphysics simulation workflows across the scales and processing chains by combining existing simulation tools. Its data management system allows to build digital twin representations of physical systems, enhanced with predictive simulations to explore virtual paths in a secure distributed environment with full data traceability.</p> 
     """
     return my_render_template('basic.html', body=Markup(msg), login=login_header_html())
 

diff --git a/webapi/static/style.css b/webapi/static/style.css
@@ -1,3 +1,17 @@
+*, *::before, *::after {
+    /*font-kerning: normal;*/
+    /*font-variant-numeric: lining-nums proportional-nums;*/
+    /*font-variant-ligatures: common-ligatures contextual;*/
+    outline: none;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+html {
+    overflow-y:scroll;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 .sidenav {
     height: 100%;
     width: 160px;
@@ -21,9 +35,72 @@
 }
 
 .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     clear: both;
     width: 100%;
     text-align: center;
+    height: 60px;
+    position: fixed;
+    bottom: 0;
+    /*background-color: #1976D2;*/
+    border-top: 1px solid silver;
+    background-color: #e8e8e8;
+    padding: 0 10px;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: #e8e8e8;
+    /*background-color: #1976D2;*/
+    padding: 10px 10px 10px 20px;
+    height: 80px;
+
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 32px;
+    background-color: #e8e8e8;
+    /*background-color: #1976D2;*/
+    padding: 3px 32px;
+    /*height: 30px;*/
+    border-bottom: 1px solid silver;
+}
+
+.menu a, .menu a:visited {
+    display: block;
+    background-color: transparent;
+    border-radius: 3px;
+    color: black;
+    text-decoration: none;
+    padding: 6px 16px;
+    vertical-align: center;
+    text-align: center;
+}
+
+.menu a:hover {
+    display: block;
+    background-color: silver;
+
+}
+
+.header_caption {
+    text-align: center;
+    vertical-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 32px;
+    /*font-weight: bold;*/
+    color: #3f3f3f;
+
 }
 
 table {
@@ -40,21 +117,22 @@ head {
 
 .main {
     clear: both;
-    background-color: rgb(238, 242, 255);
     min-height: 200px;
+    padding-bottom: 200px;
 }
 
 body {
     clear: both;
     height: auto;
+    background-color: #f8f8f8;
 }
 
 .right {
     font-size: 16px; /* Increased text to enable scrolling */
-    padding: 0px 10px;
     /*float: right;*/
     /*width: 100%;*/
-    background-color: rgb(238, 242, 255);
+    /*background-color: rgb(238, 242, 255);*/
+    padding: 32px 16px 16px 16px;
 }
 
 .sidenav, .right {

diff --git a/webapi/templates/layout.html b/webapi/templates/layout.html
@@ -7,24 +7,32 @@
         {% endblock %}
     </head>
     <body>
-        <div style="display: flex;flex-direction: row;justify-content: space-between;">
-            <div style="display: flex;flex-direction: row;gap: 10px;">
-                <img src="/static/images/mupif-logo.png" height="60px" align="right">
-                <img src="/static/images/ctu-logo.png" height="60px" align="right">
+        <div class="header">
+            <div style="display: flex;flex-direction: row;gap: 64px;">
                 <img src="{% block projectLogoUrl %}{% endblock %}" height="60px" align="left">
-                <div><p>MuPIFDB web interface</p></div>
+                <div class="header_caption">MuPIF DB web interface</div>
             </div>
             <div class="block_login">{% block login %}{% endblock %}</div>
         </div>
+        <div class="menu">
+            <a href="/about">About</a>
+            <a href="/status">Status</a>
+            <a href="/usecases">Usecases</a>
+            <a href="/workflows">Workflows</a>
+            <a href="/workflowexecutions">Executions</a>
+            <a href="/contact">Contact</a>
+        </div>
         <div class="main">
-            {% include 'navigation.html' %}
+{#            {% include 'navigation.html' %}#}
             <div class="right">
                 {% block content %}{% endblock %}
             </div>
         </div>
         <div class="footer">
             {% block footer %}
-            &copy; Copyright CTU in Prague.
+                <img src="/static/images/mupif-logo.png" height="50px" align="right">
+                &copy; Copyright CTU in Prague.
+                <img src="/static/images/ctu-logo.png" height="50px" align="right">
             {% endblock %}
         </div>
     </body>

diff --git a/webapi/templates/navigation.html b/webapi/templates/navigation.html
@@ -5,4 +5,4 @@
     <a href="/workflows">Workflows</a>
     <a href="/workflowexecutions">Executions</a>
     <a href="/contact">Contact</a>
-  </div>
+</div>
diff --git a/webapi/templates/stat.html b/webapi/templates/stat.html
@@ -1,9 +1,11 @@
 {% extends "layout.html" %}
+{% block title %} {{ title }} {% endblock %}
+{% block login %} {{ login }} {% endblock %}
 {% block projectLogoUrl %} {{ projectLogoUrl }} {% endblock %}
 {% block head %}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js " integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin=" anonymous "></script>
-<title>{% block title %}{{ title }}{% endblock %}</title>
+{#<title>{% block title %}{{ title }}{% endblock %}</title>#}
 {% endblock %}
 {% block content %}
 <div>