From 909513f73eb120ec1f6959d550539cf872b350e4 Mon Sep 17 00:00:00 2001
From: spitkov <bence@spitkov.hu>
Date: Mon, 23 Sep 2024 18:00:18 -0400
Subject: [PATCH] image fix

---
 templates/base.html         | 59 +++++++++++++++++++++++++++++++++++--
 templates/group_detail.html | 25 +++++++++++++++-
 templates/index.html        | 32 ++++++++++----------
 templates/post_detail.html  | 24 ++++++++++++++-
 4 files changed, 121 insertions(+), 19 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index 41928e4..da5df9f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -68,7 +68,27 @@
             background-color: inherit;
         }
     </style>
-    {% block styles %}{% endblock %}
+    {% block styles %}
+    <style>
+        .post-image {
+            max-width: 200px;
+            max-height: 200px;
+            object-fit: contain;
+            cursor: pointer;
+        }
+        .modal-body img {
+            width: calc(100% - 40px);
+            height: auto;
+            margin: 20px;
+        }
+        .assets-section img {
+            max-width: 200px;
+            max-height: 200px;
+            object-fit: contain;
+            margin: 5px 0;
+        }
+    </style>
+    {% endblock %}
 </head>
 <body>
     <div class="container mt-4">
@@ -148,8 +168,43 @@
         </div>
     </div>
 
+    <!-- Image Modal -->
+    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="imageModalLabel">Image</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center">
+                    <img id="modalImage" src="" class="img-fluid" alt="Post image">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <a id="downloadButton" href="" download class="btn btn-primary">Download</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    {% block scripts %}{% endblock %}
+    {% block scripts %}
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        var modalImage = document.getElementById('modalImage');
+        var downloadButton = document.getElementById('downloadButton');
+
+        document.querySelectorAll('.post-image').forEach(function(image) {
+            image.addEventListener('click', function() {
+                var imageUrl = this.getAttribute('data-image-url');
+                modalImage.src = imageUrl;
+                downloadButton.href = imageUrl;
+                new bootstrap.Modal(document.getElementById('imageModal')).show();
+            });
+        });
+    });
+    </script>
+    {% endblock %}
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/group_detail.html b/templates/group_detail.html
index 9998cca..6d46e10 100644
--- a/templates/group_detail.html
+++ b/templates/group_detail.html
@@ -95,7 +95,7 @@
                                 </div>
                                 <p class="card-text">{{ post.content|safe }}</p>
                                 {% if post.image_url %}
-                                <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal{{ post.id }}">
+                                <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image-url="{{ url_for('static', filename='uploads/' + post.image_url) }}">
                                 {% endif %}
                                 <div class="d-flex flex-wrap justify-content-between align-items-center">
                                     <div class="btn-group mb-2">
@@ -506,6 +506,29 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         this.submit();
     });
+
+    // Image modal functionality
+    const imageModal = document.getElementById('imageModal');
+    const modalImage = document.getElementById('modalImage');
+    const zoomInButton = document.getElementById('zoomInButton');
+    const zoomOutButton = document.getElementById('zoomOutButton');
+    const downloadButton = document.getElementById('downloadButton');
+
+    document.querySelectorAll('.post-image').forEach(img => {
+        img.addEventListener('click', function() {
+            modalImage.src = this.dataset.imageUrl;
+            downloadButton.href = this.dataset.imageUrl;
+            new bootstrap.Modal(imageModal).show();
+        });
+    });
+
+    zoomInButton.addEventListener('click', function() {
+        modalImage.style.transform = 'scale(1.2)';
+    });
+
+    zoomOutButton.addEventListener('click', function() {
+        modalImage.style.transform = 'scale(1)';
+    });
 });
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 30436d6..ed0c266 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -40,9 +40,11 @@
                     <span class="ms-auto text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                 </div>
                 <p class="card-text">{{ post.content|safe }}</p>
-                {% if post.image_url %}
-                <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal{{ post.id }}">
-                {% endif %}
+                <div class="assets-section mb-2">
+                    {% if post.image_url %}
+                    <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image-url="{{ url_for('static', filename='uploads/' + post.image_url) }}">
+                    {% endif %}
+                </div>
                 <div class="d-flex flex-wrap justify-content-between align-items-center">
                     <div class="btn-group mb-2">
                         <button class="btn btn-outline-primary btn-sm like-btn" data-post-id="{{ post.id }}">
@@ -135,6 +137,18 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelectorAll('.like-comment-btn').forEach(button => {
             button.addEventListener('click', handleCommentLike);
         });
+
+        // Initialize image modal
+        document.querySelectorAll('.post-image').forEach(img => {
+            img.addEventListener('click', function() {
+                var imageUrl = this.dataset.imageUrl;
+                var modalImage = document.getElementById('modalImage');
+                var downloadButton = document.getElementById('downloadButton');
+                modalImage.src = imageUrl;
+                downloadButton.href = imageUrl;
+                new bootstrap.Modal(document.getElementById('imageModal')).show();
+            });
+        });
     }
 
     function handleLike(event) {
@@ -206,16 +220,4 @@ document.addEventListener('DOMContentLoaded', function() {
     initializePostInteractions();
 });
 </script>
-{% endblock %}
-
-{% block styles %}
-{{ super() }}
-<style>
-    .comment-section {
-        border-top: 1px solid rgba(0,0,0,.125);
-    }
-    .comment-section .card-body {
-        padding-top: 1rem;
-    }
-</style>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/post_detail.html b/templates/post_detail.html
index 0203a29..4c9a8ec 100644
--- a/templates/post_detail.html
+++ b/templates/post_detail.html
@@ -25,7 +25,7 @@
             </div>
             <p class="card-text">{{ post.content|safe }}</p>
             {% if post.image_url %}
-            <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image">
+            <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image-url="{{ url_for('static', filename='uploads/' + post.image_url) }}">
             {% endif %}
             <div class="d-flex flex-wrap justify-content-between align-items-center">
                 <div class="btn-group mb-2">
@@ -69,6 +69,28 @@
 </div>
 {% endblock %}
 
+{% block modals %}
+<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="imageModalLabel">Image</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body text-center">
+                <img id="modalImage" src="" class="img-fluid" alt="Post image">
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" id="zoomInButton">Zoom In</button>
+                <button type="button" class="btn btn-primary" id="zoomOutButton">Zoom Out</button>
+                <a id="downloadButton" href="" download class="btn btn-primary">Download</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
 {% block scripts %}
 {{ super() }}
 <script>
