Adjust the look of the post likes modal 🖌🎨

hussein-m-kandil · Sep 1, 2023 · 38197b5 · 38197b5
1 parent 9a513cd
commit 38197b5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/posts/static/js/main.js b/posts/static/js/main.js
@@ -305,7 +305,7 @@ if (CSRFTokenInput) {
                       for (let i = 0; i < likes.length; i++) {
                         likesModalDialog.innerHTML += `
                         <div class="d-flex justify-content-center align-items-center my-3">
-                          <div class="me-3" style="width: 20%;">
+                          <div class="me-3" style="width: 15%;">
                             <img id="liker-img-{{ post.id }}" 
                               class="w-100 rounded border border-dark"
                                 src="/static/images/${
@@ -318,7 +318,7 @@ if (CSRFTokenInput) {
                           <div class="vr class="mx-auto" style="opacity: 0.75; min-height: 5em;"></div>
                           <div class="ms-3">
                               <a id="liker-name-{{ post.id }}" href="#" 
-                                class="link-dark text-decoration-none h3 text-left">
+                                class="link-dark text-decoration-none h4 text-left">
                                 <strong>${likes[i].ownerName}</strong>
                               </a>
                               <br>

diff --git a/posts/templates/posts/post_detail.html b/posts/templates/posts/post_detail.html
@@ -46,12 +46,11 @@ <h6 class="h6 text-end mt-3">
             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                 <!-- <div class="modal-content" style="background-color: var(--monotext-bg-color); min-height: 75vh;"> -->
                 <div class="modal-content" style="background-color: var(--monotext-bg-color);">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="exampleModalLabel">Likes on "{{ post.title }}"</h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
                     <div class="modal-body">
-                        <div class="d-flex justify-content-end">
-                            <button type="button" class="btn-close" 
-                                data-bs-dismiss="modal" aria-label="Close">
-                        </button>
-                        </div>
                         <div class="m-auto my-auto" id="likes-modal-dialog-{{ post.id }}">
                             <a href="#" class="link-secondary text-center text-decoration-none h6 mx-auto" 
                                 style="display: none;" onclick="return false;">

diff --git a/posts/templates/posts/posts_block.html b/posts/templates/posts/posts_block.html
@@ -55,12 +55,11 @@ <h6 class="h6 text-end mt-3">
             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                 <!-- <div class="modal-content" style="background-color: var(--monotext-bg-color); min-height: 75vh;"> -->
                 <div class="modal-content" style="background-color: var(--monotext-bg-color);">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="exampleModalLabel">Likes on "{{ post.title }}"</h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
                     <div class="modal-body">
-                        <div class="d-flex justify-content-end">
-                            <button type="button" class="btn-close" 
-                                data-bs-dismiss="modal" aria-label="Close">
-                        </button>
-                        </div>
                         <div class="m-auto my-auto" id="likes-modal-dialog-{{ post.id }}">
                             <a href="#" class="link-secondary text-center text-decoration-none h6 mx-auto" 
                                 style="display: none;" onclick="return false;">