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

Better CSS
All checks were successful
Build, Push, and Deploy to Nomad / docker-nomad (push) Successful in 33s
Details

Browse Source
This commit is contained in:
Henrik Jess Nielsen
2024-12-20 20:11:28 +01:00
parent 74685601b2
commit 18181d7ce8
6 changed files with 84 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitea/workflows/nomad-blue.hcl
View File

@@ -14,7 +14,7 @@ job "lifefaq-blue" {
network { network {
port "port-app" { port "port-app" {
to = 9212 # Internal application port to = 9210 # Internal application port
} }
} }
@@ -58,3 +58,4 @@ job "lifefaq-blue" {
} }
} }
} }

56
data/Kultur/index.html
View File

@@ -54,29 +54,29 @@
<li><strong>UCI El Corte Inglés</strong>: Den moderne biografoplevelse med de nyeste blockbusters. Sammenligneligt med Palads i København, men med en lidt mere luksuriøs oplevelse i selve komplekset.</li> <li><strong>UCI El Corte Inglés</strong>: Den moderne biografoplevelse med de nyeste blockbusters. Sammenligneligt med Palads i København, men med en lidt mere luksuriøs oplevelse i selve komplekset.</li>
</ul> </ul>
<p><div class="button-stack"> <p><div class="button-stack">
<button onclick="openModal('modalE149BE_0')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg" class="thumbnail"></button> <button onclick="openModal('modal7F1670_0')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg" class="thumbnail"></button>
<div class="modal" id="modalE149BE_0"> <div class="modal-content"> <div class="modal" id="modal7F1670_0"> <div class="modal-content">
<h2>Modal 0</h2> <h2>Modal 0</h2>
<img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg"> <img src="https://lifecooler.com/files/registos/imagens/404151/158177.jpg">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modalE149BE_0')">Close</button> <button onclick="closeModal('modal7F1670_0')">Close</button>
<button class="next-btn" onclick="nextModal('modalE149BE_0', 'modalE149BE_0_1')">Next</button> <button class="next-btn" onclick="nextModal('modal7F1670_0', 'modal7F1670_0_1')">Next</button>
</div> </div></div> </div> </div></div>
<button onclick="openModal('modalE149BE_0_1')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg" class="thumbnail" ></button> <button onclick="openModal('modal7F1670_0_1')" class="stacked-button"> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg" class="thumbnail" ></button>
<div class="modal" id="modalE149BE_0_1"> <div class="modal-content"> <div class="modal" id="modal7F1670_0_1"> <div class="modal-content">
<h2>Modal 1</h2> <h2>Modal 1</h2>
<img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg"> <img src="https://lifecooler.com/files/registos/imagens/404151/158170.jpg">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modalE149BE_0_1')">Close</button> <button onclick="closeModal('modal7F1670_0_1')">Close</button>
<button class="next-btn" onclick="nextModal('modalE149BE_0_1', 'modalE149BE_0_1_2')">Next</button> <button class="next-btn" onclick="nextModal('modal7F1670_0_1', 'modal7F1670_0_1_2')">Next</button>
</div> </div></div> </div> </div></div>
<button onclick="openModal('modalE149BE_0_1_2')" class="stacked-button"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg" class="thumbnail"></button> <button onclick="openModal('modal7F1670_0_1_2')" class="stacked-button"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg" class="thumbnail"></button>
<div class="modal" id="modalE149BE_0_1_2"> <div class="modal-content"> <div class="modal" id="modal7F1670_0_1_2"> <div class="modal-content">
<h2>Modal 2</h2> <h2>Modal 2</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Fachada_S%C3%A3oJorge.jpg">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modalE149BE_0_1_2')">Close</button> <button onclick="closeModal('modal7F1670_0_1_2')">Close</button>
<button class="next-btn" onclick="nextModal('modalE149BE_0_1_2', 'modalE149BE_0_1_2_0')">Next</button> <button class="next-btn" onclick="nextModal('modal7F1670_0_1_2', 'modal7F1670_0_1_2_0')">Next</button>
</div> </div></div> </div> </div></div>
</div></p> </div></p>
<p>Biografbesøg i Lissabon er en afslappet måde at tilbringe tid med familien. Jeg nyder selv at tage afsted med Erika for at dele både film og hygge.</p> <p>Biografbesøg i Lissabon er en afslappet måde at tilbringe tid med familien. Jeg nyder selv at tage afsted med Erika for at dele både film og hygge.</p>
@@ -104,37 +104,37 @@
<p>Samtidig er mange oplevelser billigere end i København, og her er en atmosfære, der er svær at finde nordpå: Lissabon har en unik blanding af tradition og modernitet, som gør den til en by, der bliver ved med at fascinere.</p> <p>Samtidig er mange oplevelser billigere end i København, og her er en atmosfære, der er svær at finde nordpå: Lissabon har en unik blanding af tradition og modernitet, som gør den til en by, der bliver ved med at fascinere.</p>
<h3>Lidt billeder</h3> <h3>Lidt billeder</h3>
<p><div class="button-stack"> <p><div class="button-stack">
<button onclick="openModal('modal6EF317_0')" class="stacked-button"> <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button> <button onclick="openModal('modalBA6A40_0')" class="stacked-button"> <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
<div class="modal" id="modal6EF317_0"> <div class="modal-content"> <div class="modal" id="modalBA6A40_0"> <div class="modal-content">
<h2>Modal 0</h2> <h2>Modal 0</h2>
<img src="https://picsum.photos/id/34/500/375"> <img src="https://picsum.photos/id/34/500/375">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0')">Close</button> <button onclick="closeModal('modalBA6A40_0')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0', 'modal6EF317_0_1')">Next</button> <button class="next-btn" onclick="nextModal('modalBA6A40_0', 'modalBA6A40_0_1')">Next</button>
</div> </div></div> </div> </div></div>
<button onclick="openModal('modal6EF317_0_1')" class="stacked-button"> <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button> <button onclick="openModal('modalBA6A40_0_1')" class="stacked-button"> <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
<div class="modal" id="modal6EF317_0_1"> <div class="modal-content"> <div class="modal" id="modalBA6A40_0_1"> <div class="modal-content">
<h2>Modal 1</h2> <h2>Modal 1</h2>
<img src="https://picsum.photos/id/42/500/375"> <img src="https://picsum.photos/id/42/500/375">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0_1')">Close</button> <button onclick="closeModal('modalBA6A40_0_1')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0_1', 'modal6EF317_0_1_2')">Next</button> <button class="next-btn" onclick="nextModal('modalBA6A40_0_1', 'modalBA6A40_0_1_2')">Next</button>
</div> </div></div> </div> </div></div>
<button onclick="openModal('modal6EF317_0_1_2')" class="stacked-button"> <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button> <button onclick="openModal('modalBA6A40_0_1_2')" class="stacked-button"> <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
<div class="modal" id="modal6EF317_0_1_2"> <div class="modal-content"> <div class="modal" id="modalBA6A40_0_1_2"> <div class="modal-content">
<h2>Modal 2</h2> <h2>Modal 2</h2>
<img src="https://picsum.photos/id/72/500/375"> <img src="https://picsum.photos/id/72/500/375">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0_1_2')">Close</button> <button onclick="closeModal('modalBA6A40_0_1_2')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0_1_2', 'modal6EF317_0_1_2_3')">Next</button> <button class="next-btn" onclick="nextModal('modalBA6A40_0_1_2', 'modalBA6A40_0_1_2_3')">Next</button>
</div> </div></div> </div> </div></div>
<button onclick="openModal('modal6EF317_0_1_2_3')" class="stacked-button"> <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button> <button onclick="openModal('modalBA6A40_0_1_2_3')" class="stacked-button"> <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
<div class="modal" id="modal6EF317_0_1_2_3"> <div class="modal-content"> <div class="modal" id="modalBA6A40_0_1_2_3"> <div class="modal-content">
<h2>Modal 3</h2> <h2>Modal 3</h2>
<img src="https://picsum.photos/id/94/500/375"> <img src="https://picsum.photos/id/94/500/375">
<div class="modal-buttons"> <div class="modal-buttons">
<button onclick="closeModal('modal6EF317_0_1_2_3')">Close</button> <button onclick="closeModal('modalBA6A40_0_1_2_3')">Close</button>
<button class="next-btn" onclick="nextModal('modal6EF317_0_1_2_3', 'modal6EF317_0_1_2_3_0')">Next</button> <button class="next-btn" onclick="nextModal('modalBA6A40_0_1_2_3', 'modalBA6A40_0_1_2_3_0')">Next</button>
</div> </div></div> </div> </div></div>
</div></p> </div></p>
</div> </div>

14
generated_data.json
View File

@@ -6,17 +6,17 @@
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Populære områder i Portugal", "name": "Bolig i Portugal",
"path": "Bolig", "path": "Bolig",
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Supermarkedssammenligning", "name": "El- og vandregninger i Portugal: Sådan påvirker de leveomkostningerne",
"path": "Budget", "path": "Budget",
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Flytte permanent til Portugal", "name": "Permanent ophold i Portugal",
"path": "Flytning", "path": "Flytning",
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
@@ -36,7 +36,7 @@
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Priser på mad og dagligvarer i Portugal", "name": "Omkostninger ved at bo i Portugal vs Danmark",
"path": "Hverdag", "path": "Hverdag",
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
@@ -46,12 +46,12 @@
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Nattelivet i Portugal", "name": "Portugals unikke kultur",
"path": "Kultur", "path": "Kultur",
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Portugiserne som mennesker", "name": "Livskvalitet i Portugal",
"path": "Livskvalitet", "path": "Livskvalitet",
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
@@ -81,7 +81,7 @@
"author": "Henrik Jess" "author": "Henrik Jess"
}, },
{ {
"name": "Fordele ved offentlig transport i Portugal", "name": "Er transport billigere i Portugal?",
"path": "Transport", "path": "Transport",
"author": "Henrik Jess" "author": "Henrik Jess"
} }

37
static/css/main.css
View File

@@ -2519,49 +2519,52 @@ button:disabled,
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
position: relative; position: relative;
display: flex;
justify-content: center; /* Centrer horisontalt */
align-items: center; /* Centrer vertikalt */
flex-direction: column; /* Placer knapper under billedet */
min-width: 70vw; min-width: 70vw;
min-height: 70vh; min-height: 70vh;
max-width: 95vw; max-width: 95vw;
max-height: 95vh; max-height: 95vh;
overflow: auto; 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 { .modal-content img {
display: block;
height: auto; height: auto;
max-width: 90vw; max-width: 95%; /* Maks bredde på 90% af modalens bredde */
max-height: 90vh; max-height: 78vh; /* Maks højde på 80% af viewporten */
object-fit: contain; margin-bottom: 20px;
object-fit: contain; /* Skaler billedet korrekt */
border-radius: 15px; border-radius: 15px;
margin: 0 auto; margin: 0 auto; /* Som ekstra sikkerhed */
} }
.modal-content .modal-buttons { .modal-content .modal-buttons {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex; display: flex;
justify-content: center; gap: 15vh;
position: relative; background-color: #ffffff;
margin-top: 20px;
} }
.modal-content .modal-buttons button { .modal-content .modal-buttons button {
position: relative; /* Tillader z-index at tage effekt */ border: none;
margin: 20px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease; transition: background-color 0.3s ease, transform 0.2s ease;
} }
.modal-content .modal-buttons button:hover { .modal-content .modal-buttons button:hover {
transform: scale(1.05); transform: scale(1.05);
z-index: 3; /* Hæver knappen øverst ved hover */
} }
.modal-content .close-btn { .modal-content .close-btn {
position: absolute;
transform: translateX(-50%); transform: translateX(-50%);
cursor: pointer; cursor: pointer;
margin-left: 5vw;
} }
.next-btn { .next-btn {
cursor: pointer; cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }

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

File diff suppressed because one or more lines are too long

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

@@ -55,54 +55,57 @@ $button-color: #000;
padding: 5px; padding: 5px;
border-radius: 8px; border-radius: 8px;
box-shadow: $modal-content-shadow; box-shadow: $modal-content-shadow;
position: relative; position: relative; // Referenceramme til knapper med absolute positioning
display: flex; // Aktivér Flexbox
justify-content: center; /* Centrer horisontalt */
align-items: center; /* Centrer vertikalt */
flex-direction: column; /* Placer knapper under billedet */
min-width: 70vw; min-width: 70vw;
min-height: 70vh; min-height: 70vh;
max-width: 95vw; // Maks bredde på 90% af viewportens bredde max-width: 95vw;
max-height: 95vh; // Maks højde på 90% af viewportens højde max-height: 95vh;
overflow: auto; // Tilføj scroll, hvis indholdet bliver for stort 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 */
img { img {
display: block; // Sørg for, at img ikke har default inline opførsel
height: auto; height: auto;
max-width: 90vw; // Maks bredde på 90% af viewportens bredde max-width: 95%; /* Maks bredde på 90% af modalens bredde */
max-height: 90vh; // Maks højde på 90% af viewportens højde max-height: 78vh; /* Maks højde på 80% af viewporten */
object-fit: contain; margin-bottom: 20px;
object-fit: contain; /* Skaler billedet korrekt */
border-radius: 15px; border-radius: 15px;
margin: 0 auto; margin: 0 auto; /* Som ekstra sikkerhed */
} }
// Modal knapper (bevarer globale værdier) // Modal knapper (bevarer globale værdier)
.modal-buttons { .modal-buttons {
position: absolute; // Fastgør knapperne relativt til modal-content
bottom: 20px; // Afstand fra bunden af modal
left: 50%; // Centrerer containeren horisontalt
transform: translateX(-50%); // Juster for centrering
display: flex; display: flex;
justify-content: center; gap: 15vh;
position: relative; background-color: #ffffff;
margin-top: 20px;
button { button {
position: relative; /* Tillader z-index at tage effekt */ border: none;
margin: 20px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, z-index 0.3s ease; transition: background-color 0.3s ease, transform 0.2s ease;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
z-index: 3; /* Hæver knappen øverst ved hover */
} }
} }
} }
.close-btn { .close-btn {
position: absolute;
transform: translateX(-50%); transform: translateX(-50%);
cursor: pointer; cursor: pointer;
margin-left: 5vw;
} }
} }
.next-btn { .next-btn {
cursor: pointer; cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
// Thumbnail styling (forsiden) // Thumbnail styling (forsiden)