From 175d118449188d966dc98c6c3ef288155c473215 Mon Sep 17 00:00:00 2001 From: PopsicleSnow Date: Tue, 3 Dec 2024 16:22:58 -0800 Subject: [PATCH 1/5] fixed mobile navbar to use old design --- .gitignore | 1 + .../migrations/0003_alter_icsr_course_name.py | 17 ++ hknweb/events/forms/event/create.py | 1 + ...options_event_point_of_contact_and_more.py | 27 ++ hknweb/events/models/event.py | 1 + .../views/event_transactions/show_event.py | 1 + hknweb/static/css/base.css | 52 +++- hknweb/static/css/base_o.css | 276 ++++++++++++++++++ hknweb/templates/base.html | 87 ++++-- hknweb/templates/base_o.html | 230 +++++++++++++++ hknweb/templates/events/show_details.html | 1 + poetry.lock | 4 +- 12 files changed, 669 insertions(+), 29 deletions(-) create mode 100644 hknweb/academics/migrations/0003_alter_icsr_course_name.py create mode 100644 hknweb/events/migrations/0013_alter_icalview_options_event_point_of_contact_and_more.py create mode 100644 hknweb/static/css/base_o.css create mode 100644 hknweb/templates/base_o.html diff --git a/.gitignore b/.gitignore index 2aca97a9..8bdee8f0 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ __pycache__/ *.so .Python env/ +myvenv/ build/ develop-eggs/ dist/ diff --git a/hknweb/academics/migrations/0003_alter_icsr_course_name.py b/hknweb/academics/migrations/0003_alter_icsr_course_name.py new file mode 100644 index 00000000..7b757ce7 --- /dev/null +++ b/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), + ), + ] diff --git a/hknweb/events/forms/event/create.py b/hknweb/events/forms/event/create.py index 7688ee35..e8fa9760 100644 --- a/hknweb/events/forms/event/create.py +++ b/hknweb/events/forms/event/create.py @@ -30,6 +30,7 @@ class Meta: model = Event fields = ( "name", + "point_of_contact", "location", "description", "event_type", diff --git a/hknweb/events/migrations/0013_alter_icalview_options_event_point_of_contact_and_more.py b/hknweb/events/migrations/0013_alter_icalview_options_event_point_of_contact_and_more.py new file mode 100644 index 00000000..37f19e94 --- /dev/null +++ b/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), + ), + ] diff --git a/hknweb/events/models/event.py b/hknweb/events/models/event.py index 2e4bf181..ae8cc1d9 100644 --- a/hknweb/events/models/event.py +++ b/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) diff --git a/hknweb/events/views/event_transactions/show_event.py b/hknweb/events/views/event_transactions/show_event.py index e26f329c..a0079e3f 100644 --- a/hknweb/events/views/event_transactions/show_event.py +++ b/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)], diff --git a/hknweb/static/css/base.css b/hknweb/static/css/base.css index fece690f..2e38de22 100644 --- a/hknweb/static/css/base.css +++ b/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; } @@ -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; diff --git a/hknweb/static/css/base_o.css b/hknweb/static/css/base_o.css new file mode 100644 index 00000000..4391cb76 --- /dev/null +++ b/hknweb/static/css/base_o.css @@ -0,0 +1,276 @@ +html { + min-height: 100vh; + } + body { + height: 100%; + margin: 0; + padding: 0; + font-family: "Source Sans Pro", sans-serif; + color: #353535; + background-color: #252525; /* If footer doesn't reach bottom of screen, this will "extend" the footer */ + } + .navi-container, + .content { + background-color: white; /* Override body's background color */ + } + + /* Minimum margins for all sections */ + .navi-container, + .content, + .footer { + padding-left: 13px; + padding-right: 13px; + } + + .content { + padding-bottom: 1em; + overflow:auto; + } + + /* + * NAVIGATION BAR + */ + .navi-container { + padding-top: 7px; + padding-bottom: 7px; + } + .navi { + min-height: 50px; + max-width: 1250px; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; + } + /* Logo: designed as a flexbox */ + .navi a:first-child { + color: inherit; + } + .navi-logo { + display: flex; + justify-content: flex-start; + align-items: center; + flex-basis: auto; + } + .navi-logo-img { + height: 45px; + color: yellow; + } + .navi-menu-logo-text { + margin-left: 7px; + } + /* Menu: also a flexbox */ + .navi-menu { + display: flex; + justify-content: flex-end; + align-items: center; + flex-basis: auto; + } + .navi-menu label { + cursor: pointer; + } + @media screen and (min-width: 710px) { /* Desktop display */ + .navi-menu > label { + padding-right: 24px; + } + .navi-menu > label[for="toggle-account"] { + padding-right: 0; + padding-left: 24px; + } + .navi-menu-button { + display: none; + } + .navi-menu label:hover { + text-decoration: underline; + } + .mobile-nav-bar { + display: none; + } + #dummy-nav-bar { + opacity: 0; + position: static; + } + #dummy-nav-bar * { + display: inline; + } + } + @media screen and (max-width: 710px) { /* Mobile display */ + .navi-menu > label { + display: none; + } + .navi-menu-button { + display: block; + padding-left: 24px; + } + #dummy-nav-bar { + display: none; + } + .navi-menu > span { + display: none; + } + } + .account-button { + display: inline-block; + padding: 9px; + background-color: #eeeeee; + border: solid 1px #aaaaaa; + border-radius: 4px; + color: #353535; + } + .account-button:hover { + text-decoration: underline; + } + /* Toggle system */ + .toggle { + position: absolute; + top: -100%; + left: -100%; + display: none; + } + .sub-nav-bar { + position: absolute; + opacity: 0; + text-align: center; + background-color: #252525; + transition: opacity 0.5s ease-out; + box-sizing: border-box; + width: 100%; + } + .sub-nav-bar * { + color: white; + display: none; + } + @media screen and (max-width: 710px) { + .sub-nav-bar { + position: static; + display: none; + } + } + #toggle-account:not(:checked) ~ #toggle-student:checked ~ .navi-container label[for="toggle-student"], + #toggle-account:not(:checked) ~ #toggle-industry:checked ~ .navi-container label[for="toggle-industry"], + #toggle-account:not(:checked) ~ #toggle-outreach:checked ~ .navi-container label[for="toggle-outreach"], + #toggle-account:not(:checked) ~ #toggle-events:checked ~ .navi-container label[for="toggle-events"], + #toggle-account:not(:checked) ~ #toggle-about:checked ~ .navi-container label[for="toggle-about"], + #toggle-account:not(:checked) ~ #toggle-candidate-admin:checked ~ .navi-container label[for="toggle-candidate-admin"], + #toggle-account:checked ~ .navi-container label[for="toggle-account"] { + text-decoration: underline; + } + #toggle-account:not(:checked) ~ #toggle-student:checked ~ #student-nav-bar, + #toggle-account:not(:checked) ~ #toggle-industry:checked ~ #industry-nav-bar, + #toggle-account:not(:checked) ~ #toggle-outreach:checked ~ #outreach-nav-bar, + #toggle-account:not(:checked) ~ #toggle-events:checked ~ #events-nav-bar, + #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 *, + #toggle-account:not(:checked) ~ #toggle-outreach:checked ~ #outreach-nav-bar *, + #toggle-account:not(:checked) ~ #toggle-events:checked ~ #events-nav-bar *, + #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; + } + @media screen and (max-width: 710px) { + #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-student:checked ~ #student-nav-bar, + #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-industry:checked ~ #industry-nav-bar, + #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-outreach:checked ~ #outreach-nav-bar, + #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-events:checked ~ #events-nav-bar, + #toggle-mobile:checked ~ #toggle-account:not(:checked) ~ #toggle-about:checked ~ #about-nav-bar, + #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; + } + #toggle-mobile:not(:checked) ~ .sub-nav-bar, + #toggle-mobile:not(:checked) ~ .mobile-nav-bar { + display: none; + } + } + #carrot { + position: relative; + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + margin-left: 5px; + transform: rotate(45deg); + transition: transform 0.4s ease-out; + } + #toggle-account:checked ~ .navi-container #carrot { + transform: rotate(225deg); + transition: transform 0.4s ease-out; + } + .slash { + padding-left: 1em; + padding-right: 1em; + color: #fdb515; + } + + /* Navbar link styling */ + .navi-container a:link { + text-decoration: none; + } + .account-button:hover { + text-decoration: underline; + } + .navi-container a:visited { + text-decoration: none; + } + .navi-container a:hover { + text-decoration: underline; + } + .navi-menu a:hover { + text-decoration: none; + } + .navi-container a:active { + text-decoration: underline; + } + + +/* HEADING (which has the page's title) */ +.heading { + font-size: 3em; + font-weight: 300; + text-align: center; + margin: 0; + margin-top: 1rem; + margin-bottom: 1rem; + } + + /* FOOTER */ + .footer { + background-color: #252525; + padding-top: 20px; + padding-bottom: 20px; + padding-right: 0; /* .footer-block element will provide 13px of padding-right */ + } + .footer-container { + max-width: 1250px; + margin: 0 auto; + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; + } + .footer-block { + color: white; + padding-top: 7px; + padding-bottom: 7px; + padding-right: 13px; + } + .footer-block-title { + font-size: 1.25em; + } + .footer-block-text { + color: rgba(255, 255, 255, 0.75); + } + + /* Add this to out divs that evelope the body of a page. + Makes sure "float" doesn't mess up the css. */ + .parent { + overflow: hidden; + } + \ No newline at end of file diff --git a/hknweb/templates/base.html b/hknweb/templates/base.html index 5eabe9d4..3e1d6d36 100644 --- a/hknweb/templates/base.html +++ b/hknweb/templates/base.html @@ -58,22 +58,63 @@ +
- - - - - +
+ +
+ Tutoring Hours + Review Sessions + Course Surveys + Course Guide + Department Tours +
+
+
+ +
+ Industry +
+
+
+ +
+ Outreach +
+
+
+ +
+ Calendar + Photos + Leaderboard + Flickr +
+
+
+ +
+ About HKN + People + Yearbooks +
+
{% if user.is_authenticated %} - + +
+
+ {% if viewer_is_an_officer %} + Officer Portal + {% endif %} + Candidate Portal + Settings + Log out +
+
{% else %} {% endif %} @@ -90,11 +131,11 @@
- +
-