Skip to content

[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jackmcdade wants to merge 10 commits into from
Closed

[4.x] WIP New Bard/Replicator Set Picker #7579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
aae62cf
Improve micro details of the toggle field UI
jackmcdade Feb 16, 2023
3298740
Tighten up checkbox/radio vertical alignment
jackmcdade Feb 16, 2023
1e04458
Remove annoying focus state on the tab-panel
jackmcdade Feb 16, 2023
a4cde19
Improvements to bard when in tight quarters
jackmcdade Feb 16, 2023
15d7b8b
Fix text-inputs 1px layout shift on :focus
jackmcdade Feb 16, 2023
707c0c1
Better assets fieldtype in tight quarters
jackmcdade Feb 16, 2023
965e27b
Redesign the Asset Editor
jackmcdade Feb 20, 2023
2f9feb3
Remove unused keybinding destroy call
jackmcdade Feb 20, 2023
5bbecc1
Tighten up base forms and styles
jackmcdade Feb 20, 2023
cdea1d3
WIP new Bard/Replicator Set Picker
jackmcdade Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 24 additions & 118 deletions resources/css/components/assets.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
========================================================================== */

.asset-tile {
@apply bg-white;
min-width: 0;
position: relative;
@apply bg-white relative min-w-0;

.asset-thumb {
@apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
}
}

.asset-thumb-container:hover .asset-controls {
@apply block;
}

.asset-meta {
@apply border-t w-full text-2xs text-gray-700;
}

.asset-filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@apply truncate;
}

.asset-controls {
@apply absolute hidden;
}

.asset-thumb-container:hover .asset-controls {
display: block;
}
}

.asset-tile.selected {
@apply border-blue;
box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
@apply border border-white;
}

/* The Asset Editor
========================================================================== */

@media all and (max-width: 800px) {
.asset-editor-meta-items .meta-item {
display: none;
}
}

.asset-editor {
display: flex;
flex-direction: column;
position: relative;
background: white;
height: 100%;

.loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(255, 255, 255, 0.7);
@apply flex items-center justify-center;
}

.editor-main {
flex-grow: 1;
display: flex;
justify-content: space-between;
}

.editor-preview {
flex-basis: 64%;
flex-grow: 1;
}

.editor-form {
flex-basis: 36%;
}

.editor-meta {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
}

.asset-editor-meta-items {
@apply flex flex-1 items-center;

.meta-item {
@apply flex items-start flex-col border-l px-4 h-full justify-center;
cursor: text;
}

.meta-label {
@apply block p-0 text-sm text-gray-800;
}

.meta-value {
@apply block p-0 text-xs text-gray-600;
}
}

.asset-editor-meta-actions {
display: flex;
align-items: center;
height: 60px;

button {
display: block;
height: 100%;
display: flex;
align-items: center;
padding: 0 25px;

&:not(:first-child) {
@apply border;
.editor-preview-image {
@apply flex flex-col flex-1 p-8;
}
svg { opacity: .75; }
&:hover svg { opacity: 1; }
}
}

.asset-editor .editor-preview {
@apply bg-gray-800 flex flex-col justify-between;

.editor-preview-image {
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
}

.image-wrapper {
flex: 1 1 auto;
position: relative;

> * {
@apply absolute w-auto h-auto max-w-full max-h-full;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 32px rgba(0, 0, 0, .35);
.image-wrapper {
flex: 1 1 auto;
position: relative;

> * {
@apply absolute w-auto h-auto max-w-full max-h-full;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 32px rgba(0, 0, 0, .35);
}
}
}

.editor-file-actions {
@apply bg-gray-900 p-4 text-center h-16;

button {
@apply mx-1;
}
.loading {
@apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
}
}

.asset-thumbnail {
border: 1px solid white;
}

/* Lazyloading
========================================================================== */

Expand Down
4 changes: 2 additions & 2 deletions resources/css/components/fieldtypes/assets.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
@apply flex items-center px-4 py-2 bg-gray-200 border rounded;
@apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

&.is-expanded {
@apply border-b-0 rounded-b-none;
}

.asset-upload-control {
@apply ml-4;
@apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
}

.upload-text-button {
Expand Down
24 changes: 12 additions & 12 deletions resources/css/components/fieldtypes/bard.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
@apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
@apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
@apply p-2 min-h-40;
@apply p-1 min-h-40 text-sm leading-tight;
@apply @sm:p-2 text-md leading-normal;
@apply @lg:p-4;
}

.bard-editor .bard-invalid {
@apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
@apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
}
}

/* Responive Wangjangling */
@screen md {
.bard-editor .ProseMirror { @apply p-4; }
.bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
@apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
}

button sup {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
}
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
/* transition: all .15s ease-in-out; */

.dropdown-menu {
/* .dropdown-menu {
left: -5px;
right: auto;
}
} */
}

.set-picker .popover .popover-content {
min-width: 320px !important;
}


Expand Down
45 changes: 3 additions & 42 deletions resources/css/components/publish.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
display: flex;
flex-wrap: wrap;
@apply flex flex-wrap;

.form-group {
> label,
.field-inner > label {
font-weight: 500;
margin-bottom: 8px;
@apply font-medium mb-2;
}
}

Expand All@@ -65,14 +63,8 @@ code.parent-url {
}

.read-only-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
@apply absolute inset-0 cursor-not-allowed bg-white/25;
z-index: 100;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.25);
}
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
@apply shrink-0;
margin-left: 20px;

width: 300px;

.publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
@apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
Used in popovers and in the asset editor modal.
========================================================================== */

.editor-form {
position: relative;

.editor-form-fields {
/* Could have done this with flexbox but firefox was pushing */
/* out the height if there were many publish fields. */
position: absolute;
top: 0;
left: 0;
bottom: 71px;
right: 0;
overflow: auto;
}

.editor-form-actions {
@apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
z-index: 2;
}

.publish-fields .form-group {
@apply px-4 pt-2
}
}
3 changes: 0 additions & 3 deletions resources/css/components/tabs.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
}
}

.tab-panel:focus {
@apply focus-outline;
}

@screen md {
.tabs .tab-button {
Expand Down
12 changes: 5 additions & 7 deletions resources/css/components/toggle.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
height: 22px;
width: 46px;
border-radius: 20px;
cursor: pointer;
position: relative;
border: 1px solid #dfdfdf;
font-size: 0.1px;
margin: 6px 0;
transition: background-color 0.2s ease;
&:focus { outline: none; }
}

.toggle-slider {
position: absolute;
top: -1px;
width: 20px;
height: 22px;
height: 20px;
border-radius: 20px;
transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
@apply bg-green-light border-green;
.toggle-slider {
@apply bg-green-light;
width: 44px;
}

Expand DownExpand Up@@ -105,7 +103,7 @@
}

.toggle-container.on .toggle-slider {
width: 22px;
width: 19px;
}
}

Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
[4.x] WIP New Bard/Replicator Set Picker by jackmcdade · Pull Request #7579 · statamic/cms · GitHub
Skip to content
[4.x] WIP New Bard/Replicator Set Picker#7579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

jackmcdade
wants to merge
10
commits into

from

 Closed


[4.x] WIP New Bard/Replicator Set Picker
#7579
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
aae62cf

Improve micro details of the toggle field UI


jackmcdade Feb 16, 2023
3298740

Tighten up checkbox/radio vertical alignment


jackmcdade Feb 16, 2023
1e04458

Remove annoying focus state on the tab-panel


jackmcdade Feb 16, 2023
a4cde19

Improvements to bard when in tight quarters


jackmcdade Feb 16, 2023
15d7b8b

Fix text-inputs 1px layout shift on :focus


jackmcdade Feb 16, 2023
707c0c1

Better assets fieldtype in tight quarters


jackmcdade Feb 16, 2023
965e27b

Redesign the Asset Editor


jackmcdade Feb 20, 2023
2f9feb3

Remove unused keybinding destroy call


jackmcdade Feb 20, 2023
5bbecc1

Tighten up base forms and styles


jackmcdade Feb 20, 2023
cdea1d3

WIP new Bard/Replicator Set Picker


jackmcdade Feb 20, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


142 changes: 24 additions & 118 deletions
resources/css/components/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,7 @@
 ========================================================================== */

.asset-tile {
 @apply bg-white;
 min-width: 0;
 position: relative;
 @apply bg-white relative min-w-0;

 .asset-thumb {
 @apply flex justify-center items-center;
Expand All@@ -157,152 +155,60 @@
 }
 }

 .asset-thumb-container:hover .asset-controls {
 @apply block;
 }

 .asset-meta {
 @apply border-t w-full text-2xs text-gray-700;
 }

 .asset-filename {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 @apply truncate;
 }

 .asset-controls {
 @apply absolute hidden;
 }

 .asset-thumb-container:hover .asset-controls {
 display: block;
 }
}

.asset-tile.selected {
 @apply border-blue;
 box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
}

.asset-thumbnail {
 @apply border border-white;
}

/* The Asset Editor
 ========================================================================== */

@media all and (max-width: 800px) {
 .asset-editor-meta-items .meta-item {
 display: none;
 }
}

.asset-editor {
 display: flex;
 flex-direction: column;
 position: relative;
 background: white;
 height: 100%;

 .loading {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(255, 255, 255, 0.7);
 @apply flex items-center justify-center;
 }

 .editor-main {
 flex-grow: 1;
 display: flex;
 justify-content: space-between;
 }

 .editor-preview {
 flex-basis: 64%;
 flex-grow: 1;
 }

 .editor-form {
 flex-basis: 36%;
 }

 .editor-meta {
 display: flex;
 border-bottom: 1px solid #e0e0e0;
 }
}

.asset-editor-meta-items {
 @apply flex flex-1 items-center;

 .meta-item {
 @apply flex items-start flex-col border-l px-4 h-full justify-center;
 cursor: text;
 }

 .meta-label {
 @apply block p-0 text-sm text-gray-800;
 }

	.meta-value {
 @apply block p-0 text-xs text-gray-600;
 }
}

.asset-editor-meta-actions {
 display: flex;
 align-items: center;
 height: 60px;

 button {
 display: block;
 height: 100%;
 display: flex;
 align-items: center;
 padding: 0 25px;

 &:not(:first-child) {
 @apply border;
 .editor-preview-image {
 @apply flex flex-col flex-1 p-8;
 }
 svg { opacity: .75; }
 &:hover svg { opacity: 1; }
 }
}

.asset-editor .editor-preview {
	@apply bg-gray-800 flex flex-col justify-between;

 .editor-preview-image {
 flex: 1;
 padding: 30px;
 display: flex;
 flex-direction: column;
 }

 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 .image-wrapper {
 flex: 1 1 auto;
 position: relative;

 > * {
 @apply absolute w-auto h-auto max-w-full max-h-full;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
 }
 }
 }

 .editor-file-actions {
 @apply bg-gray-900 p-4 text-center h-16;

 button {
 @apply mx-1;
 }
 .loading {
 @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
 }
}

.asset-thumbnail {
 border: 1px solid white;
}

/* Lazyloading
 ========================================================================== */

Expand Down

4 changes: 2 additions & 2 deletions
resources/css/components/fieldtypes/assets.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,14 +7,14 @@
}

.assets-fieldtype .assets-fieldtype-picker {
 @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;

 &.is-expanded {
 @apply border-b-0 rounded-b-none;
 }

 .asset-upload-control {
 @apply ml-4;
 @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
 }

 .upload-text-button {
Expand Down

24 changes: 12 additions & 12 deletions
resources/css/components/fieldtypes/bard.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,15 +9,17 @@
}

.bard-editor {
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
 @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
 @apply p-2 min-h-40;
 @apply p-1 min-h-40 text-sm leading-tight;
 @apply @sm:p-2 text-md leading-normal;
 @apply @lg:p-4;
}

.bard-editor .bard-invalid {
 @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
 @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -38,12 +40,6 @@
 }
}

/* Responive Wangjangling */
@screen md {
 .bard-editor .ProseMirror { @apply p-4; }
 .bard-editor .bard-invalid { @apply px-4; }
}

.bard-fixed-toolbar {
 @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
 position: sticky;
Expand DownExpand Up@@ -81,7 +77,7 @@
 }

 button sup {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@apply font-sans;
 }
}

Expand DownExpand Up@@ -205,10 +201,14 @@
.bard-set-selector {
 /* transition: all .15s ease-in-out; */

 .dropdown-menu {
/* .dropdown-menu {
 left: -5px;
 right: auto;
 }
 } */
}

.set-picker .popover .popover-content {
 min-width: 320px !important;
}


Expand Down

45 changes: 3 additions & 42 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,14 +41,12 @@ code.parent-url {
}

.publish-fields {
 display: flex;
 flex-wrap: wrap;
 @apply flex flex-wrap;

 .form-group {
 > label,
 .field-inner > label {
 font-weight: 500;
 margin-bottom: 8px;
 @apply font-medium mb-2;
 }
 }

Expand All@@ -65,14 +63,8 @@ code.parent-url {
 }

 .read-only-overlay {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 @apply absolute inset-0 cursor-not-allowed bg-white/25;
 z-index: 100;
 cursor: not-allowed;
 background: rgba(255, 255, 255, 0.25);
 }
}

Expand All@@ -87,7 +79,6 @@ code.parent-url {
.publish-sidebar {
 @apply shrink-0;
 margin-left: 20px;

 width: 300px;

 .publish-section-actions {
Expand All@@ -112,33 +103,3 @@ code.parent-url {
.publish-section:not(:empty) {
 @apply shadow bg-white rounded-md w-full;
}



/* Inline publish form
 Used in popovers and in the asset editor modal.
 ========================================================================== */

.editor-form {
 position: relative;

 .editor-form-fields {
 /* Could have done this with flexbox but firefox was pushing */
 /* out the height if there were many publish fields. */
 position: absolute;
 top: 0;
 left: 0;
 bottom: 71px;
 right: 0;
 overflow: auto;
 }

 .editor-form-actions {
 @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
 z-index: 2;
 }

 .publish-fields .form-group {
 @apply px-4 pt-2
 }
}

3 changes: 0 additions & 3 deletions
resources/css/components/tabs.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,9 +67,6 @@
 }
}

.tab-panel:focus {
 @apply focus-outline;
}

@screen md {
 .tabs .tab-button {
Expand Down

12 changes: 5 additions & 7 deletions
resources/css/components/toggle.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,21 @@
}

.toggle-container {
background: #fff;
@apply bg-white cursor-pointer relative border;
 height: 22px;
 width: 46px;
 border-radius: 20px;
 cursor: pointer;
 position: relative;
 border: 1px solid #dfdfdf;
 font-size: 0.1px;
 margin: 6px 0;
 transition: background-color 0.2s ease;
 &:focus { outline: none; }
}

.toggle-slider {
 position: absolute;
 top: -1px;
 width: 20px;
 height: 22px;
 height: 20px;
 border-radius: 20px;
 transition: all 0.2s ease;

Expand All@@ -67,8 +65,8 @@
}

.toggle-container.on {
 @apply bg-green-light border-green;
 .toggle-slider {
 @apply bg-green-light;
 width: 44px;
 }

Expand DownExpand Up@@ -105,7 +103,7 @@
 }

 .toggle-container.on .toggle-slider {
 width: 22px;
 width: 19px;
 }
}

Expand Down
Loading