hjess/LifeFaq
1
0
Fork 0
generated from hjess/PythonTemplateProject
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug somewhere
All checks were successful
Build, Push, and Deploy to Nomad / docker-nomad (push) Successful in 40s
Details

Browse Source
This commit is contained in:
Henrik Jess
2024-12-19 20:20:07 +01:00
parent af9c8f77fd
commit 7e5c31b00d
5 changed files with 102 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
static/css/main.css
View File

@@ -2500,12 +2500,11 @@ button:disabled,
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
display: flex;
@@ -2516,20 +2515,26 @@ button:disabled,
.modal-content {
background-color: #fff;
padding: 20px;
padding: 5px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow: hidden;
position: relative;
min-width: 70vw;
min-height: 70vh;
max-width: 95vw;
max-height: 95vh;
overflow: auto;
justify-content: center; /* Centrer billedet i modal horisontalt */
align-items: center; /* Centrer billedet i modal vertikalt */
flex-direction: column; /* Knapper placeres nedenunder billedet */
}
.modal-content img {
width: 100%;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 5px;
border-radius: 15px;
margin: 0 auto;
}
.modal-content .modal-buttons {
display: flex;
@@ -2539,9 +2544,7 @@ button:disabled,
}
.modal-content .modal-buttons button {
position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */
padding: 12px 18px;
font-size: 16px;
margin: 20px;
cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease;
}
@@ -2549,14 +2552,6 @@ button:disabled,
transform: scale(1.05);
z-index: 3; /* Hæver knappen øverst ved hover */
}
.modal-content .modal-buttons button:nth-child(odd) {
transform: rotate(10deg); /* Roterer med uret */
z-index: 1; /* Start-lag for ulige knapper */
}
.modal-content .modal-buttons button:nth-child(even) {
transform: rotate(-10deg); /* Roterer mod uret */
z-index: 2; /* Lidt højere lag for lige knapper */
}
.modal-content .close-btn {
position: absolute;
transform: translateX(-50%);

2
static/css/main.css.map
View File

File diff suppressed because one or more lines are too long

52
static/sass/components/_modals.scss
View File

@@ -36,12 +36,11 @@ $button-color: #000;
// Modal background
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
background: $modal-bg;
backdrop-filter: blur($modal-blur);
display: flex;
@@ -53,20 +52,25 @@ $button-color: #000;
// Modal content
.modal-content {
background-color: $modal-content-bg;
padding: 20px;
padding: 5px;
border-radius: 8px;
box-shadow: $modal-content-shadow;
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow: hidden;
position: relative;
min-width: 70vw;
min-height: 70vh;
max-width: 95vw; // Maks bredde på 90% af viewportens bredde
max-height: 95vh; // Maks højde på 90% af viewportens højde
overflow: auto; // Tilføj scroll, hvis indholdet bliver for stort
justify-content: center; /* Centrer billedet i modal horisontalt */
align-items: center; /* Centrer billedet i modal vertikalt */
flex-direction: column; /* Knapper placeres nedenunder billedet */
img {
width: 100%;
height: auto;
max-width: 90vw; // Maks bredde på 90% af viewportens bredde
max-height: 90vh; // Maks højde på 90% af viewportens højde
object-fit: contain;
border-radius: 5px;
border-radius: 15px;
margin: 0 auto;
}
// Modal knapper (bevarer globale værdier)
@@ -78,9 +82,7 @@ $button-color: #000;
button {
position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */
padding: 12px 18px;
font-size: 16px;
margin: 20px;
cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease;
@@ -89,16 +91,6 @@ $button-color: #000;
z-index: 3; /* Hæver knappen øverst ved hover */
}
}
button:nth-child(odd) {
transform: rotate(10deg); /* Roterer med uret */
z-index: 1; /* Start-lag for ulige knapper */
}
button:nth-child(even) {
transform: rotate(-10deg); /* Roterer mod uret */
z-index: 2; /* Lidt højere lag for lige knapper */
}
}
.close-btn {
@@ -107,12 +99,12 @@ $button-color: #000;
cursor: pointer;
}
}
.next-btn {
cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease;
}
.next-btn {
cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease;
}
// Thumbnail styling (forsiden)
.thumbnail {
width: 150px;