Adding user picture and username to navbar.

When the user is logged into Hotails, they'll see their profile picture, and their username in every page on Hotails. Signed-off-by: Ofir Matasas <[email protected]> Signed-off-by: tamirmatok <[email protected]>
redhat-beyond · Apr 21, 2022 · 650c0ea · 650c0ea
1 parent f12de6e
commit 650c0ea
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 47 deletions.
diff --git a/Hotails/settings.py b/Hotails/settings.py
@@ -67,6 +67,7 @@
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'main.context_processors.navbar_extras'
             ],
         },
     },

diff --git a/Hotails/urls.py b/Hotails/urls.py
@@ -14,12 +14,11 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
 from main import views
 from django.contrib.auth import views as auth_views
 
 urlpatterns = [
-
     path('admin/', admin.site.urls),
     path('', views.index, name='index'),
     path('login/', auth_views.LoginView.as_view(template_name='main/login.html',

diff --git a/main/context_processors.py b/main/context_processors.py
@@ -0,0 +1,21 @@
+from daycare.models import DayCare, Image
+from dogowner.models import DogOwner
+
+
+def navbar_extras(request):
+    navbar_picture_url = navbar_name = None
+    if request.user.is_authenticated:
+        if DogOwner.objects.filter(user=request.user).exists():
+            dog_owner = DogOwner.objects.filter(user=request.user).first()
+            navbar_picture_url = dog_owner.dog_picture_url
+            navbar_name = dog_owner.first_name + ' ' + dog_owner.last_name
+
+        elif DayCare.objects.filter(user=request.user).exists():
+            daycare = DayCare.objects.filter(user=request.user).first()
+            navbar_picture_url = Image.objects.filter(daycare_id=daycare).first().url
+            navbar_name = daycare.name
+    context = {
+        'navbar_picture_url': navbar_picture_url,
+        'navbar_name': navbar_name,
+    }
+    return context
diff --git a/main/templates/main/base_template.html b/main/templates/main/base_template.html
@@ -17,52 +17,33 @@
     {% endblock %}
 </head>
 <header>
-    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-light bg-dark" style="padding: 0 10px 0 10px;">
         <a class="navbar-brand" href="..\">
-            <img src="{% static 'images/Hotails-logo-smaller.png' %}" style="width:50px; height:50px;" class="d-inline-block align-top" loading="lazy"></a>
-        <button class="navbar-toggler" type="button" data-target="#navbarText"
-            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-        </button>
-            <ul class="navbar-nav mr-auto">
-                {% if request.user.is_authenticated %}
-                    <li class="nav-item"><a class="nav-link text-white" href="">Profile</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="">Orders</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="">Search</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="">Chats</a></li>
-                {% endif %}
-                <li class="nav-item"><a class="nav-link text-white" href="">About</a></li>
-            </ul>
+            <img src="{% static 'images/Hotails-logo-smaller.png' %}" style="width:50px; height:50px;" class="d-inline-block align-top" loading="lazy">
+        </a>
+        <button class="navbar-toggler" type="button" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <ul class="navbar-nav mr-auto">
+            {% if request.user.is_authenticated %}
+                <li class="nav-item"><a class="nav-link text-white" href="">Profile</a></li>
+                <li class="nav-item"><a class="nav-link text-white" href="">Orders</a></li>
+                <li class="nav-item"><a class="nav-link text-white" href="">Search</a></li>
+                <li class="nav-item"><a class="nav-link text-white" href="">Chats</a></li>
+            {% endif %}
+            <li class="nav-item"><a class="nav-link text-white" href="/about">About</a></li>
+        </ul>
         {% if request.user.is_authenticated %}
         <ul class="nav navbar-nav navbar-right">
-            <li class="nav-item"><a class="nav-link text-white" style="font-size:1.3rem" href="/logout">Logout</a></li>
+            <li class="nav-item"><img src="{{ navbar_picture_url }}" alt="{{ name }} image" class="card-img-top sidebar-profile-img"></li>
+            <li class="nav-item">
+                <span id="welcomeMsg">Welcome, {{ navbar_name }}!</span><a class="nav-link" id="logoutHref" href="/logout">Logout</a>
+            </li>
         </ul>
         {% endif %}
     </nav>
 </header>
-
 <body>
     <div class="row">
-            <div class="col-3 col-lg-2 bg-dark">
-                {% if user.is_authenticated %}
-                    <div class="card">
-                    <img src="{{ profile_picture_url }}" alt="{{ name }} image" class="card-img-top sidebar-profile-img">
-                        <div class="card-body">
-                            <div style="display: block; flex-direction: row">
-                                <p class="card-title">Welcome, {{ username }}!</p>
-                                <div class="card-text">
-                                    {% if dog_name %}
-                                        <h5>Let’s find the perfect daycare for {{dog_name}}!
-                                    {% else %}
-                                        <h5>Ready to take care of dogs today?
-                                    {% endif %}
-                                    </h5>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                {% endif %}
-        </div>
-        <div class="col-9 col-lg-10">
+        <div class="col-12 col-lg-12">
             {% block content %}
             {% endblock %}
         </div>

diff --git a/main/templates/main/homepage.html b/main/templates/main/homepage.html
@@ -1,6 +1,5 @@
 {% extends "main/base_template.html" %}
+{% load static %}
 {% block content %}
-
-<h1>Coming soon...</h1>
-
+    <h1>Coming soon...</h1>
 {% endblock %}
diff --git a/static/css/sidebar.css b/static/css/sidebar.css
@@ -1,10 +1,12 @@
+header ul li {
+    font-size: 1.1rem;
+}
+
 .sidebar-profile-img
 {
     border-radius: 50%;
-    margin-left: 20%;
-    margin-top: 10%;
-    height: 15rem;
-    width: 15rem;
+    height: 2.5rem;
+    width: 2.5rem;
 }
 
 .card
@@ -15,7 +17,26 @@
     width: 108%;
 }
 
+#welcomeMsg {
+    padding-left:10px;
+    padding-bottom:0;
+    margin-top:5px;
+    color:#FFF;
+    float:left;
+}
+
+#logoutHref {
+    background-color:#1e1e1e;
+    border-radius:12px;
+    color:#E19512;
+    font-weight:bold;
+    float:right;
+    padding: 5px 10px 5px 10px;
+    font-size:1rem;
+    margin:1px 0 0 20px;
+}
+
 .card-title
 {
     font-size: xx-large;
-}
+}