Reimplement compose and add tiling windows

vendor/django-crud-mixins/mixins/templates/mixins/partials/close-widget.html

@@ -1,3 +1,8 @@
-<i
-  class="fa-solid fa-xmark has-text-grey-light float-right"
-  onclick='grid.removeWidget("widget-{{ unique }}");grid.compact();'></i>
+<button
+  type="button"
+  class="button is-light js-gia-widget-action"
+  data-gia-action="close"
+  data-gia-widget-id="widget-{{ unique }}"
+  aria-label="Close window">
+  <span class="icon is-small"><i class="fa-solid fa-xmark"></i></span>
+</button>

vendor/django-crud-mixins/mixins/templates/mixins/wm/page.html

@@ -2,5 +2,13 @@
 
 
 {% block content %}
-  {% include window_content %}
+  {% if settings_nav %}
+    <section class="section">
+      <div class="container">
+        {% include window_content %}
+      </div>
+    </section>
+  {% else %}
+    {% include window_content %}
+  {% endif %}
 {% endblock %}

vendor/django-crud-mixins/mixins/templates/mixins/wm/widget.html

@@ -1,22 +1,62 @@
-<div id="widget">
+<div
+  class="js-gia-widget-shell"
+  data-gia-widget-shell="1"
+  {% if widget_style_hrefs %}data-gia-style-hrefs="{{ widget_style_hrefs|join:'|' }}"{% endif %}
+  {% if widget_script_srcs %}data-gia-script-srcs="{{ widget_script_srcs|join:'|' }}"{% endif %}>
   <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% if widget_options is None %}gs-w="6" gs-h="1" gs-y="20" gs-x="0"{% else %}{% autoescape off %}{{ widget_options }}{% endautoescape %}{% endif %}{% endblock %}>
     <div class="grid-stack-item-content">
-
-      <nav class="panel">
-        <p class="panel-heading" style="padding: .2em; line-height: .5em;">
-          <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
-          {% block close_button %}
-            {% include 'mixins/partials/close-widget.html' %}
-          {% endblock %}
-          <i
-            class="fa-solid fa-arrows-minimize has-text-grey-light float-right"
-            onclick='grid.compact();'></i>
-          {% block heading %}
-            {{ title }}
-          {% endblock %}
+      <nav class="panel gia-widget-panel">
+        <p class="panel-heading gia-widget-heading">
+          <span class="gia-widget-heading-main">
+            <span class="icon is-small gia-widget-heading-icon">
+              <i class="{{ widget_icon|default:'fa-solid fa-window-maximize' }}"></i>
+            </span>
+            <span class="gia-widget-title">
+              {% block heading %}
+                {{ title }}
+              {% endblock %}
+            </span>
+          </span>
+          <span class="buttons are-small has-addons gia-widget-actions">
+            <button
+              type="button"
+              class="button is-light js-gia-widget-action"
+              data-gia-action="tile"
+              data-gia-widget-id="widget-{{ unique }}"
+              aria-label="Tile window">
+              <span class="icon is-small"><i class="fa-solid fa-border-all"></i></span>
+            </button>
+            <button
+              type="button"
+              class="button is-light js-gia-widget-action"
+              data-gia-action="snap-left"
+              data-gia-widget-id="widget-{{ unique }}"
+              aria-label="Snap window left">
+              <span class="icon is-small"><i class="fa-solid fa-arrow-left"></i></span>
+            </button>
+            <button
+              type="button"
+              class="button is-light js-gia-widget-action"
+              data-gia-action="snap-right"
+              data-gia-widget-id="widget-{{ unique }}"
+              aria-label="Snap window right">
+              <span class="icon is-small"><i class="fa-solid fa-arrow-right"></i></span>
+            </button>
+            <button
+              type="button"
+              class="button is-light js-gia-widget-action"
+              data-gia-action="minimize"
+              data-gia-widget-id="widget-{{ unique }}"
+              aria-label="Minimize window">
+              <span class="icon is-small"><i class="fa-solid fa-window-minimize"></i></span>
+            </button>
+            {% block close_button %}
+              {% include 'mixins/partials/close-widget.html' %}
+            {% endblock %}
+          </span>
         </p>
-        <article class="panel-block is-active">
-          <div class="control">
+        <article class="panel-block is-active gia-widget-body">
+          <div class="control gia-widget-control{% if widget_control_class %} {{ widget_control_class }}{% endif %}">
             {% block panel_content %}
               {% include window_content %}
             {% endblock %}
@@ -26,12 +66,5 @@
     </div>
   </div>
 </div>
-
-<script>
-  {% block custom_script %}
-  {% endblock %}
-  var widget_event = new Event('load-widget');
-  document.dispatchEvent(widget_event);
-</script>
 {% block custom_end %}
-{% endblock %}
+{% endblock %}

vendor/django-crud-mixins/mixins/templates/mixins/wm/window.html

@@ -1,4 +1,4 @@
-<magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
+<div class="floating-window">
   {% extends 'mixins/wm/panel.html' %}
   {% block heading %}
     {{ title }}
@@ -7,4 +7,4 @@
   {% block panel_content %}
     {% include window_content %}
   {% endblock %}
-</magnet-block>
+</div>