Cleanup

.slugignore

@@ -1 +1,2 @@
-/static/bootstrap
+/static/css/bootstrap
+*.scss

app.py

@@ -26,6 +26,7 @@ db.init_app(app)
 @app.route("/")
 def index():
     posts = Post.get_posts()
+    print(posts[0].title)
     return render_template("main/index.html", posts=posts)
 
 

static/js/modal.js

@@ -0,0 +1,20 @@
+$('#detailModal').on('show.bs.modal', function (event) {
+    let card = $(event.relatedTarget); // Button that triggered the modal
+    let post_id = card.data('post_id');
+
+    $.post(`/api/post/${post_id}`, data => {
+
+        let post = data.post;
+        console.log(post);
+
+        $('#details-title').text(post.title);
+        $('#details-intro').text(post.intro);
+        $('#details-description').text(post.description);
+
+        // $('#details-images').text('');
+        // post.images.forEach(image => {
+        //     $('#details-images').append(`<img src=${image}>`)
+        // });
+
+    });
+});

templates/layout.html

@@ -8,11 +8,11 @@
 
     <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
     <!-- Bootstrap first, then custom style -->
-    <link rel="stylesheet" href="/static/bootstrap.min.css">
+    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
           integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
           crossorigin="anonymous">
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/css/style.css">
 
     <title>{% block title %}{% endblock %}</title>
 

templates/main/footer.html

@@ -1,3 +1,3 @@
 <footer class="small text-center text-muted">
-    &copy; 2019 Marijn Jansen
+    &copy; 2019 Marlous van Leeuwen &amp; Marijn Jansen
 </footer>

templates/main/index.html

@@ -16,7 +16,7 @@
 
                             <div class="card-img-overlay d-flex align-items-center justify-content-center">
                                 <div class="card-title-bg bg-dark w-100 d-flex align-items-center justify-content-center">
-                                    <h5 class="card-text text-light">{{ post.title }}</h5>
+                                    <h5 class="card-text text-light">{{ post.title|safe }}</h5>
                                 </div>
                             </div>
                         </div>

templates/main/modal.html

@@ -2,43 +2,20 @@
      aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
-            <div class="modal-header">
+{#            <div class="modal-header">#}
-                <h5 class="modal-title text-center" id="details-title">Modal title</h5>
+{#                <h5 class="modal-title text-center" id="details-title">Modal title</h5>#}
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+{#                <button type="button" class="close" data-dismiss="modal" aria-label="Close">#}
-                    <span aria-hidden="true">&times;</span>
+{#                    <span aria-hidden="true">&times;</span>#}
-                </button>
+{#                </button>#}
-            </div>
+{#            </div>#}
             <div class="modal-body">
-                <div id="details-intro" class="font-weight-bold"></div>
+                <h5 id="details-title" class="text-center"></h5>
-                <div id="details-images"></div>
+                <div id="details-intro" class="font-weight-bold text-center"></div>
+{#                <div id="details-images"></div>#}
                 <div id="details-description"></div>
             </div>
         </div>
     </div>
 </div>
 
-<script>
+<script src="/static/js/modal.js"></script>
-    $('#detailModal').on('show.bs.modal', function (event) {
-        let card = $(event.relatedTarget); // Button that triggered the modal
-        let post_id = card.data('post_id');
-
-        $.post(`/api/post/${post_id}`, data => {
-
-            let post = data.post;
-            console.log(post);
-
-            $('#details-title').text(post.title);
-            $('#details-intro').text(post.intro);
-            $('#details-description').text(post.description);
-
-            $('#details-images').text('');
-            post.images.forEach(image => {
-                $('#details-images').append(`<img src=${image}>`)
-            });
-
-        });
-    })
-        .on('shown.bs.modal', function () {
-            $('#detailModal').scrollTop(0);
-        });
-</script>