[4.x] Blueprints sections and tabs

config/cp.php

@@ -27,6 +27,18 @@
 
  'start_page' => 'dashboard',
 
+ /*
+ |--------------------------------------------------------------------------
+ | Listing Filters
+ |--------------------------------------------------------------------------
+ |
+ | Whether to always show the filters on listing pages or hide them behind
+ | a toggle button to keep things more simple.
+ |
+ */
+
+ 'always_show_filters' => false,
+
  /*
  |--------------------------------------------------------------------------
  | Dashboard Widgets

package.json

@@ -12,7 +12,7 @@
  },
  "dependencies": {
  "@popperjs/core": "^2.5.3",
- "@shopify/draggable": "^1.0.0-beta.8",
+ "@shopify/draggable": "^1.0.0-beta.12",
  "@simonwep/pickr": "^1.7.4",
  "@tiptap/core": "^2.0.0-beta.217",
  "@tiptap/extension-blockquote": "^2.0.0-beta.217",
@@ -90,6 +90,7 @@
  "@babel/preset-env": "^7.20.2",
  "@rollup/plugin-inject": "^5.0.3",
  "@tailwindcss/container-queries": "^0.1.0",
+ "@tailwindcss/line-clamp": "^0.4.2",
  "@tailwindcss/typography": "^0.5.9",
  "@vitejs/plugin-vue2": "^2.2.0",
  "autoprefixer": "^10.4.0",

resources/css/components/blueprints.css

@@ -2,14 +2,14 @@
  BLUEPRINTS
  ========================================================================== */
 
-.blueprint-tab {
- @apply p-2 min-h-40 outline-none;
+.blueprint-section {
+ @apply p-2 min-h-40 outline-none w-full;
 
  &.draggable-source--is-dragging {
  opacity: 0.5;
  }
 
- &.draggable-mirror .blueprint-tab-card {
+ &.draggable-mirror .blueprint-section-card {
  @apply shadow-lg;
  }
 }
@@ -21,10 +21,10 @@
  background-size: 7px 17px;
 }
 
-.blueprint-tab-field {
+.blueprint-section-field {
  @apply relative mb-2 px-1 z-10 outline-none text-sm;
 
- .blueprint-tab-field-inner {
+ .blueprint-section-field-inner {
  @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
  }
 
@@ -37,13 +37,7 @@
  }
 }
 
-/* Use specific selector because we don't want it to happen */
-/* when used inside a grid field configuratormajig. */
-.blueprint-tab .blueprint-tab-field-actions > div {
- @apply w-1/2;
-}
-
-.blueprint-tab-import {
+.blueprint-section-import {
  &:before {
  content: '';
  @apply border rounded absolute bg-gray-200 shadow-sm;
@@ -53,33 +47,33 @@
 
 /* These are applied here rather than the utility classes so they don't override */
 /* the inline widths defined by the draggable library. */
-.blueprint-tab-field-w-1\/4 { @apply w-1/4 };
-.blueprint-tab-field-w-1\/3 { @apply w-1/3 };
-.blueprint-tab-field-w-1\/2 { @apply w-1/2 };
-.blueprint-tab-field-w-2\/3 { @apply w-2/3 };
-.blueprint-tab-field-w-3\/4 { @apply w-3/4 };
-.blueprint-tab-field-w-full { @apply w-full };
-
-.blueprint-add-tab-container {
+.blueprint-section-field-w-1\/4 { @apply w-1/4 };
+.blueprint-section-field-w-1\/3 { @apply w-1/3 };
+.blueprint-section-field-w-1\/2 { @apply w-1/2 };
+.blueprint-section-field-w-2\/3 { @apply w-2/3 };
+.blueprint-section-field-w-3\/4 { @apply w-3/4 };
+.blueprint-section-field-w-full { @apply w-full };
+
+.blueprint-add-section-container {
  @apply p-2 flex min-h-40;
 
  .draggable-container--is-dragging & {
  display: none;
  }
 }
 
-.blueprint-add-tab-button {
+.blueprint-add-section-button {
  @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;
  }
 
- .blueprint-tab-draggable-zone {
+ .blueprint-section-draggable-zone {
  @apply absolute inset-0 p-4;
  }
 
- .blueprint-tab-field {
+ .blueprint-section-field {
  @apply bg-white;
  }
 }
@@ -88,5 +82,3 @@
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 }
-
-

resources/css/components/column-picker.css

@@ -3,17 +3,10 @@
 }
 
 .column-picker-item {
- @apply bg-white text-sm outline-none flex items-center rounded select-none;
- padding: 4px 8px;
- margin: -1px 0;
+ @apply text-sm outline-none flex items-center select-none h-full;
 
  &.sortable {
- cursor: grab;
-
- label {
- cursor: grab;
- }
-
+ @apply rounded bg-white border;
  &:hover {
  @apply bg-gray-200;
  }

resources/css/components/fieldtypes/bard.css

@@ -18,7 +18,7 @@
 }
 
 .bard-editor .bard-invalid {
- @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
+ @apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
 }
 
 /* Modes */
@@ -40,17 +40,12 @@
 }
 
 .bard-fixed-toolbar {
- @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
- position: sticky;
- padding: 4px 8px;
- z-index: 5;
- top: 0;
+ @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between px-1 py-2 z-5 top-0;
+ /* position: sticky; */
+
 
  .bard-toolbar-button {
- @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base text-center;
- height: 32px;
- width: 32px;
- margin: 0;
+ @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
  svg {
  @apply w-auto h-4;
  }
@@ -84,11 +79,7 @@
  @apply bg-black rounded-full shadow-lg px-4;
 
  button {
- @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
- height: 32px;
- width: 32px;
- margin: 0 2px;
- outline: none;
+ @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
  svg {
  @apply w-auto h-4;
  }
@@ -187,7 +178,7 @@
 }
 
 .bard-set.has-error > .replicator-set-header label {
- @apply text-red;
+ @apply text-red-500;
 }
 
 /* The set selection options for each text block
@@ -202,6 +193,10 @@
  }
 }
 
+.set-picker .popover .popover-content {
+ min-width: 320px !important;
+}
+
 
 /* Fullscreen mode
  ========================================================================== */
@@ -216,7 +211,7 @@
  }
 
  .bard-fixed-toolbar {
- @apply shadow h-12 justify-center;
+ @apply shadow h-12;
  padding: 7px 8px;
  top: 0;
  z-index: 999;
@@ -238,6 +233,10 @@
  * > .ProseMirror {
  min-height: auto;
  }
+
+ &:focus {
+ @apply ring-0;
+ }
  }
 
  .bard-set-selector {
@@ -500,19 +499,20 @@
  ========================================================================== */
 
  .bard-link-toolbar {
- @apply bg-white rounded absolute leading-none shadow mt-2;
+/* @apply bg-white rounded absolute leading-none shadow mt-2;
  z-index: 100;
  width: 300px;
  top: 100%;
+ right: 0; */
 
- &:before {
+/* &:before {
  content: '';
  border: 6px solid transparent;
  border-bottom-color: white;
  position: absolute;
  bottom: 100%;
  left: 10px;
- }
+ } */
 
  .input {
  @apply p-0 text-xs h-8 bg-transparent shadow-none border-none;