From 0ac6b1ea75b46bc1c293e3bd5884a0911ca48ce5 Mon Sep 17 00:00:00 2001 From: stanislavsulc Date: Mon, 8 Jul 2024 14:59:07 +0200 Subject: [PATCH] Web UI - style update --- webapi/index.py | 3 +- webapi/static/style.css | 84 ++++++++++++++++++++++++++++++-- webapi/templates/layout.html | 22 ++++++--- webapi/templates/navigation.html | 2 +- webapi/templates/stat.html | 4 +- 5 files changed, 101 insertions(+), 14 deletions(-) diff --git a/webapi/index.py b/webapi/index.py index 56f9ff0..b406cb5 100644 --- a/webapi/index.py +++ b/webapi/index.py @@ -282,8 +282,7 @@ def logout(): def about(): msg = """

Welcome to MuPIFDB web interface

-

MuPIF 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. MuPIFDB is database layer (based on MongoDB) and workflow manager/scheduler for MuPIF with REST API.

-

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.

+

MuPIF 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.

""" 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 index ad4f290..dd79504 100644 --- 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 index 4e648ec..266d772 100644 --- a/webapi/templates/layout.html +++ b/webapi/templates/layout.html @@ -7,24 +7,32 @@ {% endblock %} -
-
- - +
+
-

MuPIFDB web interface

+
MuPIF DB web interface
+
+ About + Status + Usecases + Workflows + Executions + Contact +
- {% include 'navigation.html' %} +{# {% include 'navigation.html' %}#}
{% block content %}{% endblock %}
{% block footer %} - © Copyright CTU in Prague. + + © Copyright CTU in Prague. + {% endblock %}
diff --git a/webapi/templates/navigation.html b/webapi/templates/navigation.html index 1e88448..873a7b7 100644 --- a/webapi/templates/navigation.html +++ b/webapi/templates/navigation.html @@ -5,4 +5,4 @@ Workflows Executions Contact -
\ No newline at end of file +
\ No newline at end of file diff --git a/webapi/templates/stat.html b/webapi/templates/stat.html index 74c6169..5a11c89 100644 --- 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 %} -{% block title %}{{ title }}{% endblock %} +{#{% block title %}{{ title }}{% endblock %}#} {% endblock %} {% block content %}