FrederikBaerentsen/BrickTracker
4
4
Fork 3
Code Issues 9 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Fixed #3

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-06-19 17:03:06 +02:00
parent 048331945e
commit 86376cf1eb
2 changed files with 23 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
templates/base.html
View File

@ -10,63 +10,16 @@
<style>
th {
text-align: left;
margin: 0px;
padding: 5px 0px 5px 0px;
}
table {
width: 100%; /* Ensure the table takes full width of its container */
border-collapse: collapse; /* Collapse the borders of the table */
}
table {
width: 100%; /* Ensure the table takes full width of its container */
#data {
width: 100%;
border-collapse: collapse;
}
.name-class {
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*
#data th:nth-child(3),
#data td:nth-child(3) {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} */
.center-table {
overflow-x: auto;
}
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 */
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
@media only screen and (min-width: 600px) {
@ -76,44 +29,17 @@ td {
}
}
@media only screen and (max-width: 600px) {
table {
width: auto; /* Expand table to full width on mobile */
}
.center-table {
overflow-x: auto; /* Enable horizontal scrolling */
}
.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;
}
@media only screen and (max-width: 480px) {
/* horizontal scrollbar for tables if mobile screen */
.hidden-mobile {
display: none;
}
}
.centered-cell {
text-align: center; /* Center the content horizontally within the cell */
}
.highlighted {
background-color: yellow; /* Adjust as needed */
}
@ -140,13 +66,6 @@ background-color: white;
padding: 16px;
}
/* Table */
td img{
display: block;
margin-left: auto;
margin-right: 5px;
}
.inputContainer {
display: inline-block; /* Display as an inline block */
@ -248,7 +167,7 @@ td img{
Home
</a>
<a class="navbar-item hidden-desktop" id="expand-button">
<a class="navbar-item hidden-1desktop" id="expand-button">
Expand Columns
</a>

22
templates/table.html
View File

@ -1,15 +1,15 @@
{% extends "base.html" %}
{% block content %}
<div class="center-table" >
<table id="data" class="table">
<div style="overflow-x:auto;">
<table id="data" class="table tablemobile">
<thead>
<tr>
<th class="fixed-width"></th>
<th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
<th class="fixed-width hidden-mobile">Color</th>
<th class="fixed-width" style="text-align: center;">Qty</th>
<th class="fixed-width" style="text-align: center;">Missing</th>
<th style="width:65px;">Image</th>
<th class="hidden-mobile name-class">Name</th>
<th class="hidden-mobile">Color</th>
<th>Qty</th>
<th style="text-align:center;">Missing</th>
</tr>
</thead>
<tbody>
@ -18,13 +18,13 @@
{% if brick[5] == 'nil' %}
<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
{% else %}
<td><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"loading="lazy"></td>
<td style="width:65px;height:55px;"><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"loading="lazy"></td>
{% endif %}
<td style="text-align:left;margin:0px;width:100%;" class="hidden-mobile name-class">{{ brick[3] }}</td>
<td style="white-space: nowrap;" class="hidden-mobile">{{ brick[7] }}</td>
<td style="text-align:left;" class="hidden-mobile name-class">{{ brick[3] }}</td>
<td style="text-align:left;white-space: nowrap;" class="hidden-mobile">{{ brick[7] }}</td>
<td style="text-align: center;">{{ brick[8] }}</td>
<td class="centered-cell">
<td style="text-align:right;" class="centered-cell">
<div class="inputContainer">
{% set ns = namespace(count='') %}
<form id="number-form">