From 57cfc42da17fc586901bffa1b39ca02d8f3fad7e Mon Sep 17 00:00:00 2001
From: Matthias Kestenholz <mk@feinheit.ch>
Date: Fri, 31 May 2024 14:17:00 +0200
Subject: [PATCH] Nicer presentation of plugin buttons

---
 .../static/content_editor/content_editor.css  | 19 +++++++++++++++----
 .../static/content_editor/content_editor.js   | 16 +++++++++++-----
 .../static/content_editor/tabbed_fieldsets.js | 10 +++++-----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/content_editor/static/content_editor/content_editor.css b/content_editor/static/content_editor/content_editor.css
index 59f4b15f..7009bcf1 100644
--- a/content_editor/static/content_editor/content_editor.css
+++ b/content_editor/static/content_editor/content_editor.css
@@ -187,20 +187,27 @@ h3[draggable] {
   z-index: 1982;
   top: 0;
   left: 0;
-  right: 10vw;
   box-shadow: 0 0 3px 0 rgba(0, 0, 50, 0.3);
 
   padding: 10px 20px 10px 10px;
 
-  column-width: 180px;
+  --_v: 8;
+  display: grid;
   column-gap: 10px;
-  column-fill: balance;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--_v), minmax(0, 1fr));
 
   opacity: 0;
   visibility: none;
   pointer-events: none;
 }
 
+@media screen and (max-width: 767px) {
+  .plugin-buttons {
+    display: block;
+  }
+}
+
 .plugin-buttons-visible .plugin-buttons {
   opacity: 1;
   visibility: visible;
@@ -271,7 +278,7 @@ h3[draggable] {
   border: none;
 }
 
-.content-editor-hidden {
+.content-editor-invisible {
   /* We can't simply use display: none. Some admin widgets need to know
      * their dimensions, so we can't have that -- use an alternative way
      * to hide the modules. */
@@ -282,6 +289,10 @@ h3[draggable] {
   margin: 0 !important;
 }
 
+.content-editor-hide {
+  display: none !important;
+}
+
 /* Used when dragging */
 .placeholder {
   height: 34px;
diff --git a/content_editor/static/content_editor/content_editor.js b/content_editor/static/content_editor/content_editor.js
index c17df919..f9454965 100644
--- a/content_editor/static/content_editor/content_editor.js
+++ b/content_editor/static/content_editor/content_editor.js
@@ -133,6 +133,7 @@ django.jQuery(($) => {
   addPluginIconsToInlines()
 
   const orderMachineWrapper = $(".order-machine-wrapper")
+  const pluginButtons = qs(".plugin-buttons")
   const orderMachine = $(".order-machine")
   const machineEmptyMessage = $('<p class="hidden machine-message"/>')
     .text(ContentEditor.messages.empty)
@@ -288,12 +289,17 @@ django.jQuery(($) => {
       const isVisible =
         pluginInCurrentRegion(plugin) &&
         !/^_unknown_/.test(ContentEditor.currentRegion)
-      button.classList.toggle("content-editor-hidden", !isVisible)
+      button.classList.toggle("content-editor-hide", !isVisible)
       visible += isVisible ? 1 : 0
     })
 
     if (visible) {
       noPluginsMessage.hide()
+
+      pluginButtons.style.setProperty(
+        "--_v",
+        Math.max(7, Math.ceil(visible / 3)),
+      )
     } else {
       if (ContentEditor.currentRegion) {
         noPluginsMessage.show()
@@ -421,13 +427,13 @@ django.jQuery(($) => {
 
   function hideInlinesFromOtherRegions() {
     const inlines = orderMachine.find(".inline-related:not(.empty-form)")
-    inlines.addClass("content-editor-hidden")
+    inlines.addClass("content-editor-invisible")
     const shown = inlines.filter(
       `[data-region="${ContentEditor.currentRegion}"]`,
     )
     machineEmptyMessage.addClass("hidden")
     if (shown.length) {
-      shown.removeClass("content-editor-hidden")
+      shown.removeClass("content-editor-invisible")
     } else {
       machineEmptyMessage.removeClass("hidden")
     }
@@ -605,10 +611,10 @@ django.jQuery(($) => {
 
   $(document)
     .on("content-editor:deactivate", (event, row) => {
-      row.find("fieldset").addClass("content-editor-hidden")
+      row.find("fieldset").addClass("content-editor-invisible")
     })
     .on("content-editor:activate", (event, row) => {
-      row.find("fieldset").removeClass("content-editor-hidden")
+      row.find("fieldset").removeClass("content-editor-invisible")
     })
 
   // Hide fieldsets of to-be-deleted inlines.
diff --git a/content_editor/static/content_editor/tabbed_fieldsets.js b/content_editor/static/content_editor/tabbed_fieldsets.js
index 15caeba2..1d5f0e83 100644
--- a/content_editor/static/content_editor/tabbed_fieldsets.js
+++ b/content_editor/static/content_editor/tabbed_fieldsets.js
@@ -1,5 +1,5 @@
 /* global django */
-django.jQuery(function ($) {
+django.jQuery(($) => {
   var tabbed = $(".tabbed")
   if (tabbed.length >= 1) {
     var anchor = tabbed.eq(0)
@@ -35,7 +35,7 @@ django.jQuery(function ($) {
       $title.addClass("tab")
       $tabs.append($title)
 
-      $old.addClass("content-editor-hidden")
+      $old.addClass("content-editor-invisible")
 
       $modules.append($old)
     })
@@ -44,15 +44,15 @@ django.jQuery(function ($) {
       var $tab = $(this)
       if ($tab.hasClass("active")) {
         $tab.removeClass("active")
-        $modules.children().addClass("content-editor-hidden")
+        $modules.children().addClass("content-editor-invisible")
       } else {
         $tabs.find(".active").removeClass("active")
         $tab.addClass("active")
         $modules
           .children()
-          .addClass("content-editor-hidden")
+          .addClass("content-editor-invisible")
           .eq($tab.data("index"))
-          .removeClass("content-editor-hidden")
+          .removeClass("content-editor-invisible")
       }
     })