Skip to content

Commit dc7a917

Browse files
sudo-maysudo-may
committed
#1130: improved how filter inputs are styled and arranged
1 parent 695b96b commit dc7a917

3 files changed

Lines changed: 66 additions & 64 deletions

File tree

‎dashboard/src/components/metrics/projectAchievements/AchievementsNavigator.vue‎

Lines changed: 63 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -161,50 +161,58 @@ const typeLabel = (type) => {
161161
<SkillsCardHeader title="Achievements"></SkillsCardHeader>
162162
</template>
163163
<template #content>
164-
<div class="p-4">
165-
<div class="flex pb-2 flex-col lg:flex-row">
166-
<div class="flex flex-1 flex-col lg:border-r lg:border-surface lg:pr-4 gap-2">
167-
<div class="field">
168-
<label for="user-name-filter">User Name Filter:</label>
169-
<InputText class="w-full"
170-
v-model="usernameFilter"
171-
id="user-name-filter"
172-
data-cy="achievementsNavigator-usernameInput"
173-
@keydown.enter="reloadTable"
174-
aria-label="Skill name filter" />
175-
</div>
176-
<div v-if="showUserTagColumn" class="xl:flex-none w-56">
177-
<div>
178-
<label for="userTagFilter">{{ appConfig.usersTableAdditionalUserTagLabel }} Filter</label>
179-
</div>
180-
<InputText id="userTagFilter" v-model="userTagFilter" v-on:keydown.enter="reloadTable"
181-
class="w-full"
182-
data-cy="users-userTagFilter" aria-label="user tag filter" />
183-
</div>
184-
<div class="field">
185-
<label>Types: </label>
186-
<div class="flex gap-2 mt-2" data-cy="achievementsNavigator-typeInput">
187-
<span v-for="tag in achievementTypes.available" :key="tag">
188-
<Checkbox v-model="achievementTypes.selected" :value="tag" :name="tag" :inputId="tag"></Checkbox>
189-
<label :for="tag" class="ml-2">
190-
{{ typeLabel(tag) }}
191-
</label>
192-
</span>
193-
</div>
164+
<div class="p-4 flex flex-col gap-2">
165+
<div class="flex flex-col xl:flex-row gap-3">
166+
<div class="flex-1 flex flex-col gap-2">
167+
<label for="user-name-filter">User Name Filter:</label>
168+
<InputText class="w-full"
169+
v-model="usernameFilter"
170+
id="user-name-filter"
171+
data-cy="achievementsNavigator-usernameInput"
172+
@keydown.enter="reloadTable"
173+
aria-label="Skill name filter" />
174+
</div>
175+
<div class="flex-1 flex flex-col gap-2">
176+
<label for="name-filter">Subject, Skill or Badge Name:</label>
177+
<InputText class="w-full"
178+
v-model="nameFilter"
179+
id="name-filter"
180+
data-cy="achievementsNavigator-nameInput"
181+
@keydown.enter="reloadTable" />
182+
</div>
183+
<div v-if="showUserTagColumn" class="flex-1 flex flex-col gap-2">
184+
<div>
185+
<label for="userTagFilter">{{ appConfig.usersTableAdditionalUserTagLabel }} Filter</label>
194186
</div>
187+
<InputText id="userTagFilter" v-model="userTagFilter" v-on:keydown.enter="reloadTable"
188+
class="w-full"
189+
data-cy="users-userTagFilter" aria-label="user tag filter" />
195190
</div>
196-
<div class="flex flex-1 flex-col gap-2 lg:border-r lg:border-surface lg:pl-2 lg:pr-2">
191+
</div>
192+
<div class="flex flex-col xl:flex-row gap-3">
193+
<div class="flex-1">
197194
<SkillsCalendarInput
198-
v-model="fromDayFilter"
199-
id="from-date-filter"
200-
data-cy="achievementsNavigator-fromDateInput"
201-
label="From Date:"
202-
name="fromDayFilter"
203-
input-class="w-full"
204-
:max-date="toDayFilter" />
205-
195+
v-model="fromDayFilter"
196+
id="from-date-filter"
197+
data-cy="achievementsNavigator-fromDateInput"
198+
label="From Date:"
199+
name="fromDayFilter"
200+
input-class="w-full"
201+
:max-date="toDayFilter" />
202+
</div>
203+
<div class="flex-1">
204+
<SkillsCalendarInput
205+
v-model="toDayFilter"
206+
id="to-date-filter"
207+
data-cy="achievementsNavigator-toDateInput"
208+
label="To Date:"
209+
name="toDayFilter"
210+
input-class="w-full"
211+
:min-date="fromDayFilter" />
212+
</div>
213+
<div class="flex-1">
206214
<SkillsDropDown
207-
label="Minimum Level (Subject & Skill Only)"
215+
label="Overall or Subject Minimum Level"
208216
name="levels-input-group"
209217
id="levels-input-group"
210218
data-cy="achievementsNavigator-levelsInput"
@@ -214,31 +222,24 @@ const typeLabel = (type) => {
214222
v-model="levels.selected"
215223
:options="levels.available" />
216224
</div>
217-
<div class="flex flex-1 flex-col lg:gap-2 lg:pl-2">
218-
<SkillsCalendarInput
219-
v-model="toDayFilter"
220-
id="to-date-filter"
221-
data-cy="achievementsNavigator-toDateInput"
222-
label="To Date:"
223-
name="toDayFilter"
224-
input-class="w-full"
225-
:min-date="fromDayFilter" />
226-
227-
<div class="field">
228-
<label for="name-filter">Name (Subject, Skill and Badge Only):</label>
229-
<InputText class="w-full"
230-
v-model="nameFilter"
231-
id="name-filter"
232-
data-cy="achievementsNavigator-nameInput"
233-
@keydown.enter="reloadTable" />
234-
</div>
225+
</div>
226+
<div class="flex flex-col gap-2 mt-1">
227+
<label>Types: </label>
228+
<div class="flex gap-2" data-cy="achievementsNavigator-typeInput">
229+
<span v-for="tag in achievementTypes.available" :key="tag">
230+
<Checkbox v-model="achievementTypes.selected" :value="tag" :name="tag" :inputId="tag"></Checkbox>
231+
<label :for="tag" class="ml-2">
232+
{{ typeLabel(tag) }}
233+
</label>
234+
</span>
235235
</div>
236236
</div>
237-
<div class="flex lg:pl-4 mb-4 lg:mt-4">
238-
<SkillsButton size="small" aria-label="Filter" @click="reloadTable" data-cy="achievementsNavigator-filterBtn" icon="fa fa-filter" label="Filter" />
239-
<SkillsButton size="small" aria-label="Reset" @click="reset" class="ml-1" data-cy="achievementsNavigator-resetBtn" icon="fa fa-times" label="Reset" />
240-
</div>
237+
<div class="mt-3 mb-2">
238+
<SkillsButton aria-label="Filter" @click="reloadTable" data-cy="achievementsNavigator-filterBtn" icon="fa fa-filter" label="Filter" />
239+
<SkillsButton aria-label="Reset" @click="reset" class="ml-1" data-cy="achievementsNavigator-resetBtn" icon="fa fa-times" label="Reset" />
240+
</div>
241241
</div>
242+
242243
<SkillsDataTable
243244
data-cy="achievementsNavigator-table"
244245
aria-label="Achievements"

‎dashboard/src/components/utils/inputForm/SkillsCalendarInput.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const handleOnInput = (event) => {
7676
@keydown.enter="onEnter"
7777
@input="handleOnInput"
7878
:inputId="`input${name}`"
79+
inputClass="w-full"
7980
:id="name"
8081
:data-cy="$attrs['data-cy'] || name" />
8182
<Message v-if="errorMessage"

‎dashboard/src/components/utils/inputForm/SkillsDropDown.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ watch(value, (newValue) => {
8181
</script>
8282

8383
<template>
84-
<div class="flex flex-col gap-2" v-bind="fallthroughAttributes.rootAttrs.value">
85-
<div class="flex gap-2 items-center h-[2rem]">
84+
<div class="flex flex-col gap-1" v-bind="fallthroughAttributes.rootAttrs.value">
85+
<div class="flex gap-2 items-center" :class="{'h-[2rem]' : showClearButton }">
8686
<div class="flex-1"><label v-if="label" :for="`${name}Select`"><span v-if="isRequired">*</span> {{ label }}:</label></div>
8787
<div v-if="showClearButton && value">
8888
<Button link label="Clear" @click="value = null" size="small" class="underline" :data-cy="`${$attrs['data-cy'] || name}_clearBtn`"/>

0 commit comments

Comments
 (0)