UI: Debug the centeriztion of the likes list's items and add 'hr' und…

…er the title
hussein-m-kandil · Sep 2, 2023 · d45f795 · d45f795
1 parent c2c98ee
commit d45f795
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/posts/static/js/main.js b/posts/static/js/main.js
@@ -305,24 +305,27 @@ 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: 15%;">
-                            <img id="liker-img-{{ post.id }}" 
-                              class="w-100 rounded border border-dark"
+                          <div style="width: 45%;">
+                            <img id="liker-img-${postID}" 
+                              class="d-block w-25 m-auto me-0 rounded border border-dark"
                                 src="/static/images/${
                                   likes[i].ownerPic == 0
                                     ? "woman.jpg"
                                     : "man.jpg"
                                 }"
                                 alt="The profile picture of like's owner.">
                           </div>
-                          <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="#" 
+                          <div class="m-auto mx-3">
+                            <div class="vr m-auto" style="opacity: 0.75; min-height: 5em;">
+                            </div>
+                          </div>
+                          <div style="width: 45%;">
+                              <a id="liker-name-${postID}" href="#" 
                                 class="link-dark text-decoration-none h4 text-left">
                                 <strong>${likes[i].ownerName}</strong>
                               </a>
                               <br>
-                              <span id="like-date-{{ post.id }}" class="h6 text-left text-muted">
+                              <span id="like-date-${postID}" class="h6 text-left text-muted">
                                 ${likes[i].createdAt}
                               </span>
                           </div>

diff --git a/posts/templates/posts/post_detail.html b/posts/templates/posts/post_detail.html
@@ -44,14 +44,20 @@ <h6 class="h6 text-end mt-3">
         <div class="modal fade" id="likes-modal-{{ post.id }}" tabindex="-1" 
             aria-labelledby="likes-modal-{{ post.id }}" aria-hidden="true">
             <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>
+                        <h1 class="modal-title fs-5" id="exampleModalLabel">
+                            Likes on 
+                            <em><a href="{% url 'posts:post_detail' post.owner.username post.id %}" 
+                                class="link-dark text-decoration-none">
+                                {{ post.title }}
+                            </a></em>
+                        </h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
+                    <hr class="m-0 w-75 mx-auto" style="opacity: 1;"> 
                     <div class="modal-body">
-                        <div class="m-auto my-auto" id="likes-modal-dialog-{{ post.id }}">
+                        <div class="m-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;">
                                 <em>More...</em>
@@ -85,7 +91,6 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Likes on "{{ post.title }}"<
             {% endif %}
         </div>
         <hr class="mt-1">
-        <hr class="mt-1">
         {% if post.comments.count > 0 %}
         <div class="post-comments-div" 
             id="post-comments-{{ post.id }}">
@@ -94,7 +99,6 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Likes on "{{ post.title }}"<
                 More comments...
             </a>
         </div>
-        <hr class="mt-3">
         {% endif %}
         <div style="display: none;">
             <span id="post-likes-url-{{ post.id }}">{% url 'posts:post_likes' post.id %}</span>

diff --git a/posts/templates/posts/posts_block.html b/posts/templates/posts/posts_block.html
@@ -53,14 +53,20 @@ <h6 class="h6 text-end mt-3">
         <div class="modal fade" id="likes-modal-{{ post.id }}" tabindex="-1" 
             aria-labelledby="likes-modal-{{ post.id }}" aria-hidden="true">
             <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>
+                        <h1 class="modal-title fs-5" id="exampleModalLabel">
+                            Likes on 
+                            <em><a href="{% url 'posts:post_detail' post.owner.username post.id %}" 
+                                class="link-dark text-decoration-none">
+                                {{ post.title }}
+                            </a></em>
+                        </h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
+                    <hr class="m-0 w-75 mx-auto" style="opacity: 1;">
                     <div class="modal-body">
-                        <div class="m-auto my-auto" id="likes-modal-dialog-{{ post.id }}">
+                        <div class="m-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;">
                                 <em>More...</em>