Responsive design for polls

myhpi/core/templates/core/minutes_list.html

@@ -3,7 +3,11 @@
 {% load i18n %}
 
 {% block content %}
-<h1>{{ page.title }} {{ selected_year }}</h1>
+<h1 class="page-title">
+    <span class="underline">
+        {{ page.title }} {{ selected_year }}
+    </span>
+</h1>
 {% if minutes %}
     <table class="table table-striped">
         {% for minute in minutes %}

myhpi/polls/templates/polls/base_poll.html

@@ -4,32 +4,40 @@
 {% load i18n %}
 
 {% block content %}
-<div class="row">
-        {% with page.description|markdown as parsed_md %}
-        <div class="col-9">
-            <h1> {{ page.title }} </h1>
-            {{ parsed_md.0 }}
-            <h2> {{ page.question }} </h2>
-            {% if page|can_vote:request.user %}
-                {% block ballot %}
-                {% endblock %}
-            {% elif page.results_visible %}
-                {% block results %}
-                {% endblock %}
-            {% elif not page.in_voting_period %}
-                <p> {% translate "You've accessed this page outside of the voting period." %} </p>
-            {% else %}
-                <p> {% translate "You are not allowed to cast (another) vote and the results are not visible yet." %}</p>
-            {% endif %}
+    {% with page.description|markdown as parsed_md %}
+        <div class="row flex-column flex-lg-row">
+            <div class="col-lg-9">
+                <h1 class="page-title">
+                    <span class="underline">
+                        {{ page.title }}
+                    </span>
+                </h1>
+                {{ parsed_md.0|touchify_abbreviations|tag_external_links }}
+                <h2> {{ page.question }} </h2>
+                {% if page|can_vote:request.user %}
+                    {% block ballot %}
+                    {% endblock %}
+                {% elif page.results_visible %}
+                    {% block results %}
+                    {% endblock %}
+                {% elif not page.in_voting_period %}
+                    <p> {% translate "You've accessed this page outside of the voting period." %} </p>
+                {% else %}
+                    <p> {% translate "You are not allowed to cast (another) vote and the results are not visible yet." %}</p>
+                {% endif %}
+            </div>
+            <div class="col-lg-3">
+                <div class="side-panel-container">
+                    <aside class="side-panel border-accent">
+                        <h1 class="side-panel-title">{% translate "Start Date" %}</h1>
+                        <p>{{ page.start_date }}</p>
+                        <h1 class="side-panel-title">{% translate "End Date" %}</h1>
+                        <p>{{ page.end_date }}</p>
+                        <h1 class="side-panel-title">{% translate "Number of participants" %}</h1>
+                        <p>{{ page.already_voted.count }}</p>
+                    </aside>
+                </div>
+            </div>
         </div>
-        <div class="col-3">
-            <h4>{% translate "Start Date" %}</h4>
-            <p>{{ page.start_date }}</p>
-            <h4>{% translate "End Date" %}</h4>
-            <p>{{ page.end_date }}</p>
-            <h4>{% translate "Number of participants" %}</h4>
-            <p>{{ page.already_voted.count }}</p>
-        </div>
-        {% endwith %}
-    </div>
+    {% endwith %}
 {% endblock %}

myhpi/polls/templates/polls/poll_list.html

@@ -3,7 +3,11 @@
 {% load wagtailcore_tags %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+    <h1 class="page-title">
+        <span class="underline">
+            {{ page.title }}
+        </span>
+    </h1>
     <table class="table table-striped">
         <thead>
             <tr>

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()

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",
+  )
+}

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 {

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));