mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-11-10 03:30:08 +01:00
feat(admin): sortable form-help blocks with two-panel UI
- Migration 005: add sort_order column to form_help_blocks - Database: getAllFormHelpBlocks orders by sort_order; new reorderFormHelpBlocks() - actions/form-help-reorder.php: HTMX POST handler, CSRF-validated, 204 response - templates/admin/contenus.php: replace flat table with two-panel layout - Left: SortableJS 1.15.2 + htmx drag-and-drop ordered block cards - Right: static form structure reference showing fieldsets and their inputs - admin.css: .fhb-* styles for layout, cards, ghost/chosen/drag states, anchors - schema.sql: updated form_help_blocks DDL with sort_order column
This commit is contained in:
Pontoporeia committed
1 parent
5c39e856a3
commit
43702542eb
7 files changed
+481
-34
No files matched your search
@@ -1589,3 +1589,236 @@
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
Form Help Blocks — drag-and-drop builder (contenus.php)
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.fhb-hint {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--step--1);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.fhb-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-m);
|
||||
align-items: start;
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.fhb-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Panels ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.fhb-sortable-panel,
|
||||
.fhb-form-preview-panel {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
padding: var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.fhb-panel-title {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--space-3xs) 0;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.fhb-panel-desc {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-xs) 0;
|
||||
}
|
||||
|
||||
/* ── Saving indicator ─────────────────────────────────────────────────────── */
|
||||
|
||||
.fhb-saving {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
font-size: var(--step--1);
|
||||
color: var(--accent-primary);
|
||||
padding: var(--space-2xs) 0;
|
||||
}
|
||||
|
||||
.fhb-saving.htmx-request {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ── Draggable block cards ─────────────────────────────────────────────────── */
|
||||
|
||||
.fhb-sortable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2xs);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fhb-block-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-left: 4px solid var(--accent-primary);
|
||||
border-radius: 4px;
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
cursor: default;
|
||||
transition: box-shadow 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.fhb-block-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.fhb-drag-handle {
|
||||
font-size: 1.2em;
|
||||
color: var(--text-tertiary);
|
||||
cursor: grab;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.fhb-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.fhb-block-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.fhb-block-label {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fhb-block-preview {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fhb-block-empty {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.fhb-edit-btn {
|
||||
flex-shrink: 0;
|
||||
font-size: var(--step--2) !important;
|
||||
padding: 2px var(--space-xs) !important;
|
||||
}
|
||||
|
||||
/* ── SortableJS state classes ─────────────────────────────────────────────── */
|
||||
|
||||
.fhb-ghost {
|
||||
opacity: 0.35;
|
||||
background: var(--accent-muted);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.fhb-chosen {
|
||||
box-shadow: 0 4px 16px rgba(149, 87, 181, 0.25);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.fhb-dragging {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* ── Form structure preview (right panel) ─────────────────────────────────── */
|
||||
|
||||
.fhb-form-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2xs);
|
||||
}
|
||||
|
||||
.fhb-fieldset-preview {
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 4px;
|
||||
padding: var(--space-xs);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.fhb-fieldset-legend {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-3xs);
|
||||
padding-bottom: var(--space-3xs);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.fhb-fieldset-inputs {
|
||||
margin: 0;
|
||||
padding: 0 0 0 var(--space-s);
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.fhb-fieldset-inputs li {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.fhb-anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
border-radius: 4px;
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
font-size: var(--step--2);
|
||||
border: 1px dashed var(--border-primary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fhb-anchor--filled {
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.fhb-anchor--empty {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.fhb-anchor-icon {
|
||||
flex-shrink: 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.fhb-anchor-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fhb-anchor-pos {
|
||||
font-size: var(--step--2);
|
||||
font-weight: 600;
|
||||
color: var(--accent-primary);
|
||||
background: var(--accent-muted);
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
/*! Sortable 1.15.2 - MIT | git://github.com/SortableJS/Sortable.git */
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function e(e,t){var n,o=Object.keys(e);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(e),t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,n)),o}function I(o){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,n;e=o,t=i[n=t],n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(i,t))})}return o}function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t}).apply(this,arguments)}function i(t,e){if(null==t)return{};var n,o=function(t,e){if(null==t)return{};for(var n,o={},i=Object.keys(t),r=0;r<i.length;r++)n=i[r],0<=e.indexOf(n)||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols)for(var i=Object.getOwnPropertySymbols(t),r=0;r<i.length;r++)n=i[r],0<=e.indexOf(n)||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n]);return o}function r(t){return function(t){if(Array.isArray(t))return l(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return l(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var y=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),w=t(/Edge/i),s=t(/firefox/i),u=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),n=t(/iP(ad|od|hone)/i),c=t(/chrome/i)&&t(/android/i),d={capture:!1,passive:!1};function h(t,e,n){t.addEventListener(e,n,!y&&d)}function f(t,e,n){t.removeEventListener(e,n,!y&&d)}function p(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"!==e[0]||t.parentNode===n)&&p(t,e)||o&&t===n)return t}while(t!==n&&(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode))}var i;return null}var g,m=/\s+/g;function k(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(m," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(m," ")))}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=!(e in o||-1!==e.indexOf("webkit"))?"-webkit-"+e:e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform")}while(o&&"none"!==o&&(n=o+" "+n),!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return i&&new i(n)}function b(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i<r;i++)n(o[i],i);return o}return[]}function O(){var t=document.scrollingElement;return t||document.documentElement}function X(t,e,n,o,i){if(t.getBoundingClientRect||t===window){var r,a,l,s,c,u,d=t!==window&&t.parentNode&&t!==O()?(a=(r=t.getBoundingClientRect()).top,l=r.left,s=r.bottom,c=r.right,u=r.height,r.width):(l=a=0,s=window.innerHeight,c=window.innerWidth,u=window.innerHeight,window.innerWidth);if((e||n)&&t!==window&&(i=i||t.parentNode,!y))do{if(i&&i.getBoundingClientRect&&("none"!==R(i,"transform")||n&&"static"!==R(i,"position"))){var h=i.getBoundingClientRect();a-=h.top+parseInt(R(i,"border-top-width")),l-=h.left+parseInt(R(i,"border-left-width")),s=a+r.height,c=l+r.width;break}}while(i=i.parentNode);return o&&t!==window&&(o=(e=v(i||t))&&e.a,t=e&&e.d,e&&(s=(a/=t)+(u/=t),c=(l/=o)+(d/=o))),{top:a,left:l,bottom:s,right:c,width:d,height:u}}}function Y(t,e,n){for(var o=M(t,!0),i=X(t)[e];oLine truncated
|
||||
Reference in new issue
Block a user