fixed

Pipfile.lock

@@ -138,10 +138,10 @@
         },
         "werkzeug": {
             "hashes": [
-                "sha256:c3fd7a7d41976d9f44db327260e263132466836cef6f91512889ed60ad26557c",
-                "sha256:d5da73735293558eb1651ee2fddc4d0dedcfa06538b8813a2e20011583c9e49b"
+                "sha256:96da23fa8ccecbc3ae832a83df5c722c11547d021637faacb0bec4dd2f4666c8",
+                "sha256:ca5c2dcd367d6c0df87185b9082929d255358f5391923269335782b213d52655"
             ],
-            "version": "==0.14.1"
+            "version": "==0.15.1"
         }
     },
     "develop": {}

static/js/modal.js

@@ -1,13 +1,16 @@
 $('#detailModal').on('show.bs.modal', function (event) {
     let card = $(event.relatedTarget); // Button that triggered the modal
     let post_id = card.data('post_id');
-
+    $('#details-intro').html("<div class=\"spinner-border\" role=\"status\">\n" +
+        "  <span class=\"sr-only\">Loading...</span>\n" +
+        "</div>");
+    $('#details-description').html('');
     $.post(`/api/post/${post_id}`, data => {
 
         let post = data.post;
         console.log(post);
 
-        $('#details-title').text(post.title);
+        // $('#details-title').text(post.title);
         $('#details-intro').html(post.intro);
         $('#details-description').html(post.description);
 

templates/main/index.html

@@ -7,12 +7,11 @@
         <div class="row">
             {% for post in posts %}
                 <div class="col-lg-3 col-md-4 col-6">
-                    <a data-toggle="modal"
-                       data-target="#detailModal"
-                       data-post_id="{{ post.id }}"
-                    >
+                    <a data-toggle="modal" data-target="#detailModal" data-post_id="{{ post.id }}">
                         <div class="card border-light">
-                            <img class="card-img" src="{{ post.images[0].uri }}" alt="random image">
+                            <img class="card-img" src="{{ post.images[0].uri }}" alt="product image">
+
+                            {# Card image overlay (desktop only) #}
                             <div class="card-img-overlay d-none d-md-flex align-items-center justify-content-center">
                                 <div class="card-title-bg bg-white  w-100 d-flex align-items-center justify-content-center">
                                     <h5 class="card-text text-dark">{{ post.title|safe }}</h5>

templates/main/modal.html

@@ -8,8 +8,8 @@
                 </button>
                 <div class="container-fluid">
                     <div class="row justify-content-center text-justify">
-                        <div id="details-intro" class="text-center col-10"></div>
-                        <div id="details-description" class="text-center col-10"></div>
+                        <div id="details-intro" class="text-center col-12 col-md-10"></div>
+                        <div id="details-description" class="text-center col-12 col-md-10"></div>
                     </div>
                 </div>
             </div>