Merge branch 'feature'

morikeli · Feb 25, 2024 · cf353b6 · cf353b6
2 parents ce20d2c + 89aa54f
commit cf353b6
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 178 deletions.
diff --git a/static/js/main.js b/static/js/main.js
@@ -46,14 +46,19 @@
 		if (backdrop) {
 			backdrop.parentNode.removeChild(backdrop);
 		}
-	  }
+	}
 
-	  // Add event listener to form after htmx:afterSwap event
-	  document.addEventListener('htmx:afterSwap', function(event) {
+	// Add event listener to form after htmx:afterSwap event
+	document.addEventListener('htmx:afterSwap', function(event) {
 		if (event.target.id === 'comments-modal') {
 			// Add event listener to the form after it's swapped
 			document.getElementById('modal-form').addEventListener('htmx:response', handleFormSubmission);
 		}
-	  });
+	});
+
+	// initiate posts lightbox
+	const postsLightbox = GLightbox({
+		selector: '.expolorer-posts-lightbox'
+	});
 
 })();
diff --git a/templates/accounts/edit-profile.html b/templates/accounts/edit-profile.html
@@ -1,13 +1,5 @@
 {% extends 'navbar.html' %}{% block title %}Edit profile&centerdot;Instagram clone{% endblock %}
 {% load crispy_forms_tags %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
     {% block content %}
     <div class="container">
         <div class="row">
@@ -45,5 +37,3 @@
         </div>
     </div>
     {% endblock %}
-</body>
-</html>
diff --git a/templates/accounts/profile.html b/templates/accounts/profile.html
@@ -1,12 +1,4 @@
 {% extends 'navbar.html' %}{% block title %}Profile{% endblock %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
     {% block content %}
     <div class="container">
         {% include 'partials/modals/followers.html' %}
@@ -68,5 +60,3 @@ <h6>{{ request.user.bio }}</h6>
         </div>
     </div>
     {% endblock %}
-</body>
-</html>
diff --git a/templates/core/explore.html b/templates/core/explore.html
@@ -0,0 +1,29 @@
+{% extends 'navbar.html' %}{% block title %}{% endblock %}
+    {% block content %}
+    <main id="main" class="main">
+        <section id="explorer-posts" class="explorer-posts">
+            <div class="container">
+                <div class="row g-1 explorer-posts-container">
+                    {% for post in posts %}
+                    <div class="col-lg-4 col-md-6 explorer-posts-item">
+                        <div class="explorer-posts-wrap">
+                            <img src="{{ post.image.url }}" class="img-fluid" alt="post-img">
+                            <div class="explorer-posts-info">
+                                <div class="explorer-posts-links">
+                                    <a href="{{ post.image.url }}" data-gallery="explorer-postsGallery" class="explorer-lightbox me-3 small">
+                                        <i class="bi bi-heart-fill"></i> {{ post.get_total_likes }}
+                                    </a>
+                                    <a href="" class="small">
+                                        <i class="bi bi-chat-fill"></i> {{ post.total_comments }}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+          </section>    
+    </main>
+
+    {% endblock %}
diff --git a/templates/core/profile.html b/templates/core/profile.html
@@ -1,12 +1,4 @@
 {% extends 'navbar.html' %}{% block title %}{{ request.user.username }}'s profile{% endblock %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
     {% block content %}
     <div class="container">
         {% include 'partials/modals/followers.html' %}
@@ -79,5 +71,3 @@ <h6><b>{{ obj.bio }}</b></h6>
         </div>
     </div>
     {% endblock %}
-</body>
-</html>
diff --git a/templates/core/search.html b/templates/core/search.html
@@ -0,0 +1,38 @@
+{% extends 'navbar.html' %}{% block title %}{% endblock %}
+{% load static %}
+    {% block content %}
+    <main id="main" class="main">
+       <div class="row">
+            <div class="col-md-6 offset-sm-3">
+                <input type="text" name="q" class="form-control"
+                    hx-get="{% url 'search' %}"
+                    hx-trigger="keyup changed delay:500ms"
+                    hx-target="#wrapper"
+                    hx-swap="outerHTML"
+                    hx-indicator="#spinner"
+                    hx-indicator-delay="3000"
+                    placeholder="Search..."
+                    autocomplete="off"
+                >
+                <div class="mt-3">
+                    <div class="row">
+                        <div class="col-sm-12 text-center">
+                            <img src="{% static 'img/spinner.gif' %}" alt="spinner" id="spinner" class="htmx-indicator">
+                        </div>
+                    </div>
+                    <ul class="list-group">
+                        {% for user in searched_users %}
+                        <li class="list-group-item d-flex justify-content-between align-items-start py-3">
+                            <img class="rounded-circle" src="{{ user.profile_pic.url }}" height="50px" alt="">
+                            <div class="mt- ms-2 me-auto">
+                                <div class="fw-bold"><a hx-get="{% url 'view_user_profile' user %}" hx-trigger="click" hx-push-url="{% url 'view_user_profile' user %}" hx-swap="outerHTML" hx-target="#wrapper">{{ user }}</a></div>
+                                {{ user }}
+                            </div>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </div>    
+            </div>
+       </div> 
+    </main>
+    {% endblock %}
diff --git a/templates/navbar.html b/templates/navbar.html
@@ -10,6 +10,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+    <link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
 </head>
 <body>
@@ -31,13 +32,13 @@
                     </a>
                 </li>
                 <li class="sidebar-item">
-                    <a hx-get="" hx-trigger="click" hx-push-url="" hx-swap="outerHTML" hx-target="#wrapper" class="sidebar-link">
+                    <a hx-get="{% url 'search' %}" hx-trigger="click" hx-push-url="{% url 'search' %}" hx-swap="outerHTML" hx-target="#wrapper" class="sidebar-link">
                         <i class="bi-search"></i>
                         <span>Search</span>
                     </a>
                 </li>
                 <li class="sidebar-item">
-                    <a  hx-get="" hx-trigger="click" hx-push-url="" hx-target="#wrapper"  hx-swap="outerHTML"  class="sidebar-link">
+                    <a  hx-get="{% url 'explore' %}" hx-trigger="click" hx-push-url="{% url 'explore' %}" hx-target="#wrapper"  hx-swap="outerHTML"  class="sidebar-link">
                         <i class="bi-compass"></i>
                         <span>Explore</span>
                     </a>
@@ -105,6 +106,7 @@
     </div>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
+    <script src="{% static 'vendor/glightbox/js/glightbox.min.js' %}"></script>
     <script src="{% static 'js/main.js' %}"></script>
     <script src="{% static 'js/toasts.js' %}"></script>
 </body>

diff --git a/users/urls.py b/users/urls.py
@@ -6,6 +6,8 @@
 urlpatterns = [
     path('homepage/', views.HomepageView.as_view(), name='homepage'),
     path('profile/<str:user_id>/', views.SuggestedUserProfileView.as_view(), name='view_user_profile'),
+    path('explore/', views.ExplorePostsView.as_view(), name='explore'),
+    path('search', views.SearchView.as_view(), name='search'),
 
 ]