Back button now redirects correctly

- Footer sticks to bottom of page even with
shorter content
- Header now takes up full width of page, Header
content still at readable width
- Add light verion of logo, more colored variants
can be made
- Change table header background color

docker/ploughshares/app.py

@@ -291,6 +291,12 @@ def get_transaction_documents(transaction_id):
 
 @app.route('/transaction/<int:id>')
 def view_transaction(id):
+    """
+    Get Source (Either homepage or pending page)
+    """
+
+    source = request.args.get("src")
+
     """
     View a transaction
     """
@@ -331,7 +337,7 @@ def view_transaction(id):
     if transaction is None:
         abort(404)
         
-    return render_template('view_transaction.html', transaction=transaction, documents=documents, prev_id=prev_id, next_id=next_id, version=VERSION)
+    return render_template('view_transaction.html', transaction=transaction, documents=documents, prev_id=prev_id, next_id=next_id, version=VERSION, source = source)
 
 @app.route('/document/<int:document_id>')
 def view_document(document_id):

docker/ploughshares/static/css/custom.css

@@ -3,8 +3,6 @@
 /* System font stack */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    padding-top: 20px;
-    padding-bottom: 20px;
     color: #333333; /* Improved text contrast */
     line-height: 1.5; /* Improved readability */
     font-size: 16px; /* Base font size for better readability */
@@ -29,8 +27,16 @@ body {
 
 /* Header styles */
 .header {
+    margin-left: -50vw;
+    margin-right: -50vw;
     border-bottom: 1px solid #d0d0d0;
     margin-bottom: 30px;
+    background-color: var(--ploughshares-blue) !important;
+}
+
+.header > div {
+    max-width: 1320px;
+    margin: auto;
 }
 
 .header h3 {
@@ -58,6 +64,10 @@ body {
     box-shadow: 0 0 0 0.2rem rgba(74, 122, 171, 0.25);
 }
 
+#pending-count-btn {
+    margin-left: 5px;
+}
+
 /* Improved form labels for accessibility */
 label {
     font-weight: 500;
@@ -84,15 +94,18 @@ label {
 /* Logo styles */
 .logo-container {
     display: flex;
+    flex-direction: column;
     align-items: center;
 }
 
+.logo-container div {
+    font-size: 14px;
+}
+
 .navbar-brand img {
-    max-height: 40px;
+    max-height: 60px;
     width: auto;
     margin-right: 10px;
-    /* Improved logo contrast with background */
-    background-color: white;
     padding: 3px;
     border-radius: 4px;
 }
@@ -203,7 +216,16 @@ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:foc
 /* Navbar styles */
 .navbar {
     background-color: var(--ploughshares-blue) !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px 10px 20px 10px;
+}
+
+.navbar-brand {
+    transition: opacity 0.5s ease-in-out ;
+}
+
+.navbar-brand:hover {
+    text-decoration: none;
+    opacity: 80%;
 }
 
 .navbar-light .navbar-brand {
@@ -254,9 +276,8 @@ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:foc
 }
 
 .table th {
-    background-color: var(--ploughshares-blue);
-    color: white;
     font-weight: 500;
+    font-size: 18px;
     border-bottom: 2px solid var(--ploughshares-dark-blue);
 }
 

docker/ploughshares/templates/base.html

@@ -12,13 +12,13 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/hotkeys.css') }}">
     <style>
-        .navbar-brand img {
+        .container {
-            max-height: 40px;
-            margin-right: 10px;
-        }
-        .logo-container {
             display: flex;
-            align-items: center;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .content {
+            flex: 1;
         }
     </style>
 </head>
@@ -28,46 +28,47 @@
     
     <div class="container">
         <header class="header clearfix">
-            <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div>
-                <div class="container-fluid">
+                <nav class="navbar navbar-expand-lg navbar-light bg-light">
-                    <a class="navbar-brand" href="{{ url_for('index') }}" aria-label="Project Ploughshares Home">
+                    <div class="container-fluid">
-                        <div class="logo-container">
+                        <a class="navbar-brand" href="{{ url_for('index') }}" aria-label="Project Ploughshares Home">
-                            <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Project Ploughshares Logo" width="180" height="40">
+                            <div class="logo-container">
-                            <span class="d-none d-md-inline">Transaction Management System</span>
+                                <img src="{{ url_for('static', filename='img/logo-light.png') }}" alt="Project Ploughshares Logo">
-                        </div>
+                                <div class="d-none d-md-inline">Transaction Management System</div>
-                    </a>
+                            </div>
-                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                        </a>
-                        <span class="navbar-toggler-icon"></span>
+                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                    </button>
+                            <span class="navbar-toggler-icon"></span>
-                    <div class="collapse navbar-collapse" id="navbarNav">
+                        </button>
-                        <ul class="navbar-nav ms-auto">
+                        <div class="collapse navbar-collapse" id="navbarNav">
-                            <li class="nav-item">
+                            <ul class="navbar-nav ms-auto">
-                                <a class="nav-link" href="{{ url_for('index') }}" aria-current="{% if request.endpoint == 'index' %}page{% endif %}">
+                                <li class="nav-item">
-                                    <i class="bi bi-house-door" aria-hidden="true"></i> Home
+                                    <a class="nav-link" href="{{ url_for('index') }}" aria-current="{% if request.endpoint == 'index' %}page{% endif %}">
-                                </a>
+                                        <i class="bi bi-house-door" aria-hidden="true"></i> Home
-                            </li>
+                                    </a>
-                            <li class="nav-item">
+                                </li>
-                                <a class="nav-link" href="{{ url_for('create_transaction') }}" aria-current="{% if request.endpoint == 'create_transaction' %}page{% endif %}">
+                                <li class="nav-item">
-                                    <i class="bi bi-plus-circle" aria-hidden="true"></i> New Transaction
+                                    <a class="nav-link" href="{{ url_for('create_transaction') }}" aria-current="{% if request.endpoint == 'create_transaction' %}page{% endif %}">
-                                </a>
+                                        <i class="bi bi-plus-circle" aria-hidden="true"></i> New Transaction
-                            </li>
+                                    </a>
+                                </li>
                             <li class="nav-item">
                                 <a class="nav-link" href="{{ url_for('pending_approval') }}" aria-current="{% if request.endpoint == 'pending_approval' %}page{% endif %}">
-                                    <i class="bi bi-clock-history" aria-hidden="true"></i> Pending Approval
+                                    <i class="bi bi-clock-history" aria-hidden="true"></i> Pending
                                     <span class="badge bg-warning rounded-pill" id="pending-count"></span>
                                 </a>
                             </li>
-                            <li class="nav-item">
+                                <li class="nav-item">
-                                <a class="nav-link" href="{{ url_for('api_docs') }}" aria-current="{% if request.endpoint == 'api_docs' %}page{% endif %}">
+                                    <a class="nav-link" href="{{ url_for('api_docs') }}" aria-current="{% if request.endpoint == 'api_docs' %}page{% endif %}">
-                                    <i class="bi bi-file-earmark-text" aria-hidden="true"></i> API Documentation
+                                        <i class="bi bi-file-earmark-text" aria-hidden="true"></i> API Docs
-                                </a>
+                                    </a>
-                            </li>
+                                </li>
-                        </ul>
+                            </ul>
+                        </div>
                     </div>
-                </div>
+                </nav>
-            </nav>
+            </div>
         </header>
-
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
         <div class="alert-container" role="alert">

docker/ploughshares/templates/index.html

@@ -7,18 +7,18 @@
     <div class="card">
         <div class="card-header d-flex justify-content-between align-items-center">
             <h2>Transactions</h2>
-            <div class="d-flex gap-2">
+            <div class="d-flex gap-2 align-items-center">
                 <div class="input-group">
                     <input type="text" id="searchInput" class="form-control" placeholder="Search transactions..." aria-label="Search transactions">
                     <button class="btn btn-outline-secondary" type="button" id="searchButton" title="Search (F)">
                         <i class="bi bi-search"></i>
                     </button>
                 </div>
-                <a href="{{ url_for('pending_approval') }}" class="btn btn-warning" title="Pending Approval (P)">
+                <a href="{{ url_for('pending_approval') }}" class="btn btn-warning d-flex" title="Pending Approval (P)">
-                    <i class="bi bi-clock-history"></i> <span class="d-none d-md-inline">Pending</span> <span class="badge bg-light text-dark" id="pending-count-btn"></span>
+                    <i class="bi bi-clock-history"></i> <span class="badge bg-light text-dark" id="pending-count-btn"></span>
                 </a>
                 <a href="{{ url_for('create_transaction') }}" class="btn btn-success" title="New Transaction (N)">
-                    <i class="bi bi-plus-lg"></i> <span class="d-none d-md-inline">New Transaction</span> <span class="d-md-none">New</span> <span class="d-none d-md-inline">(N)</span>
+                    <i class="bi bi-plus-lg"></i> <span class="d-md-none">New</span>
                 </a>
             </div>
         </div>

docker/ploughshares/templates/pending_approval.html

@@ -52,7 +52,7 @@
                                 </td>
                                 <td>
                                     <div class="btn-group" role="group">
-                                        <a href="{{ url_for('view_transaction', id=transaction['id']) }}" class="btn btn-sm btn-info" aria-label="View transaction {{ transaction['id'] }}" title="View ({{ loop.index if loop.index < 10 else '' }})">
+                                        <a href="{{ url_for('view_transaction', id=transaction['id'], src='pending') }}" class="btn btn-sm btn-info" aria-label="View transaction {{ transaction['id'] }}" title="View ({{ loop.index if loop.index < 10 else '' }})">
                                             <i class="bi bi-eye"></i>{% if loop.index < 10 %} <span class="badge bg-light text-dark">{{ loop.index }}</span>{% endif %}
                                         </a>
                                         <a href="{{ url_for('update_transaction', id=transaction['id']) }}" class="btn btn-sm btn-warning" aria-label="Edit transaction {{ transaction['id'] }}">

docker/ploughshares/templates/view_transaction.html

@@ -11,7 +11,7 @@
                 <a href="{{ url_for('update_transaction', id=transaction['id']) }}" class="btn btn-warning" title="Edit Transaction (E)">
                     <i class="bi bi-pencil"></i> Edit <span class="d-none d-md-inline">(E)</span>
                 </a>
-                <a href="{{ url_for('index') }}" class="btn btn-secondary" title="Back to List (B)">
+                <a href="{{ url_for('pending_approval') if (source == 'pending') else url_for('index') }}" class="btn btn-secondary" title="Back to List (B)">
                     <i class="bi bi-arrow-left"></i> Back to List <span class="d-none d-md-inline">(B)</span>
                 </a>
             </div>