feat: initialize navbar and footer design

F6PBP · Oct 11, 2024 · ab26939 · ab26939
1 parent a5a18a7
commit ab26939
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 17 deletions.
diff --git a/modules/authentication/templates/login.html b/modules/authentication/templates/login.html
@@ -12,19 +12,19 @@
   >    
     <img src={% static "assets/icon.png" %} alt="icon" class="w-20 object-contain">
     <h1
-      class="font-bold text-xl sm:text-2xl text-center"
+      class="font-semibold text-xl text-center"
     >Welcome to EventYog!</h1>
     <form method="POST" action="" class="flex flex-col gap-5 bg-white">
       {% csrf_token %}
       <input type="hidden" name="remember" value="true">
       <div class="rounded-md shadow-sm -space-y-px flex flex-col gap-5">
         <div>
           <label for="username" class="sr-only">Username</label>
-          <input id="username" name="username" type="text" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-semibold placeholder:font-normal rounded-3xl justify-center" placeholder="Username">
+          <input id="username" name="username" type="text" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-normal rounded-3xl justify-center" placeholder="Username">
         </div>
         <div>
           <label for="password" class="sr-only">Password</label>
-          <input id="password" name="password" type="password" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-semibold placeholder:font-normal rounded-3xl justify-center" placeholder="Password">
+          <input id="password" name="password" type="password" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-normal rounded-3xl justify-center" placeholder="Password">
         </div>
       </div>
       <button 

diff --git a/modules/authentication/templates/register.html b/modules/authentication/templates/register.html
@@ -12,15 +12,15 @@
   >    
     <img src={% static "assets/icon.png" %} alt="icon" class="w-20 object-contain">
     <h1
-      class="font-bold text-xl sm:text-2xl text-center"
+      class="font-semibold text-xl text-center"
     >Register to EventYog!</h1>
     <form method="POST" action="" class="flex flex-col gap-5 bg-white">
       {% csrf_token %}
       <input type="hidden" name="remember" value="true">
       <div class="rounded-md shadow-sm -space-y-px flex flex-col gap-5">
         {% for field in form %}
           <div class="{% if not forloop.first %}mt-4{% endif %}">
-            <label for="{{ field.id_for_label }}" class="mb-2 font-semibold text-black">
+            <label for="{{ field.id_for_label }}" class="mb-2 font-semibold text-black text-sm">
             {{ field.label }}
             </label>
             <div class="relative">

diff --git a/modules/authentication/views.py b/modules/authentication/views.py
@@ -22,12 +22,10 @@ def login_user(request):
             return response
         else:
             messages.error(request, "Invalid username or password")
-
-
     else:
         form = AuthenticationForm(request)
 
-    context = {'form': form}
+    context = {'form': form, 'show_navbar': False, 'show_footer': False}
     return render(request, 'login.html', context)
 
 def logout_user(request):

diff --git a/modules/main/views.py b/modules/main/views.py
@@ -4,4 +4,4 @@
 # Create your views here.
 @login_required(login_url='auth:login')
 def main(request):
-    return render(request, 'base.html')
+    return render(request, 'base.html', {'show_navbar': True, 'show_footer': True})
diff --git a/static/assets/eventyog-white.png b/static/assets/eventyog-white.png
diff --git a/templates/base.html b/templates/base.html
@@ -18,10 +18,17 @@
         <title>Eventyog</title>
     </head>
     <body class="font-Poppins">
-        <main class="flex flex-col">
-            {% include "ds/navbar.html" %}
-            {% block content %}{% endblock content%} 
-            {% include "ds/footer.html" %}
+        <main class="flex flex-col min-h-screen">
+            {% if show_navbar %}
+                {% include "ds/navbar.html" %}
+            {% endif %}
+            <div class="container h-full min-h-screen">
+                {% block content %}{% endblock content%} 
+            </div>
+
+            {% if show_footer %}
+                {% include "ds/footer.html" %}
+            {% endif %}
         </main>
     </body>
 </main>
diff --git a/templates/ds/footer.html b/templates/ds/footer.html
@@ -1,3 +1,16 @@
-<footer>
-    <h1>Ini Footer</h1>
+{% load static %}
+<footer class="px-10 py-10 bg-[#003FE2] text-white flex flex-col gap-5">
+    <div
+        class="flex gap-6 items-center justify-center"
+    >
+        <img 
+            src="{% static 'assets/eventyog-white.png' %}" 
+            alt="icon" 
+            class="w-16 object-contain"
+        />
+        <h1 class="font-semibold text-xl">EventYog</h1>
+    </div>
+    <div class="w-full flex justify-center">
+        <h3 class="text-xs">&copy; 2024 EventYog!</h3>
+    </div>
 </footer>
diff --git a/templates/ds/navbar.html b/templates/ds/navbar.html
@@ -1,3 +1,17 @@
-<nav>
-    <h1>Ini Navbar</h1>
+{% load static %}
+<nav class="px-10 flex items-center py-5 justify-between border-b-[1px] border-black/10">
+    <img src={% static "assets/icon.png" %} alt="icon" class="w-16 object-contain">
+    <div
+        class="flex items-center gap-5"
+    >
+        <p class="text-sm">Hello, {{user.username}}!</p>
+        <div class="w-10 h-10 bg-black rounded-full overflow-hidden">
+        </div>
+        <a href="{% url 'auth:logout'%}">
+            <button 
+                class="bg-[#003FE2] text-white text-sm font-semibold rounded-2xl h-full hover:scale-105 duration-300 ml-auto px-5 py-2">
+                Logout
+            </button>
+        </a>
+    </div>
 </nav>