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 36s
Details

Browse Source
This commit is contained in:
Henrik Jess Nielsen
2024-12-17 22:34:05 +01:00
parent 8d9f714701
commit 5d6b621a99
7 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/services/markdown_render.py
View File

@@ -50,12 +50,11 @@ def slider(options, images):
html_content = []
html_content.append('<div class="modal-buttons">')
for i, val in enumerate(images):
if i % 2 == 0:
html_content.append(f"""<button onclick="openModal('modal{i}')" class="open"> <img src="{val}" class="thumbnail"></button>""".strip())
else:
html_content.append(f"""<button onclick="openModal('modal{i}')" class="open_inv"> <img src="{val}" class="thumbnail" ></button>""".strip())
html_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <img src="{val}" width="80%" height="80%"> <button onclick="closeModal('modal{i}')">Close</button> </div> </div>""")
if i % 2 == 0:
html_content.append(f"""<button onclick="openModal('modal{i}')" class="open"> <img src="{val}" class="thumbnail"></button>""".strip())
else:
html_content.append(f"""<button onclick="openModal('modal{i}')" class="open_inv"> <img src="{val}" class="thumbnail" ></button>""".strip())
html_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <img src="{val}" width="80%" height="80%"> <button onclick="closeModal('modal{i}')">Close</button><button class="next-btn" onclick="nextModal('modal{i}', 'modal{i+1}')">Next</button></div> </div>""")
html_content.append( '</div>' )
html = '\n'.join( html_content )

3
data/Kultur/0200_kultur_unikt.md
View File

@@ -33,9 +33,8 @@ Kunst og kultur går hånd i hånd i Portugal. Byer som **Porto** og **Lissabon*
Portugal formår at kombinere historie, musik og mad med en afslappet livsstil. Det er en kultur, der er lige så rig på oplevelser, som den er på sjæl.
<h1 style="text-align: center;">FastAPI + Sass Image Carousel</h1>
### Lidt billeder
### Slider test
{{ slider(options={"width": 500, "height": 500}, images=["https://picsum.photos/id/34/500/375","https://picsum.photos/id/42/500/375","https://picsum.photos/id/72/500/375","https://picsum.photos/id/94/500/375"]) }}

12
data/Kultur/index.html
View File

@@ -57,18 +57,16 @@
<h3>En levende kunstscene</h3>
<p>Kunst og kultur går hånd i hånd i Portugal. Byer som <strong>Porto</strong> og <strong>Lissabon</strong> er fyldt med street art, museer og gallerier, der udtrykker både moderne og traditionel portugisisk kunst.</p>
<p>Portugal formår at kombinere historie, musik og mad med en afslappet livsstil. Det er en kultur, der er lige så rig på oplevelser, som den er på sjæl. </p>
<h1 style="text-align: center;">FastAPI + Sass Image Carousel</h1>
<h3>Slider test</h3>
<h3>Lidt billeder</h3>
<p><div class="modal-buttons">
<button onclick="openModal('modal0')" class="open"> <img src="https://picsum.photos/id/34/500/375" class="thumbnail"></button>
<div class="modal" id="modal0"> <div class="modal-content"> <h2>Modal 0</h2> <p>This is modal 0.</p> <img src="https://picsum.photos/id/34/500/375" width="80%" height="80%"> <button onclick="closeModal('modal0')">Close</button> </div> </div>
<div class="modal" id="modal0"> <div class="modal-content"> <h2>Modal 0</h2> <p>This is modal 0.</p> <img src="https://picsum.photos/id/34/500/375" width="80%" height="80%"> <button onclick="closeModal('modal0')">Close</button><button class="next-btn" onclick="nextModal('modal0', 'modal1')">Next</button></div> </div>
<button onclick="openModal('modal1')" class="open_inv"> <img src="https://picsum.photos/id/42/500/375" class="thumbnail" ></button>
<div class="modal" id="modal1"> <div class="modal-content"> <h2>Modal 1</h2> <p>This is modal 1.</p> <img src="https://picsum.photos/id/42/500/375" width="80%" height="80%"> <button onclick="closeModal('modal1')">Close</button> </div> </div>
<div class="modal" id="modal1"> <div class="modal-content"> <h2>Modal 1</h2> <p>This is modal 1.</p> <img src="https://picsum.photos/id/42/500/375" width="80%" height="80%"> <button onclick="closeModal('modal1')">Close</button><button class="next-btn" onclick="nextModal('modal1', 'modal2')">Next</button></div> </div>
<button onclick="openModal('modal2')" class="open"> <img src="https://picsum.photos/id/72/500/375" class="thumbnail"></button>
<div class="modal" id="modal2"> <div class="modal-content"> <h2>Modal 2</h2> <p>This is modal 2.</p> <img src="https://picsum.photos/id/72/500/375" width="80%" height="80%"> <button onclick="closeModal('modal2')">Close</button> </div> </div>
<div class="modal" id="modal2"> <div class="modal-content"> <h2>Modal 2</h2> <p>This is modal 2.</p> <img src="https://picsum.photos/id/72/500/375" width="80%" height="80%"> <button onclick="closeModal('modal2')">Close</button><button class="next-btn" onclick="nextModal('modal2', 'modal3')">Next</button></div> </div>
<button onclick="openModal('modal3')" class="open_inv"> <img src="https://picsum.photos/id/94/500/375" class="thumbnail" ></button>
<div class="modal" id="modal3"> <div class="modal-content"> <h2>Modal 3</h2> <p>This is modal 3.</p> <img src="https://picsum.photos/id/94/500/375" width="80%" height="80%"> <button onclick="closeModal('modal3')">Close</button> </div> </div>
<div class="modal" id="modal3"> <div class="modal-content"> <h2>Modal 3</h2> <p>This is modal 3.</p> <img src="https://picsum.photos/id/94/500/375" width="80%" height="80%"> <button onclick="closeModal('modal3')">Close</button><button class="next-btn" onclick="nextModal('modal3', 'modal4')">Next</button></div> </div>
</div></p>
</div>
<hr>

23
static/css/main.css
View File

@@ -2538,31 +2538,38 @@ button:disabled,
margin-top: 20px;
}
.modal-content .modal-buttons button {
margin: -10px; /* Gør overlap muligt */
position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */
padding: 12px 18px;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s ease;
transition: transform 0.3s ease, z-index 0.3s ease;
}
.modal-content .modal-buttons button:hover {
transform: scale(1.05);
z-index: 3; /* Hæver knappen øverst ved hover */
}
.modal-content .modal-buttons button:nth-child(odd) {
transform: rotate(10deg); /* Med uret */
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); /* Mod uret */
transform: rotate(-10deg); /* Roterer mod uret */
z-index: 2; /* Lidt højere lag for lige knapper */
}
.modal-content .close-btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.next-btn {
cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease;
}
.thumbnail {
width: 150px;
height: 100px;

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

File diff suppressed because one or more lines are too long

5
static/js/modal_handler.js
View File

@@ -18,6 +18,11 @@ function closeModal(modalId) {
}
}
function nextModal(currentModalId, nextModalId) {
closeModal(currentModalId); // Luk den nuværende modal
openModal(nextModalId); // Åbn den næste modal
}
// Ensure all modals are hidden on page load
document.addEventListener('DOMContentLoaded', () => {
const modals = document.querySelectorAll('.modal'); // Select all modals

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

@@ -77,37 +77,42 @@ $button-color: #000;
margin-top: 20px;
button {
margin: -10px; /* Gør overlap muligt */
position: relative; /* Tillader z-index at tage effekt */
margin: -20px; /* Øger negativ margin for mere overlap */
padding: 12px 18px;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s ease;
transition: transform 0.3s ease, z-index 0.3s ease;
&:hover {
transform: scale(1.05);
z-index: 3; /* Hæver knappen øverst ved hover */
}
}
button:nth-child(odd) {
transform: rotate(10deg); /* Med uret */
transform: rotate(10deg); /* Roterer med uret */
z-index: 1; /* Start-lag for ulige knapper */
}
button:nth-child(even) {
transform: rotate(-10deg); /* Mod uret */
transform: rotate(-10deg); /* Roterer mod uret */
z-index: 2; /* Lidt højere lag for lige knapper */
}
}
.close-btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
}
.next-btn {
cursor: pointer;
position: absolute;
right: 20px;
transition: background-color 0.3s ease;
}
// Thumbnail styling (forsiden)
.thumbnail {
width: 150px;