Style the coach news form's photo picker, reword the footer note
The bare native file input (browser-chrome "Choose Files" button) clashed
with every other styled field on the screen -- new .m-file-input component
class mirrors management's own .file-input treatment, recolored for the
mobile palette. Also "Linked to {team}" reads clearer than "Posted for
{team}" now that the field is a hard-locked link, not a free-text audience.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -467,6 +467,56 @@
|
||||
border-radius: var(--radius-box);
|
||||
}
|
||||
|
||||
/* --- File input ------------------------------------------------------------------
|
||||
The bare native control (a browser-chrome "Choose Files" button + status text)
|
||||
clashes with every other input on the page, which are all styled boxes -- same
|
||||
fix as management's own .file-input (assets/management.css), recolored for the
|
||||
mobile palette. ::file-selector-button needs `appearance: none` first or Safari
|
||||
keeps drawing its own bezeled button regardless of the rest of this. */
|
||||
.m-file-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.75rem;
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-stroke);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--color-paper);
|
||||
padding-inline: 0.75rem;
|
||||
color: var(--color-dim);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.m-file-input::file-selector-button,
|
||||
.m-file-input::-webkit-file-upload-button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
height: 1.75rem;
|
||||
padding-inline: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
background: var(--color-ink);
|
||||
color: #fff;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.m-file-input:hover::file-selector-button,
|
||||
.m-file-input:hover::-webkit-file-upload-button {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.m-file-input:focus-within {
|
||||
outline: 2px solid var(--color-club);
|
||||
outline-offset: -1px;
|
||||
border-color: var(--color-club);
|
||||
}
|
||||
|
||||
/* --- Coach mode shell (C1-C6) ---------------------------------------------------
|
||||
Dark ink header (never club-themed) with the role switcher's own active segment
|
||||
in ice-blue (see .role-switcher-item-active-ice above) -- that's the mode's
|
||||
|
||||
@@ -668,6 +668,7 @@ class CoachCreateNewsView(CoachScopeMixin, LoginRequiredMixin, TemplateView):
|
||||
def build_photo_form(self, data=None, files=None):
|
||||
photo_form = NewsPhotoUploadForm(data, files)
|
||||
photo_form.fields["images"].required = False
|
||||
photo_form.fields["images"].widget.attrs["class"] = "m-file-input"
|
||||
return photo_form
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
|
||||
@@ -50,6 +50,6 @@
|
||||
{% for error in photo_form.images.errors %}<p class="mt-1 text-xs text-club-dark">{{ error }}</p>{% endfor %}
|
||||
</div>
|
||||
|
||||
<p class="px-1 text-xs text-dim">{% blocktrans with team=active_team.name %}Posted for {{ team }} and sent to an editor for review before it goes out to families -- they can widen who it reaches if needed.{% endblocktrans %}</p>
|
||||
<p class="px-1 text-xs text-dim">{% blocktrans with team=active_team.name %}Linked to {{ team }} and sent to an editor for review before it goes out to families -- they can widen who it reaches if needed.{% endblocktrans %}</p>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user