Web UI - style update

mupif · Jul 8, 2024 · a4ceb53 · a4ceb53
1 parent 30f33c3
commit a4ceb53
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/webapi/index.py b/webapi/index.py
@@ -282,7 +282,7 @@ def logout():
 def about():
     msg = """
         <h3>Welcome to MuPIFDB web interface</h3>
-        <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> 
+        <p><a href=\"http://www.mupif.org\">MuPIF</a> 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
@@ -51,26 +51,32 @@ html {
     padding: 0 10px;
 }
 
+.top {
+    display: flex;
+    flex-direction: column;
+    background-color: #e8e8e8;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
 .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;*/
+    padding: 2px 32px;
+    /*height: 40px;*/
     border-bottom: 1px solid silver;
 }
 
@@ -80,7 +86,7 @@ html {
     border-radius: 3px;
     color: black;
     text-decoration: none;
-    padding: 6px 16px;
+    padding: 4px 16px;
     vertical-align: center;
     text-align: center;
 }
@@ -119,6 +125,7 @@ head {
     clear: both;
     min-height: 200px;
     padding-bottom: 200px;
+    padding-top: 111px;
 }
 
 body {
@@ -128,11 +135,8 @@ body {
 }
 
 .right {
-    font-size: 16px; /* Increased text to enable scrolling */
-    /*float: right;*/
-    /*width: 100%;*/
-    /*background-color: rgb(238, 242, 255);*/
-    padding: 32px 16px 16px 16px;
+    font-size: 16px;
+    padding: 24px 16px 16px 16px;
 }
 
 .sidenav, .right {

diff --git a/webapi/templates/layout.html b/webapi/templates/layout.html
@@ -7,20 +7,22 @@
         {% endblock %}
     </head>
     <body>
-        <div class="header">
-            <div style="display: flex;flex-direction: row;gap: 64px;">
-                <img src="{% block projectLogoUrl %}{% endblock %}" height="60px" align="left">
-                <div class="header_caption">MuPIF DB web interface</div>
+        <div class="top">
+            <div class="header">
+                <div style="display: flex;flex-direction: row;gap: 64px;">
+                    <img src="{% block projectLogoUrl %}{% endblock %}" height="60px" align="left">
+                    <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="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' %}#}
@@ -30,9 +32,9 @@
         </div>
         <div class="footer">
             {% block footer %}
-                <img src="/static/images/mupif-logo.png" height="50px" align="right">
+                <a href="https://mupif.org/" target="_blank"><img src="/static/images/mupif-logo.png" height="50px" align="right"></a>
                 &copy; Copyright CTU in Prague.
-                <img src="/static/images/ctu-logo.png" height="50px" align="right">
+                <a href="https://www.cvut.cz/en" target="_blank"><img src="/static/images/ctu-logo.png" height="50px" align="right"></a>
             {% endblock %}
         </div>
     </body>