@themarioga/grid-editor 3.1.0

package/src/less/grideditor.less

@@ -0,0 +1,594 @@
+@editGutter: 5px;
+@drawerHeight: 32px;
+@rowTextColor: #666;
+@colColor: #2FA4E7;
+@colTextColor: darken(@colColor, 10%);
+@elementColor: #7B5EA7;
+@elementTextColor: darken(@elementColor, 5%);
+@containerColor: #1D8A5E;
+@containerTextColor: darken(@containerColor, 5%);
+
+.ge-mainControls {
+    position: relative;
+    min-height: 22px;
+    margin-bottom: 10px;
+    
+    .ge-wrapper {
+        padding-top: 5px;
+    }
+    .ge-wrapper.ge-top {
+        .container {
+            margin: 0;
+            padding: 0;
+            width: auto;
+        }
+    }
+    .ge-wrapper.ge-fixed {
+        position: fixed;
+        z-index: 20;
+        top: 0;
+    }
+    
+    .ge-addRowGroup {
+        .btn.btn-primary {
+            background: #f4f4f4;
+            color: @rowTextColor;
+            border-color: #999;
+            display: flex;
+            align-items: center;
+            
+            &:hover {
+                background: #E3E3E3;
+            }
+        }
+        
+        .ge-row-icon {
+            width: 48px;
+            margin: 0;
+            
+            .column {
+                height: 10px;
+                background: #666;
+                padding: 0;
+                border-left: 2px solid #f4f4f4;
+            }
+        }
+    }
+    
+    .ge-layout-mode {
+        margin-left: 5px;
+    }
+    
+    .btn:focus {
+        box-shadow: none;
+        outline: none;
+    }
+    
+    .pull-right {
+        float: right;
+    }
+    
+    .dropdown-menu a {
+        cursor: default;
+    }
+}
+
+.ge-html-output {
+    width: 100%;
+    display: none;
+}
+
+/* Not editing */
+.ge-canvas {
+    .ge-tools-drawer {
+        display: none;
+    }
+}
+
+/* While a toolbar button is in the air, the canvas opens up: the gap between
+   two rows is where a drop lands at canvas level instead of inside a column,
+   and it is otherwise too thin to aim at */
+.ge-canvas.ge-editing.ge-dropping {
+    > .row {
+        margin-bottom: 24px;
+    }
+    .column > .row {
+        margin-bottom: 20px;
+    }
+
+    /* Where the block would land */
+    .ge-drop-marker {
+        height: 6px;
+        margin: 4px 0;
+        border-radius: 3px;
+        background: @colColor;
+    }
+}
+
+/* The button following the pointer must not be what the pointer is over */
+.ge-toolbar-helper {
+    pointer-events: none;
+    opacity: 0.85;
+}
+
+/* Dragging by the whole drawer rather than by the move tool */
+.ge-canvas.ge-editing.ge-drag-drawer {
+    .ge-tools-drawer {
+        cursor: move;
+    }
+    /* The tools in it are still tools, and do not start a drag */
+    .ge-tools-drawer > a,
+    .ge-tools-drawer .ge-details {
+        cursor: pointer;
+    }
+    .ge-tools-drawer .ge-details {
+        cursor: auto;
+    }
+}
+
+/* While editing */
+.ge-canvas.ge-editing {
+    
+    .ge-tools-drawer {
+        /* Positioned, so a tool can hang a picker off itself. Deliberately
+           not stacked above anything the rest of the time: jQuery UI's resize
+           handle carries an inline z-index of 90 and runs down the column's
+           edge, and a drawer sitting over it would take the clicks meant for
+           the handle. */
+        position: relative;
+        -webkit-touch-callout: none;
+
+        /* While one of its tools is offering a choice, this drawer is the one
+           that matters - above the handles, and above the drawers below it */
+        &.ge-picker-open {
+            z-index: 200;
+        }
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        background: blue;
+        margin: 0 -@editGutter @editGutter;
+        display: block;
+        width: calc(~"100% +" 2 * @editGutter);
+        
+        > a {
+            display: inline-block;
+            padding: 5px;
+            
+        }
+        > a:hover {
+            background: rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+        }
+        .ge-details {
+            padding: 5px;
+            border-top: 1px solid rgba(0,0,0,0.05);
+            display: none;
+            
+            .btn-group {
+                a {
+                    color: #333;
+                    
+                    &.active {
+                        color: white;
+                    }
+                }
+                a:hover {
+                    text-decoration: none;
+                    cursor: pointer;
+                }
+            }
+            input.ge-id,
+            input.ge-classes {
+                border: 1px solid #7F7F7F;
+                border-radius: 4px;
+                font-size: 11px;
+                padding: 2px 5px;
+                margin-right: 5px;
+                width: 80px;
+            }
+            input.ge-classes {
+                width: 200px;
+            }
+        }
+    }
+    .row {
+        background-color: #efefef;
+        border: 1px solid rgb(153,153,153);
+        padding: 0 @editGutter @editGutter;
+        margin-bottom: @editGutter;
+        margin-left: 0;
+        margin-right: 0;
+        
+        > .ge-tools-drawer {
+            > a {
+                color: #666;
+            }
+            > a.ge-add-column {
+                color: @colTextColor;
+            }
+            // background: rgba(153,153,153,0.2);
+            background: #e5e5e5;
+        }
+    }
+    .column {
+        background-color: fadeout(@colColor, 85%);
+        border: 1px solid @colColor;
+        padding: 0 @editGutter @editGutter;
+        /* The resize handle is positioned against the column, so the column
+           has to be something to position against */
+        position: relative;
+        
+        > .ge-tools-drawer {
+            a {
+                color: @colTextColor;
+            }
+            > a.ge-add-row {
+                color: @rowTextColor;
+            }
+            background: #afd5ea;
+        }
+    }
+    
+    /* Content area */
+    .ge-content-type-tinymce.active {
+        outline: 1px dotted #333;
+    }
+
+    /* The column size picker, offered by holding the add column tool. It
+       hangs off the tool itself, so it comes away with the drawers */
+    .ge-tools-drawer > a {
+        position: relative;
+    }
+
+    .ge-size-picker {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 30;
+        display: flex;
+        flex-wrap: wrap;
+        width: 160px;
+        padding: 3px;
+        background: #fff;
+        border: 1px solid #999;
+        border-radius: 4px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+
+        > .ge-size {
+            flex: 0 0 auto;
+            width: 26px;
+            margin: 1px;
+            padding: 4px 0;
+            text-align: center;
+            font-size: 11px;
+            line-height: 1;
+            text-decoration: none;
+            cursor: pointer;
+            color: @colTextColor;
+            background: fadeout(@colColor, 92%);
+            border: 1px solid fadeout(@colColor, 60%);
+            border-radius: 3px;
+
+            &:hover {
+                background: @colColor;
+                border-color: @colColor;
+                color: #fff;
+            }
+
+            /* Wider than what is left of the row: allowed, but said so */
+            &.ge-size-tight {
+                color: #999;
+                background: transparent;
+                border-style: dashed;
+                border-color: #ccc;
+            }
+        }
+    }
+
+    /* Containers: tabs, accordions and popups. A container sits in a column
+       beside the content areas, and each of its panes is an ordinary region */
+    .ge-container {
+        position: relative;
+        border: 1px solid @containerColor;
+        padding: 0 @editGutter @editGutter;
+        margin-bottom: @editGutter;
+
+        > .ge-container-drawer {
+            background: fadeout(@containerColor, 80%);
+
+            > a {
+                color: @containerTextColor;
+            }
+        }
+    }
+
+    /* A pane's own drawer is small and sits with its label rather than
+       above it: a tab strip is a row of tabs, not a stack of them */
+    .ge-pane-drawer {
+        display: inline-flex;
+        align-items: center;
+        width: auto;
+        margin: 0;
+        background: transparent;
+
+        > a {
+            padding: 2px 4px;
+            color: @containerTextColor;
+        }
+    }
+
+    .ge-tab {
+        display: flex;
+        align-items: center;
+
+        > .ge-pane-drawer {
+            padding-left: 4px;
+        }
+        .nav-link {
+            padding-left: 4px;
+        }
+    }
+
+    /* The label is edited in place, so it needs to look like it can be */
+    .ge-pane-label {
+        &:hover {
+            outline: 1px dotted @containerTextColor;
+        }
+        &[contenteditable="true"] {
+            outline: 1px solid @containerTextColor;
+            cursor: text;
+        }
+    }
+
+    .tab-content > .tab-pane {
+        padding: @editGutter 0;
+    }
+
+    /* Open and closed while editing is what the page will ship, which is what
+       data-ge-open says. Bootstrap's own collapse is not involved: its
+       javascript is never asked to run over the canvas, so the state is
+       driven from the attribute rather than from the .show class it animates */
+    .accordion-collapse[data-ge-open="true"] {
+        display: block;
+    }
+    .accordion-collapse[data-ge-open="false"] {
+        display: none;
+    }
+    .ge-accordion-item > .ge-pane-drawer {
+        padding: 2px 0;
+    }
+
+    /* A popup is rendered unfolded and in place: a plain block with its
+       body as an ordinary region. Bootstrap's modal JS is never asked to
+       open it, so there is no backdrop, no focus trap and no scroll lock */
+    .ge-container-popup {
+        .modal {
+            display: block;
+            position: static;
+            z-index: auto;
+            overflow: visible;
+            /* Bootstrap keeps a modal at opacity 0 and its dialog shifted up
+               until it adds .show, which only its own JS does. The editor
+               never asks it to, so the fade is undone here instead */
+            opacity: 1;
+            transition: none;
+        }
+        .modal-dialog {
+            margin: @editGutter 0;
+            max-width: none;
+            pointer-events: auto;
+            transform: none;
+            transition: none;
+        }
+        .modal-content {
+            box-shadow: none;
+        }
+        .ge-popup-trigger {
+            margin-bottom: @editGutter;
+        }
+
+        /* Folded away, for a page with several popups on it */
+        &.ge-popup-collapsed .modal {
+            display: none;
+        }
+    }
+
+    /* A trigger pointing at a popup that is not there any more */
+    .ge-popup-orphan {
+        outline: 2px dashed #d9534f;
+    }
+
+    /* Elements: the level below a column, inside a content area. Dashed
+       rather than solid, so a page full of them still reads as content */
+    .ge-element {
+        position: relative;
+        outline: 1px dashed @elementColor;
+        margin-bottom: @editGutter;
+        padding: 0 @editGutter;
+
+        > .ge-element-drawer {
+            background: fadeout(@elementColor, 85%);
+            margin: 0 -@editGutter @editGutter;
+            width: calc(~"100% +" 2 * @editGutter);
+
+            > a {
+                color: @elementTextColor;
+                padding: 2px 5px;
+            }
+            > a.ge-element-info {
+                cursor: default;
+            }
+        }
+    }
+    
+    /* Sorting */
+    .ui-sortable-placeholder {
+        background: fadeout(yellow, 80%);
+        visibility: visible !important;
+        min-height: 50px;
+        max-height: 100px;
+    }
+
+    /* A size change should read as a movement rather than a jump, but not
+       while the pointer is dragging the edge: there the column follows the
+       pointer and a transition only lags behind it */
+    .column {
+        transition: width 120ms ease, margin-left 120ms ease;
+    }
+    .column.ui-resizable-resizing {
+        transition: none;
+        /* Follow the pointer in pixels: the layout mode's max-width is what
+           the column will snap back into once the drag lands */
+        max-width: none;
+    }
+
+    /* Resizing. jQuery UI's own stylesheet is not a dependency, so the handle
+       is styled here: a grip on the column's edge, clear of the drawer, which
+       is what keeps the resize gesture and the sort gesture apart */
+    .column > .ui-resizable-handle {
+        position: absolute;
+        display: block;
+        z-index: 10;
+    }
+    .column > .ui-resizable-e,
+    .column > .ui-resizable-w {
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: ew-resize;
+        background: fadeout(@colColor, 70%);
+
+        &:hover {
+            background: @colColor;
+        }
+    }
+    .column > .ui-resizable-e {
+        right: -1px;
+    }
+    .column > .ui-resizable-w {
+        left: -1px;
+    }
+
+    /* The units the column would land on, shown in its drawer while dragging */
+    .ge-tools-drawer > .ge-resize-size {
+        display: none;
+        float: right;
+        padding: 5px;
+        font-size: 11px;
+        color: @colTextColor;
+    }
+    .column.ui-resizable-resizing > .ge-tools-drawer > .ge-resize-size {
+        display: block;
+    }
+}
+
+/* The handle belongs to editing, and never to the output */
+.ge-canvas:not(.ge-editing) .ui-resizable-handle {
+    display: none;
+}
+
+/* Layout modes */
+
+/*
+ * One row per Bootstrap 5 breakpoint, in the same order as the BREAKPOINTS
+ * table in the plugin. A layout mode previews one tier: the canvas is
+ * constrained to that tier's width, that tier's column and offset classes are
+ * made effective whatever the window is doing, and every other tier's classes
+ * are switched off - otherwise a wide window would keep showing the widest
+ * tier's classes no matter which mode is selected.
+ *
+ * The all view constrains nothing and switches nothing off: it renders the
+ * page as the browser would, which is the point of it.
+ */
+
+@ge-tiers: xs, sm, md, lg, xl, xxl;
+@ge-col-prefixes: col, col-sm, col-md, col-lg, col-xl, col-xxl;
+@ge-offset-prefixes: offset, offset-sm, offset-md, offset-lg, offset-xl, offset-xxl;
+@ge-previews: 400px, 576px, 768px, 992px, 1200px, none;
+@ge-columns: 12;
+
+.ge-canvas.ge-layout-all {
+    max-width: none;
+}
+
+.ge-layout-modes(@i: 1) when (@i =< length(@ge-tiers)) {
+    @tier: extract(@ge-tiers, @i);
+
+    .ge-canvas.ge-layout-@{tier} {
+        max-width: extract(@ge-previews, @i);
+        margin-left: auto;
+        margin-right: auto;
+
+        /* Wider tiers are switched off, then every tier up to and including
+           this one is switched on in ascending order. That reproduces
+           Bootstrap's own cascade inside the preview: a column carrying only
+           col-4 is four units wide at sm too, and col-sm-6 overrides it
+           because it is written afterwards. All these rules have the same
+           specificity, so the order they are written in is the rule. */
+        .ge-tiers-above-off(@i);
+        .ge-tiers-upto-on(@i);
+    }
+
+    .ge-layout-modes(@i + 1);
+}
+
+.ge-tiers-above-off(@active, @j: 1) when (@j =< length(@ge-tiers)) {
+    .ge-tier-above-off(@j, @active);
+    .ge-tiers-above-off(@active, @j + 1);
+}
+.ge-tier-above-off(@j, @active) when (@j =< @active) {
+    /* this tier applies at the active one, so it is written by the pass below */
+}
+.ge-tier-above-off(@j, @active) when (@j > @active) {
+    .ge-columns-off(extract(@ge-col-prefixes, @j));
+    .ge-offsets-off(extract(@ge-offset-prefixes, @j));
+}
+
+.ge-tiers-upto-on(@active, @j: 1) when (@j =< @active) {
+    .ge-columns-on(extract(@ge-col-prefixes, @j));
+    .ge-offsets-on(extract(@ge-offset-prefixes, @j));
+    .ge-tiers-upto-on(@active, @j + 1);
+}
+
+.ge-columns-on(@prefix, @i: 1) when (@i =< @ge-columns) {
+    .@{prefix}-@{i} {
+        flex: 0 0 auto;
+        width: percentage((@i / @ge-columns));
+        max-width: percentage((@i / @ge-columns));
+    }
+    .ge-columns-on(@prefix, (@i + 1));
+}
+
+/*
+ * Switching a tier off means giving the column back to bootstrap's default
+ * for a row child - full width, stacked - which is what a browser really
+ * shows for a column that says nothing about the tier being previewed.
+ * Leaving it at width auto sizes it to its content instead, and a column of
+ * text then runs straight out of a narrow canvas.
+ */
+.ge-columns-off(@prefix, @i: 1) when (@i =< @ge-columns) {
+    .@{prefix}-@{i} {
+        flex: 0 0 auto;
+        width: 100%;
+        max-width: 100%;
+    }
+    .ge-columns-off(@prefix, (@i + 1));
+}
+
+.ge-offsets-on(@prefix, @i: 1) when (@i < @ge-columns) {
+    .@{prefix}-@{i} {
+        margin-left: percentage((@i / @ge-columns));
+    }
+    .ge-offsets-on(@prefix, (@i + 1));
+}
+
+.ge-offsets-off(@prefix, @i: 1) when (@i < @ge-columns) {
+    .@{prefix}-@{i} {
+        margin-left: 0;
+    }
+    .ge-offsets-off(@prefix, (@i + 1));
+}
+
+.ge-layout-modes();