[4.x] Blueprint UI

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>
 

resources/css/components/blueprints.css

@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
- @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+ @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
  &:hover {
  @apply border-gray text-gray-950;

resources/css/components/modal.css

@@ -2,6 +2,10 @@
  MODALS
  ========================================================================== */
 
+.v--modal {
+ @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
  z-index: 10000 !important;
  background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,16 +25,6 @@
  z-index: 1;
 }
 
-.live-preview .publish-tabs {
- @apply bg-gray-300 ml-0 pl-0;
- .tab-button {
- border-radius: 0;
- height: 100%;
- min-width: 100px;
- border: none;
- }
-}
-
 .live-preview .tabs-container {
  @apply bg-gray-300;
 }

resources/css/components/publish.css

@@ -76,6 +76,10 @@ code.parent-url {
  @apply flex items-center;
 }
 
+.publish-section-header {
+ @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
  @apply shrink-0;
  margin-left: 20px;

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+ @apply md:flex border-b border-gray-400 w-full;
+ @apply p-3 @sm:p-4 m-0;
+
+ .field-inner {
+ @apply w-full md:w-1/2 md:pr-8;
+ }
+
+ .field-inner + div {
+ @apply w-full md:w-1/2;
+ }
+
+ .help-block {
+ @apply mb-0;
+ }
+
+ .help-block p:last-child {
+ @apply mb-0 !important;
+ }
+}
+
+.card .publish-fields .config-field:last-child {
+ @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+ @apply md:flex-col;
+ .field-inner {
+ @apply w-full;
+ }
+ .field-inner + div {
+ @apply w-full;
+ }
+ .help-block p:last-child {
+ @apply mb-4 !important;
+ }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
  TABS
  ========================================================================== */
 
-
 .tabs-container {
- @apply relative mb-5;
-
- &.offset-for-sidebar {
- width: calc(100% - 320px);
- }
+ @apply w-full border-b text-md relative flex;
 
  .fade-left, .fade-right {
  @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
  }
 }
 
-.tabs {
- @apply flex items-end overflow-hidden px-2 -ml-2;
- height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+ @apply from-white;
+}
 
+.tabs {
+ @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
  &-scrolled {
  @apply pl-0 ml-0;
  }
+}
 
- .tab-button {
- @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
- height: 94%;
- min-height: 94%;
- }
-
- .tab-button:hover {
- @apply bg-white;
- }
- .tab-button:active {
- @apply bg-white text-blue;
- }
-
- .tab-button:focus {
- @apply bg-white text-blue border-b-0 ring-1 ring-inset;
- }
-
- .tab-button.active {
- @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
- z-index: 1;
+.tab-button {
+ @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+ &:hover {
+ @apply text-gray-800;
  }
-
- .tab-button:focus {
- @apply border-t;
+ &:focus-visible {
+ @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
  }
-
- .tab-button.ghost {
- @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
- min-width: 0;
- &:hover {
- @apply text-blue;
- }
+ &.active {
+ @apply text-blue-500 border-blue-500;
  }
-
- .tab-button.has-error {
+ &.has-error {
  @apply text-red-500;
 
  &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
- .tabs .tab-button {
- min-width: 120px;
- }
-}
-
-
 /* Responsive Wangjangling
  ========================================================================== */
 
-@screen md {
- .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
  @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
  .option {
  @apply mr-4 mb-3;
+ &:first-child {
+ @apply mt-3;
+ }
  }
 }
 

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
  :blueprint="fieldset"
  :values="values"
  :meta="meta"
-
+ :errors="errors"
  @updated="values = { ...$event, focus: values.focus }"
  >
  <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
@@ -126,15 +126,14 @@
  <loading-graphic text="Saving" />
  </div>
 
- <div class="card p-0">
- <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
- <publish-fields
- :fields="fields"
- :read-only="readOnly"
- @updated="setFieldValue"
- @meta-updated="setFieldMeta"
- />
- </div>
+ <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+ <publish-sections
+ :sections="fieldset.tabs[0].sections"
+ @updated="setFieldValue"
+ @meta-updated="setFieldMeta"
+ />
+
  </div>
  </publish-container>
  </div>
@@ -307,7 +306,9 @@ export default {
 
  this.fieldset = data.blueprint;
  this.fields = _.chain(this.fieldset.tabs)
- .map(tab => tab.fields)
+ .map(tab => tab.sections)
+ .flatten(true)
+ .map(section => section.fields)
  .flatten(true)
  .value();
 

resources/js/components/blueprints/Builder.vue

@@ -10,31 +10,39 @@
  </header>
 
  <div class="publish-form card p-0 @container" v-if="showTitle">
- <div class="form-group">
- <label class="block">{{ __('Title') }}</label>
- <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
- <div v-if="errors.title">
- <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Title') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+ <div v-if="errors.title">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
- <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
  </div>
 
- <div class="form-group">
- <label class="block">{{ __('Hidden') }}</label>
- <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
- <div v-if="errors.hidden">
- <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ <div class="form-group config-field">
+ <div class="field-inner">
+ <label class="block">{{ __('Hidden') }}</label>
+ <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+ <div v-if="errors.hidden">
+ <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+ </div>
+ </div>
+ <div>
+ <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
- <toggle-input name="hidden" v-model="blueprint.hidden" />
  </div>
  </div>
 
  <div class="content mt-10 mb-4" v-if="useTabs">
- <h2>{{ __('Tabs') }}</h2>
+ <!--<h2>{{ __('Tabs') }}</h2>
  <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
  <div v-if="errors.tabs">
- <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
- </div>
+ <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+ </div>-->
  </div>
 
  <tabs

resources/js/components/blueprints/Sections.vue

@@ -20,10 +20,10 @@
  @deleted="deleteSection(i)"
  />
 
- <div class="blueprint-add-section-container w-full md:w-1/2">
+ <div class="blueprint-add-section-container w-full">
  <button class="blueprint-add-section-button outline-none" @click="addSection">
  <div class="text-center flex items-center leading-none">
- <div class="text-2xl mr-1">+</div>
+ <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
  <div v-text="addSectionText" />
  </div>