forked from FrederikBaerentsen/BrickTracker
More CSS fix
This commit is contained in:
parent
e0b2334c93
commit
27180ae9d6
@ -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) */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
@ -100,4 +66,4 @@ button:hover {
|
||||
padding: 2px 16px;
|
||||
background-color: #5cb85c;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
@ -20,6 +20,19 @@ th {
|
||||
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 {
|
||||
}
|
||||
|
||||
@ -136,6 +149,32 @@ td img{
|
||||
height: 100%;
|
||||
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 {
|
||||
position: absolute;
|
||||
@ -153,12 +192,14 @@ td img{
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button>
|
||||
<div class="container">
|
||||
<h1 style="margin: 20px 0px 0px 0px;">{{ title }}</h1>
|
||||
<h2 style="margin: 20px 0px 0px 0px;">{{ title }}</h2>
|
||||
<hr>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
@ -3,7 +3,7 @@
|
||||
{% block content %}
|
||||
<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">
|
||||
<table id="data" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@ -123,16 +123,25 @@
|
||||
|
||||
|
||||
<div id="lightbox-modal">
|
||||
<span class="close">×</span>
|
||||
<img class="lightbox-content" id="lightbox-image">
|
||||
<div class="lightbox-wrapper">
|
||||
<span class="close">×</span>
|
||||
<img class="lightbox-content" id="lightbox-image">
|
||||
<div class="text-container" id="lightbox-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
|
||||
function goToPage(url) {
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
const expandButton = document.getElementById('expand-button');
|
||||
const dataTable = document.getElementById('data');
|
||||
let isExpanded = false;
|
||||
@ -155,12 +164,15 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
|
||||
const lightboxModal = document.getElementById('lightbox-modal');
|
||||
const lightboxImage = document.getElementById('lightbox-image');
|
||||
const lightboxText = document.getElementById('lightbox-text');
|
||||
const closeModal = document.querySelector('.close');
|
||||
|
||||
lightboxTrigger.forEach(function (element) {
|
||||
element.addEventListener('click', function () {
|
||||
const imgSrc = element.getAttribute('src');
|
||||
const textContent = element.closest('tr').querySelector('td:nth-child(3)').textContent; // Adjust the index accordingly
|
||||
lightboxImage.setAttribute('src', imgSrc);
|
||||
lightboxText.textContent = textContent;
|
||||
lightboxModal.style.display = 'block';
|
||||
});
|
||||
});
|
||||
@ -170,13 +182,20 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
|
||||
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';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user