diff --git a/templates/base.html b/templates/base.html
index 44dc1b8..f9eb69f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,8 +1,8 @@
<!doctype html>
<html>
<head>
- <title>{{ title }}</title>
-
+ <title>{{ title }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
@@ -11,12 +11,74 @@
<style>
+th {
+ text-align: left;
+ margin: 0px;
+ padding: 5px 0px 5px 0px;
+}
+
+table {
+}
+
+.center-table {
+}
+
td {
padding: 0px 0px 0px 0px;
margin-left: 10px;
height: 50px;
+ min-width: 55px;
+ display: table-cell;
+ white-space: nowrap; /* Prevent text wrapping */
+ overflow: hidden; /* Hide overflow content */
+ text-overflow: ellipsis; /* Display ellipsis for overflow content */
}
+
+.hidden-mobile {
+ display: table-cell;
+}
+
+.table-container {
+ overflow-x: auto; /* Enable horizontal scrolling */
+}
+
+.table-wrapper {
+ overflow-x: auto; /* Enable horizontal scrolling */
+}
+
+@media only screen and (min-width: 600px) {
+
+ .hidden-desktop {
+ display: none;
+ }
+
+}
+@media only screen and (max-width: 600px) {
+ table {
+ width: 100%; /* Expand table to full width on mobile */
+ table-layout: fixed;
+ }
+
+
+ .fixed-width {
+ width: 100%;
+ }
+
+ td:first-child {
+ position: sticky;
+ left: 0;
+ z-index: 1;
+ background-color: #fff; /* Make the first column background white */
+ }
+
+
+ .hidden-mobile {
+ display: none;
+ }
+}
+
+
.centered-cell {
text-align: center; /* Center the content horizontally within the cell */
}
@@ -57,16 +119,46 @@ td {
td img{
display: block;
margin-left: auto;
- margin-right: auto;
+ margin-right: 5px;
}
+
+ /* Modal Styles */
+#lightbox-modal {
+ display: none;
+ position: fixed;
+ z-index: 1000;
+ padding-top: 50px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.5);
+}
+
+#lightbox-modal .close {
+ position: absolute;
+ top: 10px;
+ right: 25px;
+ font-size: 50px;
+ color: white;
+ cursor: pointer;
+}
+
+#lightbox-modal img {
+ display: block;
+ margin: 0 auto;
+ max-width: 90%;
+ max-height: 90%;
+}
+
</style>
</head>
<body>
<div class="container">
- <h1>{{ title }}</h1>
+ <h1 style="margin: 20px 0px 0px 0px;">{{ title }}</h1>
<hr>
{% block content %}{% endblock %}
</div>
diff --git a/templates/bootstrap_table.html b/templates/bootstrap_table.html
index 5c9b20c..3bd7339 100644
--- a/templates/bootstrap_table.html
+++ b/templates/bootstrap_table.html
@@ -1,17 +1,18 @@
{% extends "base.html" %}
{% block content %}
-<h1>Inventory</h1>
-<table id="data" class="table table-striped">
+<center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center>
+<div class="center-table">
+<table id="data">
<thead>
<tr>
<th></th>
- <th>ID</th>
- <th>Name</th>
+ <th style="text-align:center;margin:0px;" class="fixed-width hidden-mobile">ID</th>
+ <th class="fixed-width hidden-mobile">Name</th>
<th>Color</th>
- <th>Qty</th>
+ <th style="text-align: center;" class="fixed-width">Qty</th>
{% for i in json_file['unit'] %}
- <th>Missing ({{ loop.index }})</th>
+ <th style="text-align: center;" class="fixed-width">Missing ({{ loop.index }})</th>
{% endfor %}
</tr>
</thead>
@@ -22,12 +23,12 @@
{% if brick.element_id == None %}
<td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
{% else %}
- <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td>
+ <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
{% endif %}
- <td>{{ brick.part.part_num }}</td>
- <td>{{ brick.part.name }}</td>
+ <td style="text-align:center;margin:0px;" class="hidden-mobile">{{ brick.part.part_num }}</td>
+ <td class="hidden-mobile">{{ brick.part.name }}</td>
<td>{{ brick.color.name }}</td>
- <td>{{ brick.quantity }}</td>
+ <td style="text-align:center;">{{ brick.quantity }}</td>
{% for i in json_file['unit'] %}
<td class="centered-cell">
@@ -63,6 +64,7 @@
{% endfor %}
</tbody>
</table>
+</div>
<h1>Spares</h1>
<table id="data" class="table table-striped">
@@ -114,7 +116,68 @@
{% endfor %}
</tr>
{% endif %}
+
{% endfor %}
</tbody>
</table>
+
+
+<div id="lightbox-modal">
+ <span class="close">×</span>
+ <img class="lightbox-content" id="lightbox-image">
+</div>
+
{% endblock %}
+
+
+
+{% block scripts %}
+<script>
+ const expandButton = document.getElementById('expand-button');
+const dataTable = document.getElementById('data');
+let isExpanded = false;
+
+expandButton.addEventListener('click', () => {
+ const hiddenColumns = dataTable.querySelectorAll('.hidden-mobile');
+ hiddenColumns.forEach(column => {
+ if (isExpanded) {
+ column.style.display = 'none';
+ expandButton.textContent = 'Expand Columns';
+ } else {
+ column.style.display = 'table-cell';
+ expandButton.textContent = 'Hide Columns';
+ }
+ });
+ isExpanded = !isExpanded;
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+ const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
+ const lightboxModal = document.getElementById('lightbox-modal');
+ const lightboxImage = document.getElementById('lightbox-image');
+ const closeModal = document.querySelector('.close');
+
+ lightboxTrigger.forEach(function (element) {
+ element.addEventListener('click', function () {
+ const imgSrc = element.getAttribute('src');
+ lightboxImage.setAttribute('src', imgSrc);
+ lightboxModal.style.display = 'block';
+ });
+ });
+
+ closeModal.addEventListener('click', function () {
+ lightboxModal.style.display = 'none';
+ });
+
+ lightboxModal.addEventListener('click', function (event) {
+ if (event.target === lightboxModal) {
+ lightboxModal.style.display = 'none';
+ }
+ });
+});
+
+
+</script>
+
+{% endblock %}
+