Less home code more F3
This commit is contained in:
julien
@@ -110,8 +110,7 @@ a {
|
||||
|
||||
.meta-text,
|
||||
.field-help,
|
||||
.char-counter,
|
||||
.cover-name {
|
||||
.char-counter {
|
||||
margin: 0;
|
||||
color: var(--color-text-soft);
|
||||
font-size: 0.95rem;
|
||||
@@ -179,7 +178,6 @@ a {
|
||||
|
||||
.nav,
|
||||
.page-actions,
|
||||
.button-row,
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -206,8 +204,7 @@ a {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-items__form,
|
||||
.inline-form {
|
||||
.nav-items__form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -465,12 +462,6 @@ a {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.article-excerpt {
|
||||
margin: 0;
|
||||
color: var(--color-text-soft);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.card,
|
||||
.panel,
|
||||
.prose,
|
||||
@@ -631,10 +622,6 @@ textarea.control {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.media-frame--large {
|
||||
min-height: 18rem;
|
||||
}
|
||||
|
||||
.media-frame--placeholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -645,14 +632,13 @@ textarea.control {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
.card--stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-body,
|
||||
.article-card__body {
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
@@ -666,17 +652,6 @@ textarea.control {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.card-title__link,
|
||||
.card-media-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-title__link:hover,
|
||||
.card-title__link:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-summary {
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
@@ -711,10 +686,6 @@ textarea.control {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.article-cover {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.prose :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -846,34 +817,6 @@ textarea.control {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.media-picker__name {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.cover-field {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.cover-picker {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cover-picker .button-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.cover-picker .button-row > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cover-preview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Auth and error pages
|
||||
========================================================= */
|
||||
@@ -957,14 +900,6 @@ textarea.control {
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.cover-picker {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cover-picker > * + * {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
@@ -999,8 +934,7 @@ textarea.control {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.card-body,
|
||||
.article-card__body {
|
||||
.card-body {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
@@ -1015,7 +949,6 @@ textarea.control {
|
||||
|
||||
.nav > *,
|
||||
.page-actions > *,
|
||||
.button-row > *,
|
||||
.card-actions > * {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
@@ -47,45 +47,10 @@
|
||||
const editor = document.querySelector('[data-markdown-editor]');
|
||||
const picker = document.querySelector('[data-media-picker]');
|
||||
const editorLayout = document.querySelector('[data-editor-layout]');
|
||||
const pickerTitle = document.querySelector('[data-media-picker-title]');
|
||||
const pickerHelp = document.querySelector('[data-media-picker-help]');
|
||||
const pickerClose = document.querySelector('[data-media-picker-close]');
|
||||
const coverInput = document.querySelector('[data-cover-input]');
|
||||
const coverPreview = document.querySelector('[data-cover-preview]');
|
||||
const coverPlaceholder = document.querySelector('[data-cover-placeholder]');
|
||||
const coverClear = document.querySelector('[data-cover-clear]');
|
||||
let pickerMode = 'markdown';
|
||||
|
||||
const focusEditor = () => editor?.focus();
|
||||
|
||||
const updateCoverPreview = (item = null) => {
|
||||
if (!coverInput || !coverPreview || !coverPlaceholder) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item && item.id && item.url) {
|
||||
coverInput.value = item.id;
|
||||
coverPreview.src = item.url;
|
||||
coverPreview.alt = 'Image de couverture';
|
||||
coverPreview.classList.remove('is-hidden');
|
||||
coverPlaceholder.classList.add('is-hidden');
|
||||
if (coverClear) {
|
||||
coverClear.disabled = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
coverInput.value = '';
|
||||
coverPreview.removeAttribute('src');
|
||||
coverPreview.classList.add('is-hidden');
|
||||
coverPlaceholder.classList.remove('is-hidden');
|
||||
if (coverClear) {
|
||||
coverClear.disabled = true;
|
||||
}
|
||||
};
|
||||
|
||||
coverClear?.addEventListener('click', () => updateCoverPreview());
|
||||
|
||||
if (editor) {
|
||||
const replaceSelection = (before, after = '', placeholder = '') => {
|
||||
const start = editor.selectionStart;
|
||||
@@ -152,12 +117,11 @@
|
||||
});
|
||||
}
|
||||
|
||||
const togglePicker = (open, mode = pickerMode) => {
|
||||
const togglePicker = (open) => {
|
||||
if (!picker) {
|
||||
return;
|
||||
}
|
||||
|
||||
pickerMode = mode;
|
||||
picker.classList.toggle('is-hidden', !open);
|
||||
editorLayout?.classList.toggle('is-picker-open', open);
|
||||
|
||||
@@ -166,42 +130,19 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const isCover = pickerMode === 'cover';
|
||||
if (pickerTitle) {
|
||||
pickerTitle.textContent = isCover ? 'Choisir une couverture' : 'Insérer une image';
|
||||
}
|
||||
if (pickerHelp) {
|
||||
pickerHelp.textContent = isCover
|
||||
? 'Clique sur une image pour l’utiliser comme couverture.'
|
||||
: 'Clique sur une image pour l’insérer dans l’article.';
|
||||
}
|
||||
|
||||
picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
};
|
||||
|
||||
on('[data-media-picker-open]', (button) => {
|
||||
button.addEventListener('click', () => {
|
||||
togglePicker(true, button.getAttribute('data-media-picker-open') || 'markdown');
|
||||
});
|
||||
button.addEventListener('click', () => togglePicker(true));
|
||||
});
|
||||
|
||||
pickerClose?.addEventListener('click', () => togglePicker(false));
|
||||
|
||||
on('[data-media-picker-select]', (button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const item = {
|
||||
id: button.getAttribute('data-media-id') || '',
|
||||
url: button.getAttribute('data-media-url') || '',
|
||||
markdown: button.getAttribute('data-media-markdown') || '',
|
||||
};
|
||||
|
||||
if (pickerMode === 'cover') {
|
||||
updateCoverPreview(item);
|
||||
togglePicker(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editor || !item.markdown) {
|
||||
const markdown = button.getAttribute('data-media-markdown') || '';
|
||||
if (!editor || !markdown) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -209,12 +150,11 @@
|
||||
const end = editor.selectionEnd;
|
||||
const prefix = start > 0 && !editor.value.slice(0, start).endsWith('\n\n') ? '\n\n' : '';
|
||||
const suffix = end < editor.value.length && !editor.value.slice(end).startsWith('\n\n') ? '\n\n' : '';
|
||||
editor.setRangeText(prefix + item.markdown + suffix, start, end, 'end');
|
||||
editor.setRangeText(prefix + markdown + suffix, start, end, 'end');
|
||||
togglePicker(false);
|
||||
});
|
||||
});
|
||||
|
||||
// Synchronise data-copy-text du bouton Markdown quand l'alt est modifié.
|
||||
on('[data-alt-input]', (input) => {
|
||||
const card = input.closest('.card');
|
||||
const button = card?.querySelector('[data-markdown-template]');
|
||||
|
||||
Reference in New Issue
Block a user