Merge pull request #48 from bptlab/feature/39-refactoring-static-ui

Feature/39 refactoring static UI
bptlab · Jan 30, 2024 · a660748 · a660748
2 parents db0886b + 7ff85d8
commit a660748
Show file tree

Hide file tree

Showing 12 changed files with 232 additions and 62 deletions.
diff --git a/tracex/extraction/static/extraction/css/style.css b/tracex/extraction/static/extraction/css/style.css
@@ -0,0 +1,35 @@
+.main_body {
+    background-color: white;
+    font-family: 'Gill Sans', sans-serif;
+    width: 50%;
+    margin-top: 5%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+button {
+    width: 100%; /* Full width of the container */
+    padding: 10px; /* Add padding for better appearance */
+}
+
+.selection_body{
+    background-color: white;
+    font-family: 'Gill Sans', sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.selection_container {
+    width: 50%;
+}
+
+.selection_logo {
+            max-width: 800px;
+            margin-bottom: 20px;
+            margin-top: -150px;
+}
diff --git a/tracex/extraction/templates/TraceEx_v2.png → ...tion/static/extraction/img/TraceEx_v2.png b/tracex/extraction/templates/TraceEx_v2.png → ...tion/static/extraction/img/TraceEx_v2.png
diff --git a/tracex/extraction/templates/TraceEx_v2.svg → ...tion/static/extraction/img/TraceEx_v2.svg b/tracex/extraction/templates/TraceEx_v2.svg → ...tion/static/extraction/img/TraceEx_v2.svg
diff --git a/tracex/extraction/templates/generation.html b/tracex/extraction/templates/generation.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
+<title>Generation</title>
 <head>
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static '/extraction/css/style.css' %}">
     <style>
         .form-row {
             display: flex;
@@ -14,26 +17,14 @@
         .form-column:last-child {
             margin-right: 0;
         }
-        body {
-            background-color: white;
-            font-family: 'Gill Sans', sans-serif;
-            width: 50%;
-            margin-top: 5%;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        button {
-            width: 100%;
-            padding: 10px;
-        }
         input[type="submit"].button {
             width: 100%;
             padding: 10px;
             margin-top: 5%;
         }
     </style>
 </head>
-<body>
+<body class="main_body">
     <h1>Generated Journey</h1>
     <p>{{ generated_journey }}</p>
 

diff --git a/tracex/extraction/templates/result.html b/tracex/extraction/templates/result.html
@@ -4,15 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Result</title>
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static '/extraction/css/style.css' %}">
     <style>
-        body {
-            background-color: white;
-            font-family: 'Gill Sans', sans-serif;
-            width: 50%;
-            margin-top: 5%;
-            margin-left: auto;
-            margin-right: auto;
-        }
+
         h1 {
             margin-bottom: 20px;
         }
@@ -24,10 +19,6 @@
             margin-bottom: 20px;
             display: block;
         }
-        button {
-            width: 100%;
-            padding: 10px;
-        }
         .form-row {
             display: flex;
             justify-content: space-between;
@@ -56,7 +47,7 @@
         }
     </style>
 </head>
-<body>
+<body class="main_body">
     <h1>Success! The TracEX pipeline produced the following results:</h1>
 
     <p><b>This is the patient journey you provided:</b></p>

diff --git a/tracex/extraction/templates/selection.html b/tracex/extraction/templates/selection.html
@@ -2,35 +2,18 @@
 <html lang="EN">
 <head>
     <title>TracEX</title>
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static '/extraction/css/style.css' %}">
     <style>
-        body {
-            background-color: white;
-            font-family: 'Gill Sans', sans-serif;
-            text-align: center; /* Center text */
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh; /* Full height of the viewport */
-        }
-        .container {
-            width: 50%; /* Adjust as needed */
-        }
         button {
-            width: 100%; /* Full width of the container */
-            padding: 10px; /* Add padding for better appearance */
             margin: 10px 0; /* Add some margin around buttons */
         }
-        .logo {
-            max-width: 800px;
-            margin-bottom: 20px;
-            margin-top: -150px;}
     </style>
 </head>
-<body>
-    <div class="container">
-        <img src="https://i.imgur.com/q291CMo.png" alt="TracEX Logo" class="logo"> <!-- Adjust the path as needed -->
+
+<body class="selection_body">
+    <div class="selection_container">
+        <img src="{% static '/extraction/img/TraceEx_v2.svg' %}" alt="TracEX Logo" class="selection_logo">
         <h1>Welcome to TracEX</h1>
         <p>In this prototype of our pipeline you may either provide a patient journey yourself, or generate it with ChatGPT.</p>
 

diff --git a/tracex/extraction/templates/upload_journey.html b/tracex/extraction/templates/upload_journey.html
@@ -1,5 +1,7 @@
 <head>
     <title>Upload Journey</title>
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static '/extraction/css/style.css' %}">
     <style>
         .form-row {
             display: flex;
@@ -13,17 +15,6 @@
         .form-column:last-child {
             margin-right: 0;
         }
-        body {
-            font-family: 'Gill Sans', sans-serif;
-            width: 50%;
-            margin-top: 5%;
-            margin-left: auto; /* Add left margin */
-            margin-right: auto; /* Add right margin */
-        }
-        button {
-            width: 100%; /* Full width of the container */
-            padding: 10px; /* Add padding for better appearance */
-        }
         input[type="submit"].button {
             width: 100%;
             padding: 10px;
@@ -33,7 +24,7 @@
 </head>
 
 
-<body>
+<body class="main_body">
     <h2>Welcome</h2>
     <p>Please select the patient journey you want to upload below.</p>
 

diff --git a/tracex/static/extraction/css/style.css b/tracex/static/extraction/css/style.css
@@ -0,0 +1,36 @@
+.main_body {
+    background-color: white;
+    font-family: 'Gill Sans', sans-serif;
+    width: 50%;
+    margin-top: 5%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+button {
+    width: 100%; /* Full width of the container */
+    padding: 10px; /* Add padding for better appearance */
+    margin: 10px 0; /* Add some margin around buttons */
+}
+
+.selection_body{
+    background-color: white;
+    font-family: 'Gill Sans', sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.selection_container {
+    width: 50%;
+}
+
+.selection_logo {
+            max-width: 800px;
+            margin-bottom: 20px;
+            margin-top: -150px;
+}
diff --git a/tracex/static/extraction/img/TraceEx_v2.png b/tracex/static/extraction/img/TraceEx_v2.png
diff --git a/tracex/static/extraction/img/TraceEx_v2.svg b/tracex/static/extraction/img/TraceEx_v2.svg
diff --git a/tracex/tracex/settings.py b/tracex/tracex/settings.py
@@ -116,7 +116,11 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.2/howto/static-files/
 
-STATIC_URL = "static/"
+STATIC_ROOT = BASE_DIR / "static"
+STATIC_URL = "/static/"
+STATICFILES_DIRS = [
+    BASE_DIR / "extraction" / "static",
+]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

diff --git a/tracex/tracex/urls.py b/tracex/tracex/urls.py
@@ -1,8 +1,13 @@
 """tracex URL Configuration for tracex app"""
 from django.contrib import admin
 from django.urls import include, path
+from django.conf import settings
+from django.conf.urls.static import static
 
 urlpatterns = [
     path("extraction/", include("extraction.urls")),
     path("admin/", admin.site.urls),
 ]
+
+if settings.DEBUG:
+    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)