From 70eb3a672aaa859c366ae7c6c9d933587612655b Mon Sep 17 00:00:00 2001 From: Silvan Verhoeven Date: Tue, 30 Jul 2024 02:21:51 +0200 Subject: [PATCH 1/4] feat: apply responsive design to polls --- myhpi/polls/templates/polls/base_poll.html | 62 ++++++++++++---------- 1 file changed, 35 insertions(+), 27 deletions(-) diff --git a/myhpi/polls/templates/polls/base_poll.html b/myhpi/polls/templates/polls/base_poll.html index 2b8940ce..78cc02d5 100644 --- a/myhpi/polls/templates/polls/base_poll.html +++ b/myhpi/polls/templates/polls/base_poll.html @@ -4,32 +4,40 @@ {% load i18n %} {% block content %} -
- {% with page.description|markdown as parsed_md %} -
-

{{ page.title }}

- {{ parsed_md.0 }} -

{{ page.question }}

- {% if page|can_vote:request.user %} - {% block ballot %} - {% endblock %} - {% elif page.results_visible %} - {% block results %} - {% endblock %} - {% elif not page.in_voting_period %} -

{% translate "You've accessed this page outside of the voting period." %}

- {% else %} -

{% translate "You are not allowed to cast (another) vote and the results are not visible yet." %}

- {% endif %} + {% with page.description|markdown as parsed_md %} +
+
+

+ + {{ page.title }} + +

+ {{ parsed_md.0|touchify_abbreviations|tag_external_links }} +

{{ page.question }}

+ {% if page|can_vote:request.user %} + {% block ballot %} + {% endblock %} + {% elif page.results_visible %} + {% block results %} + {% endblock %} + {% elif not page.in_voting_period %} +

{% translate "You've accessed this page outside of the voting period." %}

+ {% else %} +

{% translate "You are not allowed to cast (another) vote and the results are not visible yet." %}

+ {% endif %} +
+
+
+ +
+
-
-

{% translate "Start Date" %}

-

{{ page.start_date }}

-

{% translate "End Date" %}

-

{{ page.end_date }}

-

{% translate "Number of participants" %}

-

{{ page.already_voted.count }}

-
- {% endwith %} -
+ {% endwith %} {% endblock %} From e585f14677a6ec7898925108f6d3615ae4449855 Mon Sep 17 00:00:00 2001 From: Silvan Verhoeven Date: Tue, 30 Jul 2024 02:36:14 +0200 Subject: [PATCH 2/4] feat: format page title consistently everywhere --- myhpi/core/templates/core/minutes_list.html | 6 +++++- myhpi/polls/templates/polls/poll_list.html | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/myhpi/core/templates/core/minutes_list.html b/myhpi/core/templates/core/minutes_list.html index 1a329f71..52f7f18e 100644 --- a/myhpi/core/templates/core/minutes_list.html +++ b/myhpi/core/templates/core/minutes_list.html @@ -3,7 +3,11 @@ {% load i18n %} {% block content %} -

{{ page.title }} {{ selected_year }}

+

+ + {{ page.title }} {{ selected_year }} + +

{% if minutes %} {% for minute in minutes %} diff --git a/myhpi/polls/templates/polls/poll_list.html b/myhpi/polls/templates/polls/poll_list.html index 1bb8ede3..7a50d112 100644 --- a/myhpi/polls/templates/polls/poll_list.html +++ b/myhpi/polls/templates/polls/poll_list.html @@ -3,7 +3,11 @@ {% load wagtailcore_tags %} {% block content %} -

{{ page.title }}

+

+ + {{ page.title }} + +

From 9f9b58eaf355bc5e03a627cedca1d2a6573acdd3 Mon Sep 17 00:00:00 2001 From: Silvan Verhoeven Date: Tue, 30 Jul 2024 02:40:31 +0200 Subject: [PATCH 3/4] chore: space breadcrumbs and menu better --- myhpi/static/scss/myHPI.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/myhpi/static/scss/myHPI.scss b/myhpi/static/scss/myHPI.scss index 0f137b82..4d1414fa 100644 --- a/myhpi/static/scss/myHPI.scss +++ b/myhpi/static/scss/myHPI.scss @@ -91,7 +91,7 @@ p { } #page { - padding-top: calc(var(--myhpi-page-padding-top) + var(--myhpi-navbar-height)); + padding-top: calc(var(--myhpi-page-padding-top)/2 + var(--myhpi-navbar-height)); } .page { From eea211a56f0afb61added54a53328464e1149b67 Mon Sep 17 00:00:00 2001 From: Silvan Verhoeven Date: Tue, 30 Jul 2024 03:35:38 +0200 Subject: [PATCH 4/4] feat: keep navbar centered on open dialog --- myhpi/static/js/myHPI.js | 6 ++++-- myhpi/static/js/navbar.js | 32 ++++++++++++++++++++------------ myhpi/static/scss/navbar.scss | 4 ++++ 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/myhpi/static/js/myHPI.js b/myhpi/static/js/myHPI.js index 84ad4a0f..4ca3a2cb 100644 --- a/myhpi/static/js/myHPI.js +++ b/myhpi/static/js/myHPI.js @@ -61,7 +61,7 @@ const localizeLastPublished = () => { if (timezone_server !== timezone_user) { lastPublishedLocalized = new Date( - lastPublished.getAttribute("datetime") + lastPublished.getAttribute("datetime"), ).toLocaleString(undefined, { year: "numeric", month: "numeric", @@ -85,7 +85,7 @@ const localizeLastPublished = () => { const enableTooltips = () => { const tooltipTriggerList = document.querySelectorAll( - '[data-bs-toggle="tooltip"]' + '[data-bs-toggle="tooltip"]', ) Array.from(tooltipTriggerList).map((tooltipTriggerEl) => { new bootstrap.Tooltip(tooltipTriggerEl) @@ -100,6 +100,8 @@ window.onload = () => { respectNavbarHeight() enableLogout() + setScrollbarWidth() + initializeSidebar() initializeSearch() diff --git a/myhpi/static/js/navbar.js b/myhpi/static/js/navbar.js index 26aa5541..0edbc040 100644 --- a/myhpi/static/js/navbar.js +++ b/myhpi/static/js/navbar.js @@ -30,7 +30,7 @@ const isCollapsed = (navItemContainer) => { */ const getLevelBelow = (navItemContainer) => { const levelId = parseInt( - navItemContainer.getAttribute("data-navbar-level").slice(11) + navItemContainer.getAttribute("data-navbar-level").slice(11), ) return levelId + 1 === numberOfSupportedLevels ? null @@ -54,7 +54,7 @@ const collapseChildren = (navItemContainer) => { "#" + getLevelBelow(navItemContainer)?.getAttribute("id") if (!collapseLevelId) return const navContainersToCollapse = document.querySelectorAll( - `.nav-item-container[data-navbar-level="${collapseLevelId}"]` + `.nav-item-container[data-navbar-level="${collapseLevelId}"]`, ) navContainersToCollapse.forEach((navItemContainerToCollapse) => { if (isCollapsed(navItemContainerToCollapse)) return @@ -74,7 +74,7 @@ const collapseChildren = (navItemContainer) => { const collapseOthersOnSameLevel = (navItemContainer) => { const collapseLevelId = navItemContainer.getAttribute("data-navbar-level") const navContainersOnSameLevel = document.querySelectorAll( - `.nav-item-container[data-navbar-level="${collapseLevelId}"]` + `.nav-item-container[data-navbar-level="${collapseLevelId}"]`, ) navContainersOnSameLevel.forEach((navContainerOnSameLevel) => { if (navContainerOnSameLevel === navItemContainer) return @@ -139,7 +139,7 @@ const addNavbarCollapses = () => { const navDropdowns = document.querySelectorAll(".nav-item.dropdown>.nav-link") navDropdowns.forEach((navDropdown) => { const controlledNavContainer = document.querySelector( - navDropdown.getAttribute("href") + navDropdown.getAttribute("href"), ) navDropdown.addEventListener("click", (e) => { bootstrap.Collapse.getOrCreateInstance(controlledNavContainer).toggle() @@ -171,14 +171,14 @@ const adjustUserNavContainerLevel = () => { const userNavContainer = document.querySelector("#nav-item-container-user") userNavContainer.setAttribute( "data-navbar-level", - isNavbarInDesktopMode ? "#nav-level-1" : "#nav-level-0" + isNavbarInDesktopMode ? "#nav-level-1" : "#nav-level-0", ) } const adjustNavbarCollapseOnLayoutChange = () => { const rootNavContainer = document.querySelector("#nav-item-container-root") const expandedContainer = rootNavContainer.querySelector( - ".nav-item-container.show" + ".nav-item-container.show", ) if (expandedContainer && isCollapsed(rootNavContainer)) { bootstrap.Collapse.getOrCreateInstance(rootNavContainer).show() @@ -200,10 +200,10 @@ const moveNonRootLevelsToDesktopLayout = () => { const levels = [...Array(numberOfSupportedLevels).keys()].slice(1) levels.forEach((levelId) => { const navItemContainers = document.querySelectorAll( - `*:not(#nav-level-right)>.nav-item-container[data-navbar-level='#nav-level-${levelId}']` + `*:not(#nav-level-right)>.nav-item-container[data-navbar-level='#nav-level-${levelId}']`, ) const bottomNavLevelContainer = document.querySelector( - `#nav-level-${levelId}` + `#nav-level-${levelId}`, ) for (const navItemContainer of navItemContainers) { navItemContainer.setAttribute("data-bs-parent", `#nav-level-${levelId}`) @@ -245,16 +245,16 @@ const moveNonRootLevelsToMobileLayout = () => { .sort((a, b) => b - a) .forEach((levelId) => { const levelNavItemContainer = document.querySelector( - `#nav-level-${levelId}` + `#nav-level-${levelId}`, ) const parentNavItems = document.querySelectorAll( - `#nav-level-${levelId - 1} .nav-item.dropdown` + `#nav-level-${levelId - 1} .nav-item.dropdown`, ) for (const parentNavItem of parentNavItems) { const levelNavItem = levelNavItemContainer.querySelector( `#${parentNavItem .querySelector(".nav-link") - .getAttribute("aria-controls")}` + .getAttribute("aria-controls")}`, ) parentNavItem.appendChild(levelNavItem) } @@ -310,7 +310,7 @@ const updateVisibleNavbarHeight = () => { "--myhpi-navbar-visible-height", _navbar.classList.contains("hide-now") ? "0px" - : _root.style.getPropertyValue("--myhpi-navbar-height") + : _root.style.getPropertyValue("--myhpi-navbar-height"), ) } @@ -330,3 +330,11 @@ const respectNavbarHeight = () => { }) resizeObserver.observe(_navbarTop) } + +const setScrollbarWidth = () => { + const body = document.querySelector("body") + _root.style.setProperty( + "--myhpi-scrollbar-width", + window.innerWidth - body.clientWidth + "px", + ) +} diff --git a/myhpi/static/scss/navbar.scss b/myhpi/static/scss/navbar.scss index d781f33e..1628a54f 100644 --- a/myhpi/static/scss/navbar.scss +++ b/myhpi/static/scss/navbar.scss @@ -13,6 +13,10 @@ } } +body.modal-open .navbar-myhpi { + transform: translateX(calc(-1 * var(--myhpi-scrollbar-width) / 2)); +} + #navbar-right { /* Should align navbar and page content. Assumes that the most right element in the navbar is a nav-link/has a padding of --bs-p-4) */ margin-right: calc(-1 * var(--bs-p-4));