Sync

app/services/markdown_render.py

@@ -48,14 +48,16 @@ def slider(options, images):
     height = options.get("height", 375)
 
     html_content = []
-    button_content = []
+    for i, val in enumerate(images):
+       if i % 2 == 0:
+           html_content.append(f"""<button onclick="openModal('modal{i}')" class="open">  <img src="{val}" width={width} height={height}>  Open Modal {i}  </button>""".strip())
+       else:
+           html_content.append(f"""<button onclick="openModal('modal{i}')" class="open_inv">  <img src="{val}" width={width}  height={height}> Open Modal {i} </button>""".strip())
 
-    #for i, val in enumerate(images):
-    #    html_content.append(f"""<button onclick="openModal('modal{i}')" class="open"> Open Modal {i} </button>""")
-    #    button_content.append(f"""<div class="modal" id="modal{i}"> <div class="modal-content"> <h2>Modal {i}</h2> <p>This is modal {i}.</p> <button onclick="closeModal('modal{i}')">Close</button> </div> </div>""")
-    #html  = '\n'.join( html_content )
-    #print(html)
-    return """Hej"""
+       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>""")
+    html  = '\n'.join( html_content )
+
+    return html
 
 
 def create_jinja_environment():
@@ -92,7 +94,11 @@ def render_markdown_with_jinja(markdown_content: str):
     template = env.get_template("base_template")
     final_html = template.render(content=intermediate_html)
 
-    # Step 3: Re-render final_html in Jinja2 for embedded tags like {{ box(...) }}
-    final_output = env.from_string(final_html).render()
+    #Step 3: Re-render final_html in Jinja2 for embedded tags like {{ box(...) }}
+
+    try:
+        final_output = env.from_string(final_html).render()
+    except:
+        print(final_html)
 
     return final_output, metadata

data/Kultur/0200_kultur_unikt.md

@@ -37,10 +37,5 @@ Portugal formår at kombinere historie, musik og mad med en afslappet livsstil.
 
 
 ### Slider test
-{{ slider(options={"width": 500, "height": 375}, 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"
-]) }}
+{{ 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"]) }}
 

data/Kultur/index.html

@@ -60,6 +60,14 @@
 <h1 style="text-align: center;">FastAPI + Sass Image Carousel</h1>
 
 <h3>Slider test</h3>
+<p><button onclick="openModal('modal0')" class="open">  <img src="https://picsum.photos/id/34/500/375" width=500 height=500>  Open Modal 0  </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>
+<button onclick="openModal('modal1')" class="open_inv">  <img src="https://picsum.photos/id/42/500/375" width=500  height=500> Open Modal 1 </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>
+<button onclick="openModal('modal2')" class="open">  <img src="https://picsum.photos/id/72/500/375" width=500 height=500>  Open Modal 2  </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>
+<button onclick="openModal('modal3')" class="open_inv">  <img src="https://picsum.photos/id/94/500/375" width=500  height=500> Open Modal 3 </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></p>
             </div>
             <hr>
         </section>

generated_data.json

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

static/css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @import 'fontawesome-all.min.css';
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
 /*
@@ -2492,16 +2493,22 @@ button:disabled,
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  width: 400px;
+  width: 90%; /* Sæt bredden til 80% af skærmens bredde */
+  height: 90%;
   text-align: center;
-  z-index: 50000;
+  z-index: 50000; /* Content stays above the blurred overlay */
+  margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
 }
 
 .open {
+  padding: -20px;
+  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
   transform: rotate(15deg);
 }
 
 .open_inv {
+  padding: -20px;
+  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
   transform: rotate(-15deg);
 }
 

static/sass/components/_modals.scss

@@ -28,16 +28,25 @@ $modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   padding: 20px;
   border-radius: 5px;
   box-shadow: $modal-content-shadow;
-  width: 400px;
+  width: 90%; /* Sæt bredden til 80% af skærmens bredde */
+  height: 90%;
+  // max-width: 1200px; /* Tilføj en maks-bredde for store skærme */
   text-align: center;
-  z-index: $modal-content-z-index; // Content stays above the blurred overlay
+  z-index: $modal-content-z-index; /* Content stays above the blurred overlay */
+  margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
 }
 
 // Rotating buttons
 .open {
+  padding: -20px;
+  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
+
   transform: rotate(15deg); // Rotates button 15 degrees clockwise
 }
 
 .open_inv {
+  padding: -20px;
+  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
+
   transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
 }