Skip to content

Commit df562f1

Browse files
github-actions[bot]marcoacierno
github-actions[bot]
and
marcoacierno
committed
Improve filter layout in proposals and grants recap screens
Replace the old grid-based opt-filter layout with a cleaner flexbox design: - Use compact uppercase labels instead of h3 headings - Arrange filters horizontally in a wrapping flex container - Group each filter with its label vertically for better visual hierarchy - Apply consistent styling for checkboxes, selects, and text inputs - Apply the same pattern to the grants recap screen Closes #4552 Co-authored-by: Marco Acierno <marcoacierno@users.noreply.github.com>
1 parent 10b9c2c commit df562f1

2 files changed

Lines changed: 140 additions & 65 deletions

File tree

‎backend/reviews/templates/grants-recap.html‎

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -202,16 +202,44 @@
202202
list-style: square;
203203
}
204204

205-
.opt-filter {
206-
display: grid;
207-
gap: 10px;
208-
grid-template-columns: max-content auto;
209-
align-items: center;
205+
.filters-grid {
206+
display: flex;
207+
flex-wrap: wrap;
208+
gap: 16px;
210209
margin-top: 10px;
211210
}
212211

213-
.opt-filter label + label {
214-
margin-left: 10px;
212+
.filter-group {
213+
display: flex;
214+
flex-direction: column;
215+
gap: 6px;
216+
min-width: 180px;
217+
}
218+
219+
.filter-group-label {
220+
font-size: 12px;
221+
font-weight: 600;
222+
color: var(--body-quiet-color, #666);
223+
text-transform: uppercase;
224+
letter-spacing: 0.3px;
225+
margin: 0;
226+
white-space: nowrap;
227+
}
228+
229+
.filter-group-options {
230+
display: flex;
231+
flex-wrap: wrap;
232+
gap: 4px 12px;
233+
align-items: center;
234+
}
235+
236+
.filter-group-options label {
237+
display: inline-flex;
238+
align-items: center;
239+
gap: 4px;
240+
font-size: 13px;
241+
cursor: pointer;
242+
white-space: nowrap;
215243
}
216244

217245
tr:nth-of-type(odd) {
@@ -634,23 +662,22 @@
634662
<div id="content-main">
635663
<div class="module filtered">
636664
<h2>Filters</h2>
637-
<div class="opt-filter">
638-
<h3>
639-
Show grants with
640-
<strong style="text-transform: uppercase">current</strong> status:
641-
</h3>
642-
<div>
643-
{% for status in all_statuses %}
644-
<label>
645-
<input
646-
checked
647-
type="checkbox"
648-
name="filter-by-status"
649-
value="{{ status.0 }}"
650-
/>
651-
<span>{{ status.1 }}</span>
652-
</label>
653-
{% endfor %}
665+
<div class="filters-grid">
666+
<div class="filter-group">
667+
<span class="filter-group-label">Current status</span>
668+
<div class="filter-group-options">
669+
{% for status in all_statuses %}
670+
<label>
671+
<input
672+
checked
673+
type="checkbox"
674+
name="filter-by-status"
675+
value="{{ status.0 }}"
676+
/>
677+
<span>{{ status.1 }}</span>
678+
</label>
679+
{% endfor %}
680+
</div>
654681
</div>
655682
</div>
656683
</div>

‎backend/reviews/templates/proposals-recap.html‎

Lines changed: 89 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -233,16 +233,60 @@
233233
}
234234

235235

236-
.opt-filter {
237-
display: grid;
238-
gap: 10px;
239-
grid-template-columns: max-content auto;
240-
align-items: center;
236+
.filters-grid {
237+
display: flex;
238+
flex-wrap: wrap;
239+
gap: 16px;
241240
margin-top: 10px;
242241
}
243242

244-
.opt-filter label + label {
245-
margin-left: 10px;
243+
.filter-group {
244+
display: flex;
245+
flex-direction: column;
246+
gap: 6px;
247+
min-width: 180px;
248+
}
249+
250+
.filter-group-label {
251+
font-size: 12px;
252+
font-weight: 600;
253+
color: var(--body-quiet-color, #666);
254+
text-transform: uppercase;
255+
letter-spacing: 0.3px;
256+
margin: 0;
257+
white-space: nowrap;
258+
}
259+
260+
.filter-group-options {
261+
display: flex;
262+
flex-wrap: wrap;
263+
gap: 4px 12px;
264+
align-items: center;
265+
}
266+
267+
.filter-group-options label {
268+
display: inline-flex;
269+
align-items: center;
270+
gap: 4px;
271+
font-size: 13px;
272+
cursor: pointer;
273+
white-space: nowrap;
274+
}
275+
276+
.filter-group-options select {
277+
padding: 4px 8px;
278+
font-size: 13px;
279+
border: 1px solid var(--border-color, #ccc);
280+
border-radius: 4px;
281+
background: var(--body-bg, #fff);
282+
}
283+
284+
.filter-group-options input[type="text"] {
285+
padding: 4px 8px;
286+
font-size: 13px;
287+
border: 1px solid var(--border-color, #ccc);
288+
border-radius: 4px;
289+
min-width: 200px;
246290
}
247291

248292
.speaker-name-link {
@@ -548,42 +592,46 @@
548592
<div id="content-main">
549593
<div class="module filtered">
550594
<h2>Filters</h2>
551-
<div class="opt-filter">
552-
<h3>Show proposals with N reviews:</h3>
553-
<select name="filter-with-n-reviews" id="filter-with-n-reviews">
554-
<option value="all">All</option>
555-
{% for i in '0123456789'|make_list %}
556-
<option value="{{ i }}">{{ i }}</option>
557-
{% endfor %}
558-
</select>
559-
</div>
560-
<div class="opt-filter">
561-
<h3>Show proposals with pending status:</h3>
562-
<div>
563-
{% for status in all_statuses %}
564-
<label>
565-
<input checked type="checkbox" name="filter-by-status" value="{{ status.0 }}">
566-
<span>{{ status.1 }}</span>
567-
</label>
568-
{% endfor %}
595+
<div class="filters-grid">
596+
<div class="filter-group">
597+
<span class="filter-group-label">Reviews count</span>
598+
<div class="filter-group-options">
599+
<select name="filter-with-n-reviews" id="filter-with-n-reviews">
600+
<option value="all">All</option>
601+
{% for i in '0123456789'|make_list %}
602+
<option value="{{ i }}">{{ i }}</option>
603+
{% endfor %}
604+
</select>
605+
</div>
569606
</div>
570-
</div>
571-
<div class="opt-filter">
572-
<h3>Filter by speaker name:</h3>
573-
<div style="display: flex;">
574-
<input type="text" id="filter-by-speaker" placeholder="Type speaker name..." style="flex: 1;" />
575-
<button type="button" class="clear-filter-btn" id="clear-speaker-filter" onclick="clearSpeakerFilter()" style="display: none;">Clear</button>
607+
<div class="filter-group">
608+
<span class="filter-group-label">Status</span>
609+
<div class="filter-group-options">
610+
{% for status in all_statuses %}
611+
<label>
612+
<input checked type="checkbox" name="filter-by-status" value="{{ status.0 }}">
613+
<span>{{ status.1 }}</span>
614+
</label>
615+
{% endfor %}
616+
</div>
576617
</div>
577-
</div>
578-
<div class="opt-filter">
579-
<h3>Show proposals of type:</h3>
580-
<div>
581-
{% for submission_type in submission_types %}
582-
<label>
583-
<input checked type="checkbox" name="filter-by-type" value="{{ submission_type.name }}">
584-
<span>{{ submission_type.name }}</span>
585-
</label>
586-
{% endfor %}
618+
<div class="filter-group">
619+
<span class="filter-group-label">Type</span>
620+
<div class="filter-group-options">
621+
{% for submission_type in submission_types %}
622+
<label>
623+
<input checked type="checkbox" name="filter-by-type" value="{{ submission_type.name }}">
624+
<span>{{ submission_type.name }}</span>
625+
</label>
626+
{% endfor %}
627+
</div>
628+
</div>
629+
<div class="filter-group">
630+
<span class="filter-group-label">Speaker</span>
631+
<div class="filter-group-options">
632+
<input type="text" id="filter-by-speaker" placeholder="Type speaker name..." />
633+
<button type="button" class="clear-filter-btn" id="clear-speaker-filter" onclick="clearSpeakerFilter()" style="display: none;">Clear</button>
634+
</div>
587635
</div>
588636
</div>
589637
</div>

0 commit comments

Comments
 (0)