Merge pull request #6470 from escattone/survey-ui-2119

position document voting based on screen width
mozilla · Jan 23, 2025 · f11e9c5 · f11e9c5
2 parents 9604842 + 7608b22
commit f11e9c5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/kitsune/sumo/static/sumo/js/document.js b/kitsune/sumo/static/sumo/js/document.js
@@ -17,6 +17,8 @@ determineLazyLoad();
 // waits until all deferred scripts have been loaded, and the code
 // in this file is always bundled into a script that is deferred.
 document.addEventListener("DOMContentLoaded", async () => {
+  positionVotingBasedOnScreenWidth();
+
   // Once the DOM is ready, replace the value of any hidden form input
   // elements holding a CSRF token with a dynamically fetched token.
   // We do this because article pages are cached, so the CSRF token
@@ -42,6 +44,39 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
 });
 
+function positionVotingBasedOnScreenWidth() {
+  const wideScreenWrapper = document.getElementById("document-vote-wrapper-wide-screen");
+  const narrowScreenWrapper = document.getElementById("document-vote-wrapper-narrow-screen");
+  // The vote form is initially loaded in the wide-screen wrapper.
+  const vote = wideScreenWrapper.querySelector("div.document-vote");
+
+  if (wideScreenWrapper && narrowScreenWrapper && vote) {
+    function handleScreenResize(event) {
+      if (event.matches) {
+        // The screen is too narrow for two columns, so
+        // move voting to the narrow-screen container.
+        if (!narrowScreenWrapper.contains(vote)) {
+          narrowScreenWrapper.appendChild(vote);
+        }
+      } else {
+        // The screen is wide enough for two columns, so
+        // move voting to the wide-screen container.
+        if (!wideScreenWrapper.contains(vote)) {
+          wideScreenWrapper.appendChild(vote);
+        }
+      }
+    }
+
+    const mediaQuery = window.matchMedia("(max-width: 1024px)");
+
+    // Listen for screen width changes.
+    mediaQuery.addEventListener("change", handleScreenResize);
+
+    // Handle the current screen width.
+    handleScreenResize(mediaQuery);
+  }
+}
+
 $(window).on("load", function () {
   // Wait for all content (including images) to load
   var hash = window.location.hash;

diff --git a/kitsune/wiki/jinja2/wiki/document.html b/kitsune/wiki/jinja2/wiki/document.html
@@ -1,12 +1,12 @@
 {% extends "wiki/base.html" %}
 
 {% from "wiki/includes/sidebar_modules.html" import document_tools, document_notifications, related_products_sidebar with context %}
-{% from "wiki/includes/document_macros.html" import contributor_list, 
-                                                    document_title, 
-                                                    document_messages, 
-                                                    document_content, 
-                                                    inpage_contact_cta, 
-                                                    topic_list, 
+{% from "wiki/includes/document_macros.html" import contributor_list,
+                                                    document_title,
+                                                    document_messages,
+                                                    document_content,
+                                                    inpage_contact_cta,
+                                                    topic_list,
                                                     related_documents,
                                                     document_metadata with context %}
 {% from "wiki/includes/document_macros.html" import vote_form with context %}
@@ -112,8 +112,7 @@
       {% endif %}
     </article>
 
-    <section class="sumo-page-section hide-on-large">
-      {{ vote_form(document, 'footer') }}
+    <section id="document-vote-wrapper-narrow-screen" class="sumo-page-section">
     </section>
 
     {{ contributor_list(contributors) }}
@@ -130,7 +129,7 @@
 {% endblock %}
 
 {% block side_bottom %}
-<div class="document-vote--sidebar-wrap">
+<div id="document-vote-wrapper-wide-screen" class="document-vote--sidebar-wrap">
   {# this vote-wrap class is to make the js compatible with old theme. TODO: Remove and fix js. #}
   {{ vote_form(document, 'footer') }}
 </div>