forked from FrederikBaerentsen/BrickTracker
Fixed mobile view and added lightbox
This commit is contained in:
parent
1bab668b98
commit
e0b2334c93
@ -1,8 +1,8 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- CSS Reset -->
|
<!-- CSS Reset -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
|
||||||
|
|
||||||
@ -11,12 +11,74 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-table {
|
||||||
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
padding: 0px 0px 0px 0px;
|
padding: 0px 0px 0px 0px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
height: 50px;
|
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 {
|
.centered-cell {
|
||||||
text-align: center; /* Center the content horizontally within the cell */
|
text-align: center; /* Center the content horizontally within the cell */
|
||||||
}
|
}
|
||||||
@ -57,16 +119,46 @@ td {
|
|||||||
td img{
|
td img{
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
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>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>{{ title }}</h1>
|
<h1 style="margin: 20px 0px 0px 0px;">{{ title }}</h1>
|
||||||
<hr>
|
<hr>
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,17 +1,18 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>Inventory</h1>
|
<center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center>
|
||||||
<table id="data" class="table table-striped">
|
<div class="center-table">
|
||||||
|
<table id="data">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>ID</th>
|
<th style="text-align:center;margin:0px;" class="fixed-width hidden-mobile">ID</th>
|
||||||
<th>Name</th>
|
<th class="fixed-width hidden-mobile">Name</th>
|
||||||
<th>Color</th>
|
<th>Color</th>
|
||||||
<th>Qty</th>
|
<th style="text-align: center;" class="fixed-width">Qty</th>
|
||||||
{% for i in json_file['unit'] %}
|
{% for i in json_file['unit'] %}
|
||||||
<th>Missing ({{ loop.index }})</th>
|
<th style="text-align: center;" class="fixed-width">Missing ({{ loop.index }})</th>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -22,12 +23,12 @@
|
|||||||
{% if brick.element_id == None %}
|
{% if brick.element_id == None %}
|
||||||
<td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
|
<td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
|
||||||
{% else %}
|
{% 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 %}
|
{% endif %}
|
||||||
<td>{{ brick.part.part_num }}</td>
|
<td style="text-align:center;margin:0px;" class="hidden-mobile">{{ brick.part.part_num }}</td>
|
||||||
<td>{{ brick.part.name }}</td>
|
<td class="hidden-mobile">{{ brick.part.name }}</td>
|
||||||
<td>{{ brick.color.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'] %}
|
{% for i in json_file['unit'] %}
|
||||||
|
|
||||||
<td class="centered-cell">
|
<td class="centered-cell">
|
||||||
@ -63,6 +64,7 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1>Spares</h1>
|
<h1>Spares</h1>
|
||||||
<table id="data" class="table table-striped">
|
<table id="data" class="table table-striped">
|
||||||
@ -114,7 +116,68 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tr>
|
</tr>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="lightbox-modal">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<img class="lightbox-content" id="lightbox-image">
|
||||||
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% 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 %}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user