feat(post-form): Field Notes styling, disclosure, feedback states (U5)
Migrate Get Location/Weather + required-field validation out of the template's inline scripts into the bundle: generalize the field lookup so weather_desc (now a <select>) is found, gate Get Weather until coords exist, and add idle/loading/success/error states. Build the 'More options' <details> (native, KTD5) around the advanced trio, auto-open when any has a value. Add Field Notes CSS: select/number styling, EasyMDE dark theme, disclosure, button spinner, and server form-message states. Refs R5, R11, R12, R18, R19, AE3, KTD5.
This commit is contained in:
@@ -65,3 +65,176 @@
|
||||
}
|
||||
.photo-card.is-error .photo-card__state { background: rgba(176, 0, 32, 0.85); }
|
||||
.photo-card.is-converting .photo-card__thumb { opacity: 0.4; }
|
||||
|
||||
/* Photo picker add button + hint (U5 polish) */
|
||||
.photo-picker__add {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.photo-picker.is-busy .photo-picker__add {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
.photo-picker__hint:empty { display: none; }
|
||||
.photo-picker__reauth-hint {
|
||||
display: none;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-muted);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.photo-picker__reauth-hint.is-shown { display: block; }
|
||||
|
||||
/* ── Field Notes styling for the new controls (U5, R11/R12) ── */
|
||||
|
||||
/* Select fields (weather condition, transport mode) match the text inputs. */
|
||||
.post-form-wrap select {
|
||||
width: 100%;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-base);
|
||||
padding: 0.875rem 1rem;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2390887E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
.post-form-wrap select:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.post-form-wrap input[type="number"] {
|
||||
width: 100%;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-base);
|
||||
padding: 0.875rem 1rem;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.post-form-wrap input[type="number"]:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* "More options" disclosure */
|
||||
.more-options {
|
||||
margin-bottom: var(--space-5);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas);
|
||||
}
|
||||
.more-options__summary {
|
||||
cursor: pointer;
|
||||
padding: 0.875rem 1rem;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
.more-options__summary::-webkit-details-marker { display: none; }
|
||||
.more-options__summary::before {
|
||||
content: '▸';
|
||||
margin-right: var(--space-2);
|
||||
color: var(--color-ink-muted);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.more-options[open] .more-options__summary::before { transform: rotate(90deg); }
|
||||
.more-options[open] .more-options__summary { border-bottom: 1px solid var(--color-border); }
|
||||
.more-options > .form-field { padding: 0 1rem; }
|
||||
.more-options > .form-field:first-of-type { padding-top: var(--space-4); }
|
||||
.more-options > .form-field:last-child { padding-bottom: var(--space-4); margin-bottom: 0; }
|
||||
|
||||
/* Button loading spinner (Get Location / Get Weather) */
|
||||
.btn-action.is-loading { position: relative; color: transparent; pointer-events: none; }
|
||||
.btn-action.is-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -8px 0 0 -8px;
|
||||
border: 2px solid var(--color-ink-muted);
|
||||
border-top-color: var(--color-accent);
|
||||
border-radius: 50%;
|
||||
animation: post-spin 0.7s linear infinite;
|
||||
}
|
||||
.btn-action[disabled] { opacity: 0.5; cursor: not-allowed; }
|
||||
@keyframes post-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Grav form save/validation messages (success + error from the server) */
|
||||
.post-form-wrap .form-messages { margin-bottom: var(--space-5); }
|
||||
.post-form-wrap .form-message {
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.post-form-wrap .form-message.notice,
|
||||
.post-form-wrap .form-message.error {
|
||||
background: var(--color-accent-light);
|
||||
color: var(--color-ink);
|
||||
border: 1px solid var(--color-error);
|
||||
}
|
||||
.post-form-wrap .form-message.success {
|
||||
background: var(--color-accent-light);
|
||||
color: var(--color-ink);
|
||||
border: 1px solid var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── EasyMDE — Field Notes dark theme (U5) ─────────────────── */
|
||||
.EasyMDEContainer .CodeMirror {
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
padding: var(--space-1);
|
||||
}
|
||||
.EasyMDEContainer .CodeMirror-cursor { border-color: var(--color-ink); }
|
||||
.EasyMDEContainer .CodeMirror-selected { background: var(--color-accent-light) !important; }
|
||||
.EasyMDEContainer .editor-toolbar {
|
||||
background: var(--color-surface-raised);
|
||||
border: 1px solid var(--color-border);
|
||||
border-bottom: none;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.EasyMDEContainer .editor-toolbar button {
|
||||
color: var(--color-ink) !important;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.EasyMDEContainer .editor-toolbar button:hover,
|
||||
.EasyMDEContainer .editor-toolbar button.active {
|
||||
background: var(--color-accent-light);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.EasyMDEContainer .editor-toolbar i.separator { border-color: var(--color-border); }
|
||||
.EasyMDEContainer .editor-preview,
|
||||
.EasyMDEContainer .editor-preview-side {
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.EasyMDEContainer .editor-preview a { color: var(--color-accent); }
|
||||
|
||||
Reference in New Issue
Block a user