') + ')', '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('^' + ".*" + ', '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" + ', '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('^' + ".*" + ', '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); } })(); })(); [4.x] UI improvements by jackmcdade · Pull Request #7559 · statamic/cms · GitHub
Skip to content

[4.x] UI improvements#7559

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

Merged
jackmcdade merged 15 commits into from
Feb 22, 2023
Merged

[4.x] UI improvements #7559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 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
7212cbc
Translate "alt text" and use space better in Bard Images.
jackmcdade Feb 20, 2023
20044ca
Adjust h1-h6 bard icons for more consistent sizing
jackmcdade Feb 20, 2023
e4e2055
Fix datetime stacking context
jackmcdade Feb 20, 2023
9903470
Better focus states
jackmcdade Feb 21, 2023
020422a
Spruce up selectbox/ Vue Select styles and better conform to color scale
jackmcdade Feb 21, 2023
97f07f1
Merge branch 'master' into ui-improvements
jasonvarga Feb 21, 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
30 changes: 13 additions & 17 deletions resources/css/components/fieldtypes/bard.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,22 +2,23 @@
@apply border rounded relative outline-none;

* { outline: none; }

&:focus-within {
@apply focus-outline;
}
}

.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/bard:p-2 text-md leading-normal;
@apply @lg/bard:p-4;
&:focus {
@apply ring-2 ring-inset ring-blue-200;
}
}

.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 +39,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 All@@ -57,7 +52,7 @@
width: 32px;
margin: 0;
svg {
@apply w-4 h-4;
@apply w-auto h-4;
}
}

Expand All@@ -81,20 +76,21 @@
}

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

.bard-fixed-toolbar.dark {
@apply bg-black rounded-full shadow-lg px-4;

button {
@apply focus-none text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
@apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
height: 32px;
width: 32px;
margin: 0 2px;
outline: none;
svg {
@apply w-4 h-4;
@apply w-auto h-4;
}
}

Expand Down
16 changes: 6 additions & 10 deletions resources/css/components/fieldtypes/markdown.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,6 @@
.markdown-fieldtype-wrapper {
@apply border rounded overflow-hidden relative;

&:focus-within {
@apply focus-outline;
}

.markdown-toolbar {
@apply bg-white shadow-none rounded-t border-b text-sm flex items-center justify-between;
padding: 4px 8px;
Expand All@@ -26,14 +22,10 @@
}

&.active {
@apply bg-gray-300 text-black;
@apply bg-gray-300 text-black;
}
}

.markdown-buttons button:focus {
@apply focus-outline;
}

.markdown-buttons button:disabled {
@apply opacity-50;
&:hover {
Expand DownExpand Up@@ -61,12 +53,16 @@
@apply bg-gray-100 shadow-inner h-auto font-mono leading-normal p-3 text-xs;
border-radius: 0 0 3px 3px;

&:focus-within {
@apply ring-2 ring-inset ring-blue-200;
}

.cm-comment {
@apply font-mono text-sm
}
}

CodeMirror-code { min-height: 100px; }
.CodeMirror-code { min-height: 100px; }

.helpers {
@apply border-t text-xs text-gray-800 flex items-center;
Expand Down
8 changes: 7 additions & 1 deletion resources/css/components/fieldtypes/table.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -74,5 +74,11 @@

.table-fieldtype-table .row-controls {
@apply w-8 pl-0 text-center;
vertical-align: center;
vertical-align: middle;
&:focus-within {
@apply bg-gray-200;
button {
@apply outline-none ring-0;
}
}
}
Loading