Basic implementation of inspirations frontend, closing #27 for now

static/frontend/js/inspirations.js

@@ -134,6 +134,55 @@
                     imageuser.append(imageuserinfo);
                     footrow.append(footmd6right);
 
+                    $("#inspirationModals").append($("<div>")
+                        .addClass("modal")
+			.addClass("fade")
+			.attr("id", "inspiration" + value["id"] + "Modal")
+			.attr("tabindex", "-1")
+			.attr("aria-hidden", "true")
+                    );
+
+                    var modal = $("#inspirationModals div.modal:last");
+
+		    var content = $("<div>").addClass("modal-content");
+
+		    var dialog = $("<div>")
+			.addClass("modal-dialog")
+			.addClass("modal-lg");
+
+		    var mediacontainer = $("<div>")
+			.addClass("ratio")
+			.addClass("ratio-16x9");
+
+		    var image = $("<img>")
+			.attr("src", value["image"])
+			.attr("width", "100%");
+
+		    var buttons = $("<div>")
+			.addClass("text-center")
+			.addClass("py-3");
+
+		    var book = $("<button>")
+			.attr("type", "button")
+			.addClass("btn")
+			.addClass("btn-primary")
+			.text("Jetzt Urlaubsangebote in und um " + value["destination"]["name"] + " erhalten!");
+
+		    var close = $("<button>")
+			.attr("type", "button")
+			.addClass("btn")
+			.addClass("btn-secondary")
+			.attr("data-dismiss", "modal")
+			.text("Schließen");
+
+			mediacontainer.append(image)
+			content.append(mediacontainer)
+			buttons.append(book)
+			buttons.append(close)
+			content.append(buttons)
+			dialog.append(content)
+			modal.append(dialog)
+
                 });            
         });
     });

templates/frontend/inspirations.html

@@ -47,36 +47,9 @@
 </section><!-- end innerpage-wrapper -->
 {% endblock %}
 {% block "modal" %}
-<!-- Modal 1 --> <!-- TODO: You know... -->
+<div id="inspirationModals">
-<div
-    class="modal fade"
-    id="exampleModal1"
-    tabindex="-1"
-    aria-labelledby="exampleModal1Label"
-    aria-hidden="true"
->
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="ratio ratio-16x9">
-            <iframe
-                src="https://www.youtube.com/embed/A3PDXmYoF5U"
-                title="YouTube video"
-                allowfullscreen width="100%" height="100%"
-            ></iframe>
-            </div>
-
-            <div class="text-center py-3">
-            <button type="button" class="btn btn-primary">
-                {% blocktrans %}Jetzt Urlaubsangebote in und um {{ inspiration.destination_name }} erhalten!{% endblocktrans %}
-            </button>
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                {% trans "Schließen" %}
-            </button>
-            </div>
-        </div>
-    </div>
 </div>
 {% endblock %}
 {% block "scripts" %}
 <script type="text/javascript" src="{% static "frontend/js/inspirations.js" %}"></script>
-{% endblock %}
+{% endblock %}