CSS style-sheeting, etc.

flask_app/app/__init__.py

@@ -3,6 +3,7 @@ from config import Config
 from app.extensions import db, extract_exc
 from app.models.users import tbl_users
 from flask_login import LoginManager
+from datetime import datetime, timezone, timedelta
 
 # flask app factory function/instantiator
 def create_app(config_class=Config):
@@ -48,9 +49,10 @@ def create_app(config_class=Config):
         if len(l_tb)>2: l_tb = l_tb[:3]
         s_tb = " | ".join(l_tb)
         s_path = str(request.path)
+        s_dt = datetime.now().astimezone(timezone(timedelta(hours=2))).strftime("%Y-%m-%d %H:%M:%S")
         s_logging = f"<ul><li>date-time: {s_dt}</li>\n<li>line no.: {d_exc['i_lineno']}</li>\n<li>filename: {d_exc['s_filename']}</li>\n<li>except: {d_exc['s_except']}</li>\n<li>additional: {d_exc['s_additional']}</li>\n</ul>" if isinstance(d_exc, dict) else f"date-time: {s_dt}\n{s_path}\n" + str(d_exc["s_except"])
         d_out = {"url": request.url.replace(request.url_root, ""), "file": d_exc["s_filename"], "line no.": d_exc["i_lineno"], "exception": d_exc["s_except"], "traceback": s_tb}
-        d_exc["traceback"] = d_exc["traceback"].split("|")
+        d_exc["traceback"] = d_exc["s_tb"].split("|")
         return render_template("errors/500.html", js=True, s_alert="", exc=d_exc, html_content=s_logging), 500
     # end of page_exception function
 

flask_app/app/main/routes.py

@@ -311,10 +311,11 @@ def download_upload(i_upload:int = 0, bl_download:bool = True):
             o_out = io.BytesIO(o_upload.b_file)
             s_mimetype = o_upload.v_mime_type
             s_filename = o_upload.v_filename
-            # resp = send_file(o_out, mimetype=s_mimetype, as_attachment=bl_download, download_name=s_filename)
-            resp = make_response(o_out)
-            resp.headers.set("Content-Disposition", f"attachment; filename=\"{s_filename}\"" if bl_download else f"inline; filename=\"{s_filename}\"")
-            resp.headers.set("Content-Type", s_mimetype)
+            s_mimetype = "application/msword" if s_filename.lower().endswith(".doc") else "application/vnd.openxmlformats-officedocument.wordprocessingml.document" if s_filename.lower().endswith(".docx") else s_mimetype
+            resp = send_file(o_out, mimetype=s_mimetype, as_attachment=bl_download, download_name=s_filename)
+            # resp = make_response(o_out)
+            # resp.headers.set("Content-Disposition", f"attachment; filename=\"{s_filename}\"" if bl_download else f"inline; filename=\"{s_filename}\"")
+            # resp.headers.set("Content-Type", s_mimetype)
             return resp
         else:
             return make_response("No upload retrieved", 500)

flask_app/app/static/cv_db/css/alteram/styles.css

@@ -1,47 +0,0 @@
-body {
-font-family: Arial;
-background-color: white;
-color: rgb(39, 37, 92);
-}
-h2 {
-font-family: caviardreams;
-font-size: 14pt;
-background-color: white;
-color: rgb(39, 37, 92);
-}
-a {
-color: rgb(250,122,30);
-}
-a.visited {
-color: rgb(250,122,30);
-}
-#tbl_layout {
-border: 0px solid transparent;
-}
-#tbl_layout td {
-text-align: left;
-}
-.td_nav {
-width: 20%;
-}
-.td_top {
-vertical-align: top;
-}
-div {
-line-height: 1.2;
-margin-bottom: 10px;
-}
-table.multirow {
-border: 2px solid DimGray;
-}
-table.multirow tr {
-vertical-align: top;
-}
-table.multirow th {
-text-align: left;
-border: 1px solid DimGray;
-}
-table.multirow td {
-text-align: left;
-border: 1px solid DimGray;
-}

flask_app/app/static/cv_db/css/alteram/styles_1.css

@@ -0,0 +1,199 @@
+@font-face {
+    font-family: CaviarDreams;
+    src:
+      local("CaviarDreams"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams.woff") format("woff"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams.ttf") format('truetype');
+    font-weight: normal;
+  }
+  
+  @font-face {
+    font-family: CaviarDreams;
+    src:
+      local("CaviarDreams"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams_Bold.woff") format("woff"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams_Bold.ttf") format('truetype');
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  :root {
+    --primary-color: rgb(39, 37, 92);
+    --accent-color: rgb(250, 122, 30);
+    --accent-light: rgba(250, 122, 30, 0.8);
+    --accent-lighter: rgba(250, 122, 30, 0.1);
+    --background-color: white;
+    --table-header-bg: rgba(39, 37, 92, 0.9);
+    --table-row-hover: rgba(250, 122, 30, 0.05);
+    --table-border: rgba(39, 37, 92, 0.2);
+  }
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: CaviarDreams, Arial, sans-serif;
+    background-color: var(--background-color);
+    color: var(--primary-color);
+    min-height: 100vh;
+    position: relative;
+  }
+  
+  .background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-image: url("https://dev.blindza.com/static/cv_db/css/alteram/alteram1_1_600x197.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    background-size: contain;
+    z-index: -1;
+    opacity: 0.15;
+  }
+  
+  header {
+    background-color: rgba(255, 255, 255, 0.95);
+    padding: 1rem 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 100;
+  }
+  
+  .header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem;
+    max-width: 1140px;
+    margin: 0 auto;
+  }
+  
+  .logo-area {
+    width: 180px;
+    height: 60px;
+    background-image: url("https://dev.blindza.com/static/cv_db/css/alteram/alteram1_1_600x197.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: left center;
+    margin-left: -250px;
+  }
+  
+  nav {
+    display: flex;
+    align-items: center;
+  }
+  
+  ul.nav {
+    display: flex;
+    list-style: none;
+    gap: 1rem;
+  }
+  
+  ul.nav li a {
+    color: var(--accent-color);
+    text-decoration: none;
+    font-weight: 600;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    background-color: transparent;
+    border: 2px solid var(--accent-color);
+  }
+  
+  ul.nav li a:hover, 
+  ul.nav li a[aria-current="true"] {
+    background-color: var(--accent-color);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(250, 122, 30, 0.2);
+  }
+  
+  main {
+    padding-top: 250px;
+    min-height: calc(100vh - 100px);
+    justify-content: center;
+  }
+  
+  .content-container {
+    max-width: 1140px;
+    margin: 2rem auto;
+    padding: 0 2rem;
+  }
+  
+  .table-container {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    margin: 2rem auto;
+    width: 100%; /* Increased width */
+    max-width: 1400px; /* Optional: limit max width */
+  }
+  
+  .data-table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid var(--table-border);
+  }
+  
+  .data-table th {
+    background-color: var(--table-header-bg);
+    color: white;
+    padding: 1rem;
+    text-align: left;
+    font-weight: bold;
+  }
+  
+  .data-table td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--table-border);
+  }
+  
+  .data-table tbody tr:hover {
+    background-color: var(--table-row-hover);
+  }
+  
+  #div_alert {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--accent-color);
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 4px;
+    z-index: 1000;
+    display: none;
+    max-width: 80%;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  #div_alert.warning {
+    background-color: #e53e3e;
+  }
+  
+  @media (max-width: 768px) {
+    .header-container {
+      flex-direction: column;
+      gap: 1rem;
+      padding: 1rem;
+    }
+    
+    ul.nav {
+      justify-content: center;
+    }
+    
+    .data-table {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+  }

flask_app/app/static/cv_db/css/alteram/styles_2.css

@@ -0,0 +1,207 @@
+@font-face {
+    font-family: CaviarDreams;
+    src:
+      local("CaviarDreams"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams.woff") format("woff"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams.ttf") format('truetype');
+    font-weight: normal;
+  }
+  
+  @font-face {
+    font-family: CaviarDreams;
+    src:
+      local("CaviarDreams"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams_Bold.woff") format("woff"),
+      url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams_Bold.ttf") format('truetype');
+    font-weight: bold;
+  }
+  
+  :root {
+    --primary-color: rgb(39, 37, 92);
+    --accent-color: rgb(250, 122, 30);
+    --background-color: white;
+  }
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: CaviarDreams, Arial, sans-serif;
+    background-color: var(--background-color);
+    color: var(--primary-color);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  
+  
+  header {
+    background-color: rgba(255, 255, 255, 0.95);
+    padding: 1rem 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  }
+  
+  .header-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding: 5 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .logo-area {
+    width: 180px;
+    height: 60px;
+    background-image: url("https://dev.blindza.com/static/cv_db/css/alteram/alteram1_1_600x197.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: left center;
+    margin-left: -250px;
+  }
+  
+  ul.nav {
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+  }
+  
+  ul.nav li {
+    display: inline-block;
+  }
+  
+  ul.nav li a {
+    color: var(--accent-color);
+    text-decoration: none;
+    font-weight: 600;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    border: 2px solid var(--accent-color);
+  }
+  
+  ul.nav li a:hover {
+    background-color: var(--accent-color);
+    color: white;
+  }
+  
+  .content {
+    flex: 1;
+    max-width: 500px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+  
+  .title h2 {
+  font-family: CaviarDreams, Arial, sans-serif;
+    color: var(--primary-color);
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  
+  label {
+    color: var(--primary-color);
+    font-weight: bold;
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  
+  input[type="text"],
+  input[type="password"] {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid rgba(39, 37, 92, 0.2);
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 1rem;
+    transition: border-color 0.3s ease;
+  }
+  
+  input[type="text"]:focus,
+  input[type="password"]:focus {
+    outline: none;
+    border-color: var(--accent-color);
+  }
+  
+  input[type="submit"] {
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 1rem;
+    border-radius: 4px;
+    font-family: inherit;
+    font-weight: bold;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  
+  input[type="submit"]:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(250, 122, 30, 0.2);
+  }
+  
+  #div_alert {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--accent-color);
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 4px;
+    text-align: center;
+    z-index: 1000;
+    display: none;
+    max-width: 80%;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  #div_alert.warning {
+    background-color: #e53e3e;
+  }
+  
+  @media (max-width: 768px) {
+    .content {
+      margin: 1rem;
+      padding: 1.5rem;
+    }
+  }
+  
+  .table-container {
+    display: flex;
+    justify-content: center; /* centers the table */
+    padding: 2rem;
+  }
+  
+  .data-table {
+    width: 90%; /* increase or adjust to 100% if needed */
+    border-collapse: collapse;
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  .data-table th,
+  .data-table td {
+    padding: 1rem;
+    border: 1px solid rgba(39, 37, 92, 0.2);
+    text-align: left;
+    color: var(--primary-color);
+  }
+  

flask_app/app/static/cv_db/css/styles.css

@@ -1,19 +1,36 @@
-body {
-    font-family: arial;
-    background-color: silver;
-    color: #000000;
+@font-face {
+font-family: CaviarDreams;
+src:
+local("CaviarDreams"),
+url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams.woff") format("woff"),
+url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams.ttf") format('truetype');
+font-weight: normal;
+}
+@font-face {
+font-family: CaviarDreams;
+src:
+local("CaviarDreams"),
+url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams_Bold.woff") format("woff"),
+url("https://dev.blindza.com/static/cv_db/css/alteram/CaviarDreams_Bold.ttf") format('truetype');
+font-weight: bold;
+font-style: normal;
+}
+body {
+    font-family: CaviarDreams, Arial, sans-serif;
+    background-color: white;
+    color: rgb(39, 37, 92);
 }
 h2 {
-    font-family: arial;
+    font-family: CaviarDreams, Arial, sans-serif;
     font-size: 14pt;
-    background-color: silver;
-    color: #000000;
+    background-color: white;
+    color: rgb(39, 37, 92);
 }
 a {
-    color: DarkGreen;
+    color: rgb(250,122,30);
 }
 a.visited {
-    color: DarkGreen;
+    color: rgb(250,122,30);
 }
 #tbl_layout {
 border: 0px solid transparent;

flask_app/app/templates/base.html

@@ -53,20 +53,23 @@ if (String(s_msg).length>0) {
 {% endif %}{# end of js check #}
 <title>C.V. Database - {% block title %}{% endblock %}</title>
 <link type="text/css" rel="stylesheet" href="{{ url_for("static", filename="cv_db/css/styles.css") }}" />
+<link type="text/css" rel="stylesheet" href="{{ url_for("static", filename="cv_db/css/alteram/styles_1.css") }}" />
+<link type="text/css" rel="stylesheet" href="{{ url_for("static", filename="cv_db/css/alteram/styles_2.css") }}" />
 <style>
-ul.nav {
-text-align: left;
-}
-ul.nav li {
-display: inline-block;
+.data-table th {
+color: white;
 }
 </style>
 {% block head_extra %}{% endblock head_extra %}
 </head>
 <body>
 {% from "macros/console.html" import console_replacement %}
-{{ console_replacement() }}
-<div><ul class="nav" role="navigation">
+{# { console_replacement() } #}
+<header>
+<div class="header-container">
+<div class="logo-area"></div>
+<nav>
+<ul class="nav" role="navigation">
 {% if current_user %}
 <li><a href="{{ url_for("main.index") }}">Landing page</a></li>
 {% if current_user.bl_admin %}
@@ -81,10 +84,17 @@ display: inline-block;
 {% else %}
 <li><a href="{{ url_for("auth.login") }}">Login</a></li>
 {% endif %}
-</ul></div>
-<div class="content">
+</ul>
+</nav>
+</div><!-- end of div.header-container -->
+</header>
+
+<main>
+<div class="background-container"></div>
+<div class="content-container content">
 <div id="div_alert" style="text-align: center;" aria-live="assertive">&nbsp;</div>
 {% block content %}{% endblock %}
 </div><!-- end of div.content -->
+</main>
 </body>
 </html>

flask_app/app/templates/capture_record.html

@@ -3,12 +3,13 @@
 {% block content %}
 {% import "macros/action_icons_static.html" as icons %}
 <span class="title"><h2>{% block title %}Add/edit record{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 {% if record_id>0 %}<div><a href="{{ url_for("main.uploads", i_record=record_id) }}">Record Uploads</a></div>{% endif %}
 <form action="{{ url_for("main.capture_record", i_record=record_id) }}" method="post" id="frm_capture">
 {{ form.csrf_token }}
 {{ form.hid_record_id }}
-<table class="multirow">
+<div class="table-container">
+<table class="data-table">
 <tr>
 <th><label>Position | Role</label></th><td><label for="sel_department_id">Department</label>&nbsp;<select id="sel_department_id" name="sel_department_id">
 {% for department in departments %}
@@ -76,6 +77,7 @@
 </td>
 </tr>
 </table>
+</div><!-- div.table-container -->
 <input type="submit" name="btn_save" value="Save">
 </form>
 {% if record_id>0 %}

flask_app/app/templates/errors/404.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 <span class="title"><h2>{% block title %} 404 error - Page not found{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 Sorry, but, that URL is not operational
 </div><!-- end of div.content -->
 {% endblock %}

flask_app/app/templates/errors/500.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 <span class="title"><h2>{% block title %}Error - exception{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 Sorry - an error/exception occurred
 </div><!-- end of div.content -->
 <div id="div_details" style="display: inline;">

flask_app/app/templates/index.html

@@ -24,7 +24,7 @@ font-size: smaller;
 {% block content %}
 {% import "macros/action_icons_static.html" as icons %}
 <span class="title"><h2>{% block title %}Landing page{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 <div id="div_filter">
 <h3>Filtering/Searching options</h3>
 <form action="{{ url_for("main.index") }}" method="post" id="frm_filters">
@@ -73,7 +73,8 @@ font-size: smaller;
 </div><!-- end of div_filter -->
 {% if records %}
 <h3>Records</h3>
-<table class="multirow" id="tbl_records">
+<div class="table-container">
+<table class="data-table" id="tbl_records">
 <thead>
 <tr>
 <th>Surname</th><th>First name</th><th>Years experience</th><th>Contact number</th><th>E-mail</th><th>Qualifications</th><th style="font-size: smaller;">[actions]</th>
@@ -105,6 +106,7 @@ font-size: smaller;
 </tr>
 {% endfor %}{# end of looping through records #}
 </table><!-- end of tbl_records -->
+</div><!-- end of div.table-container -->
 <div class="paging">
 <div>Paging...</div>
 

flask_app/app/templates/qualifications.html

@@ -10,12 +10,13 @@ display: none;
 {% block content %}
 {% import "macros/action_icons_static.html" as icons %}
 <span class="title" role="main"><h2>{% block title %}Qualifications{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 <article>
 <h3>Qualification Types</h3>
 <div><a href="#" id="a_add_type">Add qualification type</a></div>
 {% if qualification_types %}
-<table id="tbl_types" class="multirow">
+<div class="table-container">
+<table id="tbl_types" class="data-table">
 <thead>
 <tr>
 <th>Qualification type</th><th style="font-size: smaller;">(actions)</th>
@@ -28,7 +29,8 @@ display: none;
 </tr>
 {% endfor %}{# end of looping through qualification_types #}
 </tbody>
-</table>
+</table><!-- end of tbl_types -->
+</div><!-- end of div.table-container -->
 {% endif %}{# end of checking if qualification_types populated #}
 </article>
 <article>
@@ -42,14 +44,16 @@ display: none;
 {% endfor %}{# end of looping through qualification_types #}
 </select><input type="button" id="btn_type_filter" value="Apply filter">
 </div>
-<table id="tbl_qualifications" class="multirow">
+<div class="table-container">
+<table id="tbl_qualifications" class="data-table">
 <thead>
 <tr>
 <th>Qualification type</th><th>Qualification Name</th><th>Qualification Description</th><th style="font-size: smaller;">(actions)</th>
 </tr>
 </thead>
 <tbody></tbody>
-</table>
+</table><!-- end of tbl_qualifications -->
+</div><!-- end of div.table-container -->
 </div><!-- end of div_qualifications -->
 </article>
 </div><!-- end of div.content -->

flask_app/app/templates/roles.html

@@ -10,12 +10,13 @@ display: none;
 {% block content %}
 {% import "macros/action_icons_static.html" as icons %}
 <span class="title" role="main"><h2>{% block title %}Roles{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 <article>
 <h3>Departments</h3>
 <div><a href="#" id="a_add_department">Add department</a></div>
 {% if departments %}
-<table id="tbl_departments" class="multirow">
+<div class="table-container">
+<table id="tbl_departments" class="data-table">
 <thead>
 <tr>
 <th>Department</th><th style="font-size: smaller;">(actions)</th>
@@ -28,7 +29,8 @@ display: none;
 </tr>
 {% endfor %}{# end of looping through qualification_types #}
 </tbody>
-</table>
+</table><!-- end of tbl_departments -->
+</div><!-- end of div.table-container -->
 {% endif %}{# end of checking if departments populated #}
 </article>
 {% if departments %}
@@ -43,14 +45,16 @@ display: none;
 {% endfor %}{# end of looping through departments #}
 </select><input type="button" id="btn_department_filter" value="Apply filter">
 </div>
-<table id="tbl_roles" class="multirow">
+<div class="table-container">
+<table id="tbl_roles" class="data-table">
 <thead>
 <tr>
 <th>Department</th><th>Role</th><th>Description</th><th style="font-size: smaller;">(actions)</th>
 </tr>
 </thead>
 <tbody></tbody>
-</table>
+</table><!-- end of tbl_roles -->
+</div><!-- end of div.table-container -->
 </div><!-- end of div_roles -->
 </article>
 {% endif %}{# end of checking if departments populated #}

flask_app/app/templates/uploads.html

@@ -4,7 +4,7 @@
 {% import "macros/action_icons_static.html" as icons %}
 <span class="title"><h2>{% block title %}Capture Record Uploads{% endblock %}</h2></span>
 <div>Manage documents for <span style="font-weight: bold;">{{ names }}</span>.</div>
-<div class="content">
+<div class="content-container content">
 {% if record_qualifications %}
 <article>
 <h3>Current Qualifications on Record - for reference</h3>
@@ -19,7 +19,8 @@
 <h3>Upload Documents</h3>
 <div><a href="#" id="a_upload_document">Upload Document</a></div>
 {% if document_uploads %}
-<table class="multirow" id="tbl_uploads">
+<div class="table-container">
+<table class="data-table" id="tbl_uploads">
 <thead>
 <tr>
 <th>File Name</th><th>Type</th><th>Matching Qualification></th><th>Description</th><th style="font-size: smaller;">[Actions]</th>
@@ -32,7 +33,8 @@
 </tr>
 {% endfor %}{# end of looping through existing document uploads #}
 </tbody>
-</table>
+</table><!-- end of tbl_uploads -->
+</div><!-- end of div.table-container -->
 {% endif %}{# end of checking for existing document uploads #}
 </article>
 </div><!-- end of div.content -->

flask_app/app/templates/users.html

@@ -3,11 +3,12 @@
 {% block content %}
 {% import "macros/action_icons_static.html" as icons %}
 <span class="title" role="main"><h2>{% block title %}Access User Profiles{% endblock %}</h2></span>
-<div class="content">
+<div class="content-container content">
 <article>
 <div><a href="#" id="a_add_user">{{ icons.add_svg() }}</a></div>
 {% if users %}
-<table id="tbl_users" class="multirow">
+<div class="table-container">
+<table id="tbl_users" class="data-table">
 <thead>
 <tr>
 <th>User ID</th><th>Admin activities</th><th>Capture activities</th><th style="font-size: smaller;">[actions]</th>
@@ -20,7 +21,8 @@
 </tr>
 {% endfor %}{# end of looping through users #}
 </tbody>
-</table>
+</table><!-- end of tbl_users -->
+</div><!-- end of div.table-container -->
 {% endif %}{# end of checking if users exist #}
 </article>
 </div><!-- end of div.content -->