Candidate Project - Updating NavBar

.gitignore

@@ -15,6 +15,7 @@ __pycache__/
 *.so
 .Python
 env/
+myvenv/
 build/
 develop-eggs/
 dist/

hknweb/academics/migrations/0003_alter_icsr_course_name.py

@@ -0,0 +1,17 @@
+# Generated by Django 4.2.5 on 2024-10-26 00:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("academics", "0002_auto_20211223_1902"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="icsr",
+            name="course_name",
+            field=models.TextField(default="", max_length=500),
+        ),
+    ]

hknweb/events/forms/event/create.py

@@ -30,6 +30,7 @@ class Meta:
         model = Event
         fields = (
             "name",
+            "point_of_contact",
             "location",
             "description",
             "event_type",

hknweb/events/migrations/0013_alter_icalview_options_event_point_of_contact_and_more.py

@@ -0,0 +1,27 @@
+# Generated by Django 4.2.5 on 2024-10-26 00:05
+
+from django.db import migrations, models
+import markdownx.models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("events", "0012_icalview"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="icalview",
+            options={"verbose_name": "iCal view"},
+        ),
+        migrations.AddField(
+            model_name="event",
+            name="point_of_contact",
+            field=models.CharField(default="N/A", max_length=255),
+        ),
+        migrations.AlterField(
+            model_name="event",
+            name="description",
+            field=markdownx.models.MarkdownxField(max_length=2000),
+        ),
+    ]

hknweb/events/models/event.py

@@ -14,6 +14,7 @@
 class Event(models.Model):
     name = models.CharField(max_length=255)
     start_time = models.DateTimeField()
+    point_of_contact = models.CharField(max_length=255, default="N/A")
     end_time = models.DateTimeField()
     location = models.CharField(max_length=255)
     event_type = models.ForeignKey(EventType, models.CASCADE)

hknweb/events/views/event_transactions/show_event.py

@@ -30,6 +30,7 @@ def show_details_helper(request, id, back_link: str, can_edit: bool):
 
     context = {
         "event": event,
+        "event_point_of_contact": markdownify(event.point_of_contact),
         "event_description": markdownify(event.description),
         "event_location": format_url(event.location),
         "user_access_level": ACCESSLEVEL_TO_DESCRIPTION[get_access_level(request.user)],

hknweb/static/css/base.css

@@ -70,10 +70,13 @@ body {
   cursor: pointer;
 }
 @media screen and (min-width: 710px) { /* Desktop display */
+  .dropdown-container {
+    display: inline-block;
+  }
   .navi-menu > label {
     padding-right: 24px;
   }
-  .navi-menu > label[for="toggle-account"] {
+  .dropdown-container > label[for="toggle-account"] {
     padding-right: 0;
     padding-left: 24px;
   }
@@ -95,6 +98,12 @@ body {
   }
 }
 @media screen and (max-width: 710px) { /* Mobile display */
+  .dropdown-container {
+    display: none;
+  }
+  .navi-menu-button {
+    display: block;
+  }
   .navi-menu > label {
     display: none;
   }
@@ -162,8 +171,6 @@ body {
 #toggle-account:not(:checked) ~ #toggle-about:checked ~ #about-nav-bar,
 #toggle-account:not(:checked) ~ #toggle-candidate-admin:checked ~ #candidate-admin-nav-bar,
 #toggle-account:checked ~ #account-nav-bar {
-  opacity: 1;
-  z-index: 1;
 }
 #toggle-account:not(:checked) ~ #toggle-student:checked ~ #student-nav-bar *,
 #toggle-account:not(:checked) ~ #toggle-industry:checked ~ #industry-nav-bar *,
@@ -172,7 +179,7 @@ body {
 #toggle-account:not(:checked) ~ #toggle-about:checked ~ #about-nav-bar *,
 #toggle-account:not(:checked) ~ #toggle-candidate-admin:checked ~ #candidate-admin-nav-bar *,
 #toggle-account:checked ~ #account-nav-bar * {
-  display: inline;
+  display: none;
 }
 @media screen and (max-width: 710px) {
   #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-student:checked ~ #student-nav-bar,
@@ -183,6 +190,8 @@ body {
   #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-candidate-admin:checked ~ #candidate-admin-nav-bar,
   #toggle-mobile:checked ~ #toggle-account:checked ~ #account-nav-bar {
     display: block;
+    opacity: 1;
+    z-index: 1;
   }
   #toggle-mobile:not(:checked) ~ .sub-nav-bar,
   #toggle-mobile:not(:checked) ~ .mobile-nav-bar {
@@ -199,7 +208,7 @@ body {
   transform: rotate(45deg);
   transition: transform 0.4s ease-out;
 }
-#toggle-account:checked ~ .navi-container #carrot {
+.dropdown-container:hover #carrot {
   transform: rotate(225deg);
   transition: transform 0.4s ease-out;
 }
@@ -229,6 +238,47 @@ body {
   text-decoration: underline;
 }
 
+
+
+
+/* DROPDOWN MENU */
+.navi-menu {
+  position: relative;
+}
+.navi-menu label {
+  position: relative;
+}
+.dropdown-container {
+  position: relative;
+  padding-right: 24px;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: white;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  flex-direction: column;
+  top: 100%; /* Position the dropdown below the label */
+  left: 0; /* Align the dropdown with the left edge of the label */
+}
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+.dropdown-container:hover .dropdown-content {
+  display: flex;
+}
+.navi-menu label:hover + .dropdown-content {
+  display: flex;
+}
+
 /* HEADING (which has the page's title) */
 .heading {
   font-size: 3em;

hknweb/templates/base.html

@@ -58,22 +58,63 @@
             </div>
           </div>
         </a>
+
         <div class="navi-menu">
-          <label for="toggle-student">Student Services</label>
-          <label for="toggle-industry">
-            <a href="{% url 'indrel' %}">Industry</a>
-            </label>
-          <label for="toggle-outreach">
-            <a href="{% url 'outreach' %}">Outreach</a>
-            </label>
-          <label for="toggle-events">Events</label>
-          <label for="toggle-about">About</label>
+            <div class="dropdown-container">
+                <label for="toggle-student">Student Services</label>
+                <div class="dropdown-content" id="student-dropdown">
+                  <a href="/tutoring">Tutoring Hours</a>
+                  <a href="/studentservices/reviewsessions">Review Sessions</a>
+                  <a href="{% url 'course_surveys:index' %}">Course Surveys</a>
+                  <a href="{% url 'studentservices:course_guide' %}">Course Guide</a>
+                  <a href="/studentservices/tours">Department Tours</a>
+                </div>
+            </div>
+            <div class="dropdown-container">
+                <label for="toggle-industry">Industry</label>
+                <div class="dropdown-content" id="industry-dropdown">
+                  <a href="{% url 'indrel' %}">Industry</a>
+                </div>
+            </div>
+            <div class="dropdown-container">
+                <label for="toggle-outreach">Outreach</label>
+                <div class="dropdown-content" id="outreach-dropdown">
+                  <a href="{% url 'outreach' %}">Outreach</a>
+                </div>
+            </div>
+            <div class="dropdown-container">
+                <label for="toggle-events">Events</label>
+                <div class="dropdown-content" id="events-dropdown">
+                  <a href="{% url 'events:index' %}">Calendar</a>
+                  <a href="{% url 'events:photos' %}">Photos</a>
+                  <a href="{% url 'events:leaderboard' %}">Leaderboard</a>
+                  <a href="https://www.flickr.com/people/berkeley_hkn/">Flickr</a>
+                </div>
+            </div>
+            <div class="dropdown-container">
+                <label for="toggle-about">About</label>
+                <div class="dropdown-content" id="about-dropdown">
+                  <a href="{% url 'about' %}">About HKN</a>
+                  <a href="{% url 'people' %}">People</a>
+                  <a href="">Yearbooks</a>
+                </div>
+            </div>
           {% if user.is_authenticated %}
-            <span style="height: 1.8em; width: 1px; border-left: 1px black solid;"></span>
+          <span style="height: 1.8em; width: 1px; border-left: 1px black solid;"></span>
+          <div class="dropdown-container">
             <label for="toggle-account">
               Welcome, {{ user.first_name }}
               <i id="carrot"></i>
             </label>
+            <div class="dropdown-content" id="account-dropdown">
+              {% if viewer_is_an_officer %}
+              <a href="{% url 'candidate:officer_portal' %}">Officer Portal</a>
+              {% endif %}
+              <a href="{% url 'candidate:candidate_portal' %}">Candidate Portal</a>
+              <a href="/accounts/settings">Settings</a>
+              <a href="/accounts/logout?next={{request.path}}">Log out</a>
+            </div>
+          </div>
           {% else %}
             <a class="account-button" href="/accounts/login?next={{request.path}}">Account</a>
           {% endif %}
@@ -90,11 +131,11 @@
       </div>
     </div>
     <div class="navi-container mobile-nav-bar" style="text-align: center;">
-        <label for="toggle-student">
-            Student Services
-        </label>
+      <label for="toggle-student">
+          Student Services
+      </label>
     </div>
-    <div id="student-nav-bar" class="sub-nav-bar navi-container">
+    <div id="student-nav-bar" class="sub-nav-bar mobile-nav-bar navi-container">
       <a href="/tutoring">Tutoring Hours</a>
       <span class="slash">/</span>
       <a href="/studentservices/reviewsessions">Review Sessions</a>
@@ -112,21 +153,15 @@
             <a href="{% url 'indrel' %}">Industry</a>
         </label>
     </div>
-    <div id="industry-nav-bar" class="sub-nav-bar navi-container">
-        &nbsp
-    </div>
     <div class="navi-container mobile-nav-bar" style="text-align: center;">
         <label for="toggle-outreach">
             <a href="{% url 'outreach' %}">Outreach</a>
         </label>
     </div>
-    <div id="outreach-nav-bar" class="sub-nav-bar navi-container">
-        &nbsp
-    </div>
     <div class="navi-container mobile-nav-bar" style="text-align: center;">
-        <label for="toggle-events">
-            Events
-        </label>
+      <label for="toggle-events">
+          Events
+      </label>
     </div>
     <div id="events-nav-bar" class="sub-nav-bar navi-container">
       <a href="{% url 'events:index' %}">Calendar</a>
@@ -138,9 +173,9 @@
       <a href="https://www.flickr.com/people/berkeley_hkn/">Flickr</a>
     </div>
     <div class="navi-container mobile-nav-bar" style="text-align: center;">
-        <label for="toggle-about">
-            About
-        </label>
+      <label for="toggle-about">
+          About
+      </label>
     </div>
     <div id="about-nav-bar" class="sub-nav-bar navi-container">
       <a href="{% url 'about' %}">About HKN</a>

hknweb/templates/events/show_details.html

@@ -114,6 +114,7 @@ <h1 id="event-detail-title"> {{ event.name }} </h1>
   <div id="left-details">
 
     <p>{{ event_description | safe }}</p>
+    <p><b>Point of Contact</b>: {{ event.point_of_contact }}</p>
     <p><b>Event Type</b>: {{ event.event_type }}</p>
     <p><b>Location</b>: {{ event_location }}</p>
     <p><b>Date(s) and Time(s)</b>: {{ event | process_event_time }}</p>