Adding sidebar to base_template with profile image

When the user is logged into Hotails, they'll see their profile picture, and their nickname in every page on Hotails. Signed-off-by: Ofir Matasas <[email protected]>
redhat-beyond · Apr 17, 2022 · 90c21da · 90c21da
1 parent 803b6e2
commit 90c21da
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/main/templates/main/base_template.html b/main/templates/main/base_template.html
@@ -12,14 +12,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
-
+    <link rel="stylesheet" href="{% static 'css/sidebar.css' %}">
     {% block stylesheets %}
     {% endblock %}
 </head>
 <header>
     <nav class="navbar navbar-expand-lg navbar-light bg-dark">
         <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>
+            <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>
@@ -41,8 +41,25 @@
 </header>
 
 <body>
-    {% block content %}
-    {% endblock %}
+    <div class="row">
+            <div class="col-3 col-lg-1 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: flex; flex-direction: row">
+                                <h5 class="card-title">{{ name }}</h5>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+        </div>
+        <div class="col-9 col-lg-11">
+            {% block content %}
+            {% endblock %}
+        </div>
+    </div>
+
 </body>
 
 </html>
diff --git a/main/templates/main/homepage.html b/main/templates/main/homepage.html
@@ -2,8 +2,8 @@
 {% load static %}
 
 {% block stylesheets %}
-  <link rel="stylesheet" href="{% static 'css/nicepage.css' %}" media="screen">
-  <link rel="stylesheet" href="{% static 'css/Home.css' %}" media="screen">
+  <link rel="stylesheet" href="{% static 'CSS/nicepage.css' %}" media="screen">
+  <link rel="stylesheet" href="{% static 'CSS/Home.css' %}" media="screen">
   <link id="u-theme-google-font" rel="stylesheet"
     href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i">
   <link id="u-page-google-font" rel="stylesheet"

diff --git a/main/views.py b/main/views.py
@@ -2,6 +2,8 @@
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import redirect
 from django.contrib.auth import logout
+from daycare.models import DayCare, Image
+from dogowner.models import DogOwner
 
 
 def index(request):
@@ -13,7 +15,21 @@ def index(request):
 
 @login_required()
 def homepage(request):
-    return render(request, 'main/homepage.html')
+    if DogOwner.objects.filter(user=request.user).exists():
+        dog_owner = DogOwner.objects.filter(user=request.user).first()
+        profile_picture_url = dog_owner.dog_picture_url
+        name = dog_owner.first_name + dog_owner.last_name
+    else:
+        daycare = DayCare.objects.filter(user=request.user).first()
+        profile_picture_url = Image.objects.filter(daycare_id=daycare).first()
+        name = daycare.name
+
+    context = {
+        'profile_picture_url': profile_picture_url,
+        'name': name,
+    }
+
+    return render(request, 'main/homepage.html', context)
 
 
 def logout_view(request):

diff --git a/static/css/sidebar.css b/static/css/sidebar.css
@@ -0,0 +1,18 @@
+.sidebar-profile-img
+{
+    border-radius: 50%;
+    height: 12rem;
+}
+
+.card
+{
+    background-color: #2e2e2e;
+    color: white;
+    height: 100%;
+    width: 108%;
+}
+
+.card-title
+{
+    font-size: xx-large;
+}