unify page styles

mieweb · runleveldev · Oct 28, 2025 · Oct 20, 2025 · Oct 21, 2025 · Oct 21, 2025
commit 2db0c5e64f8ed7d0cc8486366be91c4ba6fd4416
diff --git a/create-a-container/public/style.css b/create-a-container/public/style.css
@@ -4,19 +4,19 @@ body {
     display: flex;
     align-items: flex-start; /* Changed from center to flex-start for top alignment */
     justify-content: center;
-    height: 100vh;
+    min-height: 100vh;
     margin: 0;
-    padding-top: 2rem; /* Added padding to give space from the top */
+    padding-top: 5rem; /* Added padding to account for fixed navbar */
     overflow-y: auto; /* Allow scrolling if content is too long */
 }
 
 .main-content-wrapper {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
+    flex-direction: column;
+    align-items: center;
     gap: 2rem;
     width: 100%;
-    max-width: 900px; /* Increased max-width for two columns */
+    max-width: 600px;
     padding: 0 1rem;
 }
 
@@ -165,16 +165,18 @@ select:focus {
 
 /* Navbar container for logout button */
 .navbar {
-    position: absolute;
+    position: fixed;
     top: 0;
+    left: 0;
     right: 0;
+    width: 100%;
     background-color: #2c3e50;
     color: white;
     padding: 0.5rem 1rem;
-    border-bottom-left-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    z-index: 1000;
 }
 
 /* Logout button style */
@@ -183,6 +185,7 @@ select:focus {
     color: white;
     border: none;
     padding: 0.5rem 1rem;
+    margin-right: 2rem;
     border-radius: 4px;
     cursor: pointer;
     font-size: 1rem;

diff --git a/create-a-container/views/containers.ejs b/create-a-container/views/containers.ejs
@@ -1,44 +1,75 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
+<head>
+    <meta charset="UTF-8">
+    <title>Your Containers - MIE</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Your Containers</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
-  </head>
-  <body>
-    <div class="container">
-      <h1>Your Containers</h1>
-      <a class="btn btn-primary" href="/containers/new" role="button">New Container</a>
+    <link href="/style.css" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg">
+        <div class="container-fluid">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item active" aria-current="page"><a href="/containers">Containers</a></li>
+            </ol>
+            <form method="POST" action="/logout">
+                <button type="submit" class="btn btn-danger logout-button">Logout</button>
+            </form>
+        </div>
+    </nav>
 
-      <table class="table align-middle">
-        <thead>
-          <tr>
-            <th>Hostname</th>
-            <th>IPv4</th>
-            <th>OS Release</th>
-            <th>SSH Port</th>
-            <th>HTTP Port</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% if (rows && rows.length) { %>
-            <% rows.forEach(r => { %>
-              <tr>
-                <td><%= r.hostname %></td>
-                <td><%= r.ipv4Address %></td>
-                <td><%= r.osRelease %></td>
-                <td><%= r.sshPort || '' %></td>
-                <td><%= r.httpPort || '' %></td>
-              </tr>
-            <% }) %>
-          <% } else { %>
-            <tr><td colspan="5" class="text-muted">No containers found.</td></tr>
-          <% } %>
-        </tbody>
-      </table>
-    </div>
+    <main class="container mt-4">
+        <div class="row justify-content-center">
+            <div class="col-12 col-lg-10">
+                <div class="card shadow-sm">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center mb-3">
+                            <h4 class="card-title mb-0">Your Containers</h4>
+                            <a class="btn btn-primary" href="/containers/new" role="button">New Container</a>
+                        </div>
+
+                        <div class="table-responsive">
+                            <table class="table table-hover table-bordered align-middle mb-0">
+                                <thead class="table-light">
+                                    <tr>
+                                        <th>Hostname</th>
+                                        <th>IPv4</th>
+                                        <th>OS Release</th>
+                                        <th>SSH Port</th>
+                                        <th>HTTP Port</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <% if (rows && rows.length) { %>
+                                        <% rows.forEach(r => { %>
+                                            <tr>
+                                                <td><%= r.hostname %></td>
+                                                <td><%= r.ipv4Address || '-' %></td>
+                                                <td><%= r.osRelease || '-' %></td>
+                                                <td><%= r.sshPort || '-' %></td>
+                                                <td><%= r.httpPort || '-' %></td>
+                                            </tr>
+                                        <% }) %>
+                                    <% } else { %>
+                                        <tr>
+                                            <td colspan="5" class="text-muted text-center py-4">
+                                                No containers found. Click "New Container" to create your first one.
+                                            </td>
+                                        </tr>
+                                    <% } %>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="card-footer text-muted text-center small">
+                        &copy; 2025 Medical Informatics Engineering
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-  </body>
+</body>
 </html>
diff --git a/create-a-container/views/form.html b/create-a-container/views/form.html
@@ -4,14 +4,21 @@
     <meta charset="UTF-8">
     <title>MIE Container Creation</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link href="/style.css" rel="stylesheet">
 </head>
 <body>
-    <div class="navbar">
-        <form id="logoutForm" method="POST" action="/logout" style="display:inline;">
-            <button class="logout-button">Logout</button>
-        </form>
-    </div>
+    <nav class="navbar navbar-expand-lg">
+        <div class="container-fluid">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="/containers">Containers</a></li>
+                <li class="breadcrumb-item active" aria-current="page">New</li>
+            </ol>
+            <form method="POST" action="/logout">
+                <button type="submit" class="btn btn-danger logout-button">Logout</button>
+            </form>
+        </div>
+    </nav>
     <div class="main-content-wrapper">
         <div class="login-container">
             <img src="/logo.png" alt="Company Logo" class="logo">