From 23419e9cebe33fe7aef1ae13bb7cc211e8ed2098 Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Sun, 6 Apr 2025 16:44:45 +0530
Subject: [PATCH] Move css to separate files

Move css styles from `<style>` tags to `static/css/`.
More modularity.
---
 static/css/csv_preview.css | 39 +++++++++++++++++++++++++++++++++++
 static/css/delete_page.css | 30 +++++++++++++++++++++++++++
 static/css/form_page.css   | 30 +++++++++++++++++++++++++++
 static/css/upload_page.css |  8 ++++++++
 static/css/view_table.css  |  8 ++++++++
 templates/csv_preview.html | 42 +-------------------------------------
 templates/delete.html      | 33 +-----------------------------
 templates/item_form.html   | 33 +-----------------------------
 templates/upload.html      | 11 +---------
 templates/viewList.html    | 12 +----------
 10 files changed, 120 insertions(+), 126 deletions(-)
 create mode 100644 static/css/csv_preview.css
 create mode 100644 static/css/delete_page.css
 create mode 100644 static/css/form_page.css
 create mode 100644 static/css/upload_page.css
 create mode 100644 static/css/view_table.css

diff --git a/static/css/csv_preview.css b/static/css/csv_preview.css
new file mode 100644
index 0000000..447bbc4
--- /dev/null
+++ b/static/css/csv_preview.css
@@ -0,0 +1,39 @@
+/* Custom styles for the preview page */
+.table-container {
+    overflow-x: auto;
+    margin-bottom: 2rem;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+}
+.table-valid-entries {
+    background-color: rgba(212, 237, 218, 0.1);
+}
+.table-invalid-entries {
+    background-color: rgba(248, 215, 218, 0.1);
+}
+[contenteditable="true"] {
+    padding: 0.5rem;
+    min-width: 100px;
+}
+[contenteditable="true"]:focus {
+    outline: 2px solid #86b7fe;
+    background-color: white;
+}
+.sticky-actions {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+    margin-top: 2rem;
+}
+.error-details {
+    background-color: #f8d7da;
+    border-left: 4px solid #dc3545;
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+.error-details summary {
+    font-weight: bold;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/static/css/delete_page.css b/static/css/delete_page.css
new file mode 100644
index 0000000..ec23810
--- /dev/null
+++ b/static/css/delete_page.css
@@ -0,0 +1,30 @@
+.delete-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+.preview-card {
+    background: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+.attribute-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+.attribute-item {
+    padding: 0.75rem;
+    border-bottom: 1px solid #eee;
+}
+.attribute-label {
+    font-weight: 600;
+    color: #6c757d;
+}
+.sticky-actions {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+    margin-top: 2rem;
+}
\ No newline at end of file
diff --git a/static/css/form_page.css b/static/css/form_page.css
new file mode 100644
index 0000000..c878e42
--- /dev/null
+++ b/static/css/form_page.css
@@ -0,0 +1,30 @@
+.form-container {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+.form-card {
+    background: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+}
+.form-field {
+    margin-bottom: 1.5rem;
+}
+.sticky-actions {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+    margin-top: 2rem;
+}
+.error-message {
+    color: #dc3545;
+    margin-bottom: 1.5rem;
+    padding: 0.75rem;
+    background-color: #f8d7da;
+    border-radius: 0.25rem;
+}
+select.form-control {
+    appearance: auto; /* Keep native select dropdown arrow */
+}
\ No newline at end of file
diff --git a/static/css/upload_page.css b/static/css/upload_page.css
new file mode 100644
index 0000000..8ffac63
--- /dev/null
+++ b/static/css/upload_page.css
@@ -0,0 +1,8 @@
+.upload-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+.error-details {
+    background-color: #f8d7da;
+    border-left: 4px solid #dc3545;
+}
\ No newline at end of file
diff --git a/static/css/view_table.css b/static/css/view_table.css
new file mode 100644
index 0000000..0e83654
--- /dev/null
+++ b/static/css/view_table.css
@@ -0,0 +1,8 @@
+.table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1rem;
+}
+.action-buttons {
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/templates/csv_preview.html b/templates/csv_preview.html
index df46834..7924a0b 100644
--- a/templates/csv_preview.html
+++ b/templates/csv_preview.html
@@ -7,47 +7,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
-        /* Custom styles for the preview page */
-        .table-container {
-            overflow-x: auto;
-            margin-bottom: 2rem;
-            border: 1px solid #dee2e6;
-            border-radius: 0.25rem;
-        }
-        .table-valid-entries {
-            background-color: rgba(212, 237, 218, 0.1);
-        }
-        .table-invalid-entries {
-            background-color: rgba(248, 215, 218, 0.1);
-        }
-        [contenteditable="true"] {
-            padding: 0.5rem;
-            min-width: 100px;
-        }
-        [contenteditable="true"]:focus {
-            outline: 2px solid #86b7fe;
-            background-color: white;
-        }
-        .sticky-actions {
-            position: sticky;
-            bottom: 0;
-            background: white;
-            padding: 1rem 0;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-        .error-details {
-            background-color: #f8d7da;
-            border-left: 4px solid #dc3545;
-            padding: 1rem;
-            margin-bottom: 2rem;
-        }
-        .error-details summary {
-            font-weight: bold;
-            cursor: pointer;
-        }
-    </style>
+    <link href="{{ url_for('static', filename='css/csv_preview.css') }}" rel="stylesheet">
 </head>
 <body>
     {% include 'header.html' %}
diff --git a/templates/delete.html b/templates/delete.html
index d217d52..9ac01f8 100644
--- a/templates/delete.html
+++ b/templates/delete.html
@@ -6,38 +6,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
-        .delete-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        .preview-card {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-        }
-        .attribute-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1rem;
-        }
-        .attribute-item {
-            padding: 0.75rem;
-            border-bottom: 1px solid #eee;
-        }
-        .attribute-label {
-            font-weight: 600;
-            color: #6c757d;
-        }
-        .sticky-actions {
-            position: sticky;
-            bottom: 0;
-            background: white;
-            padding: 1rem 0;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-    </style>
+    <link href="{{ url_for('static', filename='css/delete_page.css') }}" rel="stylesheet">
 </head>
 <body>
     {% include 'header.html' %}
diff --git a/templates/item_form.html b/templates/item_form.html
index b2438f8..82419fc 100644
--- a/templates/item_form.html
+++ b/templates/item_form.html
@@ -6,38 +6,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
-        .form-container {
-            max-width: 1000px;
-            margin: 0 auto;
-        }
-        .form-card {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
-        }
-        .form-field {
-            margin-bottom: 1.5rem;
-        }
-        .sticky-actions {
-            position: sticky;
-            bottom: 0;
-            background: white;
-            padding: 1rem 0;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-        .error-message {
-            color: #dc3545;
-            margin-bottom: 1.5rem;
-            padding: 0.75rem;
-            background-color: #f8d7da;
-            border-radius: 0.25rem;
-        }
-        select.form-control {
-            appearance: auto; /* Keep native select dropdown arrow */
-        }
-    </style>
+    <link href="{{ url_for('static', filename='css/form_page.css') }}" rel="stylesheet">
 </head>
 <body>
     {% include 'header.html' %}
diff --git a/templates/upload.html b/templates/upload.html
index d6fc5b2..9dc52d4 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -7,16 +7,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
-        .upload-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        .error-details {
-            background-color: #f8d7da;
-            border-left: 4px solid #dc3545;
-        }
-    </style>
+    <link href="{{ url_for('static', filename='css/upload_page.css') }}" rel="stylesheet">
 </head>
 <body>
     {% include 'header.html' %}
diff --git a/templates/viewList.html b/templates/viewList.html
index 4b774d4..500d65c 100644
--- a/templates/viewList.html
+++ b/templates/viewList.html
@@ -6,17 +6,7 @@
     <title>View Inventory</title>
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
-    <style>
-        /* Minimal custom CSS for table responsiveness */
-        .table-container {
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
-            margin-bottom: 1rem;
-        }
-        .action-buttons {
-            white-space: nowrap;
-        }
-    </style>
+    <link href="{{ url_for('static', filename='static/css/view_table.css') }}" rel="stylesheet">
 </head>
 <body>
     {% include 'header.html' %}