bootstrap5

Pylons · Nov 8, 2023 · 0ae9d50 · 0ae9d50
1 parent f4da7df
commit 0ae9d50
Show file tree

Hide file tree

Showing 27 changed files with 94 additions and 405 deletions.
diff --git a/deform/static/css/bootstrap-icons.min.css b/deform/static/css/bootstrap-icons.min.css
diff --git a/deform/static/css/bootstrap.min.css b/deform/static/css/bootstrap.min.css
diff --git a/deform/static/css/fonts/bootstrap-icons.woff b/deform/static/css/fonts/bootstrap-icons.woff
diff --git a/deform/static/css/fonts/bootstrap-icons.woff2 b/deform/static/css/fonts/bootstrap-icons.woff2
diff --git a/deform/static/css/form.css b/deform/static/css/form.css
@@ -40,30 +40,3 @@ form .deform-readonly-text {
 .upload-filename[readonly] {
     background-color: #fdfdfd;
 }
-
-
-/**
- * Accordion styling
- *
- * http://stackoverflow.com/a/18568997/315168
- */
-
-
-.deform-collapse-heading > a {
-    display: block; /* Make target area more touch friendly */
-    text-decoration: none;
-}
-
-
-.deform-collapse-heading > a:after {
-    /* symbol for "opening" panels */
-    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
-    float: right;        /* adjust as needed */
-    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
-
-}
-
-.deform-collapse-heading > a[aria-expanded="true"]:after {
-    /* symbol for "collapsed" panels */
-    content: "\e114";
-}
diff --git a/deform/static/css/typeahead.css b/deform/static/css/typeahead.css
@@ -25,7 +25,7 @@
     border-radius: 4px !important;
 }
 
-.input-group-addon + .twitter-typeahead > .tt-query {
+.input-group-text + .twitter-typeahead > .tt-query {
     border-top-left-radius: 0!important;
     border-bottom-left-radius: 0!important;
 }
@@ -78,4 +78,4 @@
 
 .tt-suggestion p {
     margin: 0;
-}
+}
diff --git a/deform/static/fonts/glyphicons-halflings-regular.eot b/deform/static/fonts/glyphicons-halflings-regular.eot
diff --git a/deform/static/fonts/glyphicons-halflings-regular.svg b/deform/static/fonts/glyphicons-halflings-regular.svg
diff --git a/deform/static/fonts/glyphicons-halflings-regular.ttf b/deform/static/fonts/glyphicons-halflings-regular.ttf
diff --git a/deform/static/fonts/glyphicons-halflings-regular.woff b/deform/static/fonts/glyphicons-halflings-regular.woff
diff --git a/deform/static/fonts/glyphicons-halflings-regular.woff2 b/deform/static/fonts/glyphicons-halflings-regular.woff2
diff --git a/deform/static/scripts/bootstrap.bundle.min.js b/deform/static/scripts/bootstrap.bundle.min.js
diff --git a/deform/static/scripts/bootstrap.min.js b/deform/static/scripts/bootstrap.min.js
diff --git a/deform/static/scripts/deform.js b/deform/static/scripts/deform.js
@@ -4,11 +4,11 @@
  * to include the call at the end of the page.
  */
 
-$(document).ready(function(){
+document.addEventListener("DOMContentLoaded", function() {
+    // Code to be executed when the DOM is ready
     deform.load();
 });
 
-
 var deform_loaded = false;
 
 var deform  = {
@@ -31,7 +31,7 @@ var deform  = {
     },
 
     processCallbacks: function () {
-        $(deform.callbacks).each(function(num, item) {
+        deform.callbacks.forEach(function(item) {
             var oid = item[0];
             var callback = item[1];
             callback(oid);

diff --git a/deform/templates/dateparts.pt b/deform/templates/dateparts.pt
@@ -7,8 +7,8 @@
                   autofocus autofocus|field.autofocus">
   ${field.start_mapping()}
   <div class="row">
-    <div class="col-xs-4"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Year</span>
+    <div class="col-md-4"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Year</span>
       <input type="number" name="year" value="${year}"
              class="span2 form-control ${css_class or ''}"
              tal:attributes="style style;
@@ -17,17 +17,17 @@
              maxlength="4"
              id="${oid}"/>
     </div></div>
-    <div class="col-xs-4"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Month</span>
+    <div class="col-md-4"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Month</span>
       <input type="number" name="month" value="${month}"
              class="span2 form-control ${css_class or ''}"
              tal:attributes="style style;
                              month_attributes|field.widget.month_attributes|{};"
              maxlength="2"
              id="${oid}-month"/>
     </div></div>
-    <div class="col-xs-4"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Day</span>
+    <div class="col-md-4"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Day</span>
       <input type="number" name="day" value="${day}"
              class="span2 form-control ${css_class or ''}"
              tal:attributes="style style;

diff --git a/deform/templates/datetimeinput.pt b/deform/templates/datetimeinput.pt
@@ -7,17 +7,17 @@
                   type_name type_name|field.widget.type_name;">
   ${field.start_mapping()}
   <div class="row">
-    <div class="col-xs-6"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Date</span>
+    <div class="col-md-6"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Date</span>
       <input type="date" name="date" value="${date}"
              class="span2 form-control ${css_class or ''} hasDatepicker"
              tal:attributes="style style;
                              autofocus autofocus;
                              date_attributes|field.widget.date_attributes|{}"
              id="${oid}-date"/>
     </div></div>
-    <div class="col-xs-6"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Time</span>
+    <div class="col-md-6"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Time</span>
       <input type="time" name="time" value="${time}"
              class="span2 form-control ${css_class or ''} hasDatepicker"
              tal:attributes="style style;

diff --git a/deform/templates/form.pt b/deform/templates/form.pt
@@ -46,7 +46,7 @@
     <div tal:repeat="child field"
          tal:replace="structure child.render_template(item_template)"/>
 
-    <div class="form-group deform-form-buttons">
+    <div class="mb-3 deform-form-buttons">
       <tal:loop tal:repeat="button buttons">
         <button
               tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';"
@@ -86,7 +86,6 @@
          replaceTarget: true,
          success: function() {
            deform.processCallbacks();
-           deform.focusFirstInput(target);
          },
          beforeSerialize: function() { 
            // See http://bit.ly/1agBs9Z (hack to fix tinymce-related ajax bug)

diff --git a/deform/templates/mapping.pt b/deform/templates/mapping.pt
@@ -4,9 +4,9 @@
                      item_template item_template|field.widget.item_template"
          i18n:domain="deform">
 
-  <div class="panel panel-default" title="${description}">
-    <div class="panel-heading">${title}</div>
-    <div class="panel-body">
+  <div class="card mb-3" title="${description}">
+    <div class="card-header">${title}</div>
+    <div class="card-body">
 
       <div tal:condition="errormsg" 
            class="clearfix alert alert-danger">

diff --git a/deform/templates/mapping_accordion.pt b/deform/templates/mapping_accordion.pt
@@ -3,45 +3,46 @@
                      errormsg errormsg|field.errormsg;
                      open python:(field.widget.open or field.error) and True or False;
                      collapse_link_class python:open and '' or 'collapsed';
-                     collapse_body_class python:open and 'in' or '';
+                     collapse_body_class python:open and 'show' or '';
                      item_template item_template|field.widget.item_template"
          i18n:domain="deform">
 
-  <div class="panel panel-default" title="${description}">
-    <div class="panel-heading deform-collapse-heading">
+  <div class="accordion mb-3" title="${description}">
+    <div class="accordion-item">
+      <div class="accordion-header">
+        <button
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-${field.oid}"
+            tal:attributes="aria-expanded python:open and 'true' or None">
+            ${title}
+        </button>
+      </div>
 
-      <a
-          role="button"
-          data-toggle="collapse"
-          href="#collapse-${field.oid}"
-          tal:attributes="aria-expanded python:open and 'true' or None"
-          aria-controls="collapse-${field.oid}">
-          ${title}
-      </a>
-    </div>
+      <div id="collapse-${field.oid}" class="accordion-collapse deform-collapse-body collapse ${collapse_body_class}">
 
-    <div id="collapse-${field.oid}" class="panel-collapse deform-collapse-body collapse ${collapse_body_class}" role="tabpanel" aria-labelledby="heading-${field.oid}">
+        <div class="accordion-body">
 
-      <div class="panel-body">
+          <div tal:condition="errormsg"
+               class="clearfix alert alert-danger">
+            <p i18n:translate="">
+               There was a problem with this section
+            </p>
+            <p>${errormsg}</p>
+          </div>
 
-        <div tal:condition="errormsg"
-             class="clearfix alert alert-danger">
-          <p i18n:translate="">
-             There was a problem with this section
-          </p>
-          <p>${errormsg}</p>
-        </div>
+          <div tal:condition="description">
+            ${description}
+          </div>
 
-        <div tal:condition="description">
-          ${description}
-        </div>
+          ${field.start_mapping()}
+          <div tal:repeat="child field.children"
+               tal:replace="structure child.render_template(item_template)" >
+          </div>
+          ${field.end_mapping()}
 
-        ${field.start_mapping()}
-        <div tal:repeat="child field.children"
-             tal:replace="structure child.render_template(item_template)" >
         </div>
-        ${field.end_mapping()}
-
       </div>
     </div>
   </div>

diff --git a/deform/templates/mapping_item.pt b/deform/templates/mapping_item.pt
@@ -6,7 +6,7 @@
                  category category|field.widget.category;
                  structural hidden or category == 'structural';
                  required required|field.required;"
-     class="form-group ${field.error and error_class or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
+     class="mb-3 ${field.error and error_class or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
      title="${description}"
      id="item-${oid}"
      tal:omit-tag="structural"
@@ -24,10 +24,10 @@
                    input_append field.widget.input_append  | None"
        tal:omit-tag="not (input_prepend or input_append)"
        class="input-group">
-    <span class="input-group-addon"
+    <span class="input-group-text"
           tal:condition="input_prepend">${input_prepend}</span
     ><span tal:replace="structure field.serialize(cstruct).strip()"
-    /><span class="input-group-addon"
+    /><span class="input-group-text"
             tal:condition="input_append">${input_append}</span>
   </div>
 

diff --git a/deform/templates/readonly/mapping.pt b/deform/templates/readonly/mapping.pt
@@ -4,9 +4,9 @@
                      item_template item_template|field.widget.readonly_item_template"
          i18n:domain="deform">
 
-  <div class="panel panel-default" title="${description}">
-    <div class="panel-heading">${title}</div>
-    <div class="panel-body">
+  <div class="card mb-3" title="${description}">
+    <div class="card-header">${title}</div>
+    <div class="card-body">
 
       <div tal:condition="description">
         ${description}

diff --git a/deform/templates/readonly/mapping_item.pt b/deform/templates/readonly/mapping_item.pt
@@ -6,7 +6,7 @@
                  category category|field.widget.category;
                  structural hidden or category == 'structural';
                  required required|field.required;"
-     class="form-group ${field.error and error_class or ''} ${field.widget.item_css_class or ''}"
+     class="mb-3 ${field.error and error_class or ''} ${field.widget.item_css_class or ''}"
      title="${description}"
      id="item-${oid}"
      tal:omit-tag="structural"
@@ -24,10 +24,10 @@
                    input_append field.widget.input_append  | None"
        tal:omit-tag="not (input_prepend or input_append)"
        class="input-group">
-    <span class="input-group-addon"
+    <span class="input-group-text"
           tal:condition="input_prepend">${input_prepend}</span
     ><span tal:replace="structure field.serialize(cstruct, readonly=True).strip()"
-    /><span class="input-group-addon"
+    /><span class="input-group-text"
             tal:condition="input_append">${input_append}</span>
   </div>
 

diff --git a/deform/templates/readonly/select.pt b/deform/templates/readonly/select.pt
@@ -7,7 +7,7 @@
   <tal:if condition="isinstance(item, optgroup_class)">
     <tal:loop repeat="choice item.options">
       <p class="form-control-static"
-         id="${oid}-${repeat.item.index}-${repeat.choice.index}"
+         id="${oid}-${repeat.carousel-item.index}-${repeat.choice.index}"
          tal:define="(value, description) choice"
          tal:condition="(multiple and value in cstruct or value == cstruct)"
          >${description}</p>
@@ -17,7 +17,7 @@
   <tal:if condition="not isinstance(item, optgroup_class)">
     <tal:block define="(value, description) item">
       <p class="form-control-static"
-         id="${oid}-${repeat.item.index}"
+         id="${oid}-${repeat.carousel-item.index}"
          tal:condition="(multiple and value in cstruct or value == cstruct)"
          >${description}</p>
     </tal:block>

diff --git a/deform/templates/readonly/sequence.pt b/deform/templates/readonly/sequence.pt
@@ -6,9 +6,9 @@
      class="deform-seq"
      id="${oid}">
 
-  <div class="panel panel-default">
-    <div class="panel-heading">${title}</div>
-    <div class="panel-body">
+  <div class="card mb-3">
+    <div class="card-header">${title}</div>
+    <div class="card-body">
 
       <div class="deform-seq-container">
         <div tal:define="subfields [ x[1] for x in subfields ]"

diff --git a/deform/templates/readonly/sequence_item.pt b/deform/templates/readonly/sequence_item.pt
@@ -3,9 +3,9 @@
      hidden hidden|field.widget.hidden;
      description description|field.description;"
      title="${description}"
-     class="form-group row deform-seq-item"
+     class="mb-3 row deform-seq-item"
      i18n:domain="deform">
-  <div class="col-xs-12">
+  <div class="col-md-12">
     <span tal:replace="structure field.serialize(cstruct, readonly=True)"/>
   </div>
 </div>
diff --git a/deform/templates/sequence.pt b/deform/templates/sequence.pt
@@ -32,9 +32,9 @@
          tal:attributes="prototype prototype;
          				 attributes|field.widget.attributes|{};"/>
 
-  <div class="panel panel-default">
-    <div class="panel-heading">${title}</div>
-    <div class="panel-body">
+  <div class="card mb-3">
+    <div class="card-header">${title}</div>
+    <div class="card-body">
 
       <div class="deform-seq-container"
            id="${oid}-orderable">
@@ -52,7 +52,7 @@
 
     </div>
 
-    <div class="panel-footer">
+    <div class="card-footer">
       <a href="#"
          class="btn deform-seq-add"
          id="${field.oid}-seqAdd"
@@ -72,10 +72,10 @@
          )
          <tal:block condition="orderable">
              $( "#${oid}-orderable" ).sortable({
-               handle: ".deform-order-button, .panel-heading",
+               handle: ".deform-order-button, .card-header",
                containerSelector: "#${oid}-orderable",
                itemSelector: ".deform-seq-item",
-               placeholder: '<span class="glyphicon glyphicon-arrow-right placeholder"></span>',
+               placeholder: '<i class="bi bi-arrow-right"></i>',
                onDragStart: function ($item, container, _super) {
                  var offset = $item.offset(),
                  pointer = container.rootGroup.pointer