vorboid/BrickTracker
1
0
Fork 0
forked from FrederikBaerentsen/BrickTracker
Code Pull Requests Activity

More CSS fix

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-03-04 09:24:13 -05:00
parent e0b2334c93
commit 27180ae9d6
3 changed files with 68 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/style.css
View File

@ -1,37 +1,3 @@
body {
font-family: Arial, sans-serif;
margin: 10px;
}
h1 {
color: #333;
}
form {
margin-top: 20px;
}
label {
font-weight: bold;
}
input[type="number"] {
padding: 5px;
margin-right: 10px;
}
button {
padding: 8px 12px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
/* The Modal (background) */ /* The Modal (background) */
.modal { .modal {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
@ -100,4 +66,4 @@ button:hover {
padding: 2px 16px; padding: 2px 16px;
background-color: #5cb85c; background-color: #5cb85c;
color: white; color: white;
} }

43
templates/base.html
View File

@ -20,6 +20,19 @@ th {
table { table {
} }
#data {
width: 100%;
border-collapse: collapse;
}
#data th:nth-child(3),
#data td:nth-child(3) {
max-width: 300px; /* Adjust as needed */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.center-table { .center-table {
} }
@ -136,6 +149,32 @@ td img{
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
} }
.lightbox-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#lightbox-text {
position: absolute;
bottom: 20px; /* Adjust as needed */
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */
color: white;
text-align: center;
}
#lightbox-modal .close { #lightbox-modal .close {
position: absolute; position: absolute;
@ -153,12 +192,14 @@ td img{
max-height: 90%; max-height: 90%;
} }
</style> </style>
</head> </head>
<body> <body>
<button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button>
<div class="container"> <div class="container">
<h1 style="margin: 20px 0px 0px 0px;">{{ title }}</h1> <h2 style="margin: 20px 0px 0px 0px;">{{ title }}</h2>
<hr> <hr>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>

31
templates/bootstrap_table.html
View File

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center> <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"> <div class="center-table">
<table id="data"> <table id="data" class="table">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -123,16 +123,25 @@
<div id="lightbox-modal"> <div id="lightbox-modal">
<span class="close">&times;</span> <div class="lightbox-wrapper">
<img class="lightbox-content" id="lightbox-image"> <span class="close">&times;</span>
<img class="lightbox-content" id="lightbox-image">
<div class="text-container" id="lightbox-text"></div>
</div>
</div> </div>
{% endblock %}
{% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
function goToPage(url) {
window.location.href = url;
}
const expandButton = document.getElementById('expand-button'); const expandButton = document.getElementById('expand-button');
const dataTable = document.getElementById('data'); const dataTable = document.getElementById('data');
let isExpanded = false; let isExpanded = false;
@ -155,12 +164,15 @@ document.addEventListener('DOMContentLoaded', function () {
const lightboxTrigger = document.querySelectorAll('.lightbox-trigger'); const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
const lightboxModal = document.getElementById('lightbox-modal'); const lightboxModal = document.getElementById('lightbox-modal');
const lightboxImage = document.getElementById('lightbox-image'); const lightboxImage = document.getElementById('lightbox-image');
const lightboxText = document.getElementById('lightbox-text');
const closeModal = document.querySelector('.close'); const closeModal = document.querySelector('.close');
lightboxTrigger.forEach(function (element) { lightboxTrigger.forEach(function (element) {
element.addEventListener('click', function () { element.addEventListener('click', function () {
const imgSrc = element.getAttribute('src'); const imgSrc = element.getAttribute('src');
const textContent = element.closest('tr').querySelector('td:nth-child(3)').textContent; // Adjust the index accordingly
lightboxImage.setAttribute('src', imgSrc); lightboxImage.setAttribute('src', imgSrc);
lightboxText.textContent = textContent;
lightboxModal.style.display = 'block'; lightboxModal.style.display = 'block';
}); });
}); });
@ -170,13 +182,20 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
lightboxModal.addEventListener('click', function (event) { lightboxModal.addEventListener('click', function (event) {
if (event.target === lightboxModal) { if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
// Dismiss only if the clicked element is part of the content area
lightboxModal.style.display = 'none';
}
});
// Dismiss the lightbox when clicking outside the content area (i.e., the background)
lightboxModal.addEventListener('click', function (event) {
if (event.target != lightboxModal) {
lightboxModal.style.display = 'none'; lightboxModal.style.display = 'none';
} }
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}