From 34b707ef208338b1dfb74e4f477bde87d7ed11a4 Mon Sep 17 00:00:00 2001 From: moanos Date: Sun, 24 Nov 2024 11:30:12 +0100 Subject: [PATCH 1/7] feat: add expandable navigation, sacrifice right header for now --- .../static/fellchensammlung/css/styles.css | 166 ++++++++++++------ .../templates/fellchensammlung/header.html | 59 +++---- 2 files changed, 135 insertions(+), 90 deletions(-) diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css index e0add2d..0a94cb6 100644 --- a/src/fellchensammlung/static/fellchensammlung/css/styles.css +++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css @@ -22,6 +22,7 @@ --text-three: var(--primary-light-one); --shadow-three: var(--primary-dark-one); } + /**************************/ /* TAG SETTINGS (GENERAL) */ /**************************/ @@ -211,8 +212,6 @@ select, .button { } - - /*********************/ /* UNIQUE COMPONENTS */ /*********************/ @@ -226,63 +225,128 @@ select, .button { background-color: var(--background-two); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -} - -.nav-link { - color: var(--text-one); - text-align: center; - text-decoration: none; - border-radius: 4px; -} - -.header a, .header form { - float: left; - padding: 5px 12px 5px 12px; - line-height: 25px; -} - -.header a:hover { - background-color: var(--highlight-one); - color: var(--highlight-one-text); -} - -.header a.active { - background-color: dodgerblue; - color: white; -} - - - -.header-right select.option { - color: #000; - background-color: var(--highlight-one); - border: 1px; -} - -.header-right { - float: right; display: flex; - border-radius: 0px 0px 15px 15px; - background-color: var(--highlight-two); - color: var(--highlight-one-text); - padding: 5px 5px 0px 5px; - height: 67px; + flex-direction: row; + align-items: center; + justify-content: space-between; + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + color: #FFF; + height: 50px; + padding: 1em; } -@media screen and (max-width: 500px) { - .header a { - float: none; - display: block; - text-align: left; +.menu { + display: flex; + flex-direction: row; + list-style-type: none; + margin: 0; + padding: 0; +} + +.menu > li { + margin: 0 1rem; + overflow: hidden; +} + +.menu-button-container { + display: none; + height: 100%; + width: 30px; + cursor: pointer; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#menu-toggle { + display: none; +} + +.menu-button, +.menu-button::before, +.menu-button::after { + display: block; + background-color: #fff; + position: absolute; + height: 4px; + width: 30px; + transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); + border-radius: 2px; +} + +.menu-button::before { + content: ''; + margin-top: -8px; +} + +.menu-button::after { + content: ''; + margin-top: 8px; +} + +#menu-toggle:checked + .menu-button-container .menu-button::before { + margin-top: 0px; + transform: rotate(405deg); +} + +#menu-toggle:checked + .menu-button-container .menu-button { + background: rgba(255, 255, 255, 0); +} + +#menu-toggle:checked + .menu-button-container .menu-button::after { + margin-top: 0px; + transform: rotate(-405deg); +} + +@media (max-width: 700px) { + .menu-button-container { + display: flex; } - .header-right { - float: none; + .menu { + position: absolute; + top: 0; + margin-top: 50px; + left: 0; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + } + + #menu-toggle ~ nav .menu li { + height: 0; + margin: 0; + padding: 0; + border: 0; + transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); + } + + #menu-toggle:checked ~ nav .menu li { + border: 1px solid #333; + height: 2.5em; + padding: 0.5em; + transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); + } + + .menu > li { + display: flex; + justify-content: center; + margin: 0; + padding: 0.5em 0; + width: 100%; + color: white; + background-color: var(--background-two); + } + + .menu > li:not(:last-child) { + border-bottom: 1px solid #444; } } + .logo img { height: 40px; } @@ -431,9 +495,6 @@ select, .button { } - - - .photos { display: flex; flex-wrap: wrap; @@ -580,7 +641,6 @@ select, .button { } - .form-comments { .btn { margin: 5px; diff --git a/src/fellchensammlung/templates/fellchensammlung/header.html b/src/fellchensammlung/templates/fellchensammlung/header.html index b13bf09..c8e3dab 100644 --- a/src/fellchensammlung/templates/fellchensammlung/header.html +++ b/src/fellchensammlung/templates/fellchensammlung/header.html @@ -1,41 +1,26 @@ {% load static %} {% load i18n %} -
- - -
-
- {% include "fellchensammlung/forms/change_language.html" %} - {% if user.is_authenticated %} - -
- - - - {% if user.get_num_unread_notifications > 0 %} - {{ user.get_num_unread_notifications }} - {% endif %} - -
- - -
- {% csrf_token %} - -
- {% else %} - {% translate "Registrieren" %} - - {% endif %} - -
+
+
+
-
\ No newline at end of file + + + + From 70bf8e20539ecb6751fc6db9a6da302725ecf07d Mon Sep 17 00:00:00 2001 From: moanos Date: Sun, 24 Nov 2024 12:46:30 +0100 Subject: [PATCH 2/7] feat: re-add profile card --- .../templates/fellchensammlung/header.html | 65 ++++++++++++++----- 1 file changed, 48 insertions(+), 17 deletions(-) diff --git a/src/fellchensammlung/templates/fellchensammlung/header.html b/src/fellchensammlung/templates/fellchensammlung/header.html index c8e3dab..659ba36 100644 --- a/src/fellchensammlung/templates/fellchensammlung/header.html +++ b/src/fellchensammlung/templates/fellchensammlung/header.html @@ -5,22 +5,53 @@
- - - + {% if user.get_num_unread_notifications > 0 %} + {{ user.get_num_unread_notifications }} + {% endif %} +
+ + +
+ {% csrf_token %} + +
+ {% else %} + {% translate "Registrieren" %} + + {% endif %} + + + + + From fc5b1391dfeabd91b668551c460ff658a2bf3f13 Mon Sep 17 00:00:00 2001 From: moanos Date: Sun, 24 Nov 2024 12:46:46 +0100 Subject: [PATCH 3/7] feat: align items, hide unnecessary for mobile --- src/fellchensammlung/static/fellchensammlung/css/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css index 0a94cb6..c3dc608 100644 --- a/src/fellchensammlung/static/fellchensammlung/css/styles.css +++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css @@ -144,6 +144,7 @@ textarea { border-radius: 0px 0px 8px 8px; background-color: var(--highlight-two); color: var(--highlight-one-text); + align-items: center; .btn2 { height: 40px; @@ -344,6 +345,10 @@ select, .button { .menu > li:not(:last-child) { border-bottom: 1px solid #444; } + #header-sign-out, #header-change-language { + display: none; + } + } From e7f26dd23a66cc929603ad333a72852fe5405418 Mon Sep 17 00:00:00 2001 From: moanos Date: Sun, 24 Nov 2024 14:13:41 +0100 Subject: [PATCH 4/7] feat: integrate profile card seamlessly --- .../static/fellchensammlung/css/styles.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css index c3dc608..69d1bf1 100644 --- a/src/fellchensammlung/static/fellchensammlung/css/styles.css +++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css @@ -141,8 +141,6 @@ textarea { .profile-card { display: flex; - border-radius: 0px 0px 8px 8px; - background-color: var(--highlight-two); color: var(--highlight-one-text); align-items: center; @@ -259,6 +257,9 @@ select, .button { flex-direction: column; justify-content: center; align-items: center; + background: #4ab457; + padding: 20px; + border-radius: 8px; } #menu-toggle { @@ -345,6 +346,7 @@ select, .button { .menu > li:not(:last-child) { border-bottom: 1px solid #444; } + #header-sign-out, #header-change-language { display: none; } @@ -565,7 +567,6 @@ select, .button { .btn-notification { display: inline-block; position: relative; - padding: 0; } /* Make the badge float in the top right corner of the button */ From 9f0a18ad91b31bd1effc863a12390e8a52c5a293 Mon Sep 17 00:00:00 2001 From: moanos Date: Sun, 24 Nov 2024 14:21:52 +0100 Subject: [PATCH 5/7] feat: Make sure main menu is shown in the middle when enabled --- src/fellchensammlung/static/fellchensammlung/css/styles.css | 4 ++++ src/fellchensammlung/templates/fellchensammlung/header.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css index 69d1bf1..2f354f3 100644 --- a/src/fellchensammlung/static/fellchensammlung/css/styles.css +++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css @@ -236,6 +236,10 @@ select, .button { } +#main-menu { + order: -1; +} + .menu { display: flex; flex-direction: row; diff --git a/src/fellchensammlung/templates/fellchensammlung/header.html b/src/fellchensammlung/templates/fellchensammlung/header.html index 659ba36..1951c59 100644 --- a/src/fellchensammlung/templates/fellchensammlung/header.html +++ b/src/fellchensammlung/templates/fellchensammlung/header.html @@ -34,7 +34,7 @@
-