From 002b7f67d2ace5d8b1fc1695e65dc2b6ed0f5396 Mon Sep 17 00:00:00 2001
From: marcantoinem <marc-antoine.m@outlook.com>
Date: Tue, 30 Jul 2024 19:48:35 -0400
Subject: [PATCH] fix: improve accessibility by shrinking automatically the tab
---
.../src/frontend/components/common/autocomplete.rs | 10 +++-------
.../src/frontend/components/common/tab.rs | 2 +-
.../frontend/components/options/courses_selector.rs | 10 +++++-----
.../src/frontend/components/options/optimizations.rs | 3 ++-
aep-schedule-website/style/options.scss | 5 -----
5 files changed, 11 insertions(+), 19 deletions(-)
diff --git a/aep-schedule-website/src/frontend/components/common/autocomplete.rs b/aep-schedule-website/src/frontend/components/common/autocomplete.rs
index 912025b..731eb50 100644
--- a/aep-schedule-website/src/frontend/components/common/autocomplete.rs
+++ b/aep-schedule-website/src/frontend/components/common/autocomplete.rs
@@ -27,15 +27,11 @@ fn get_suggestions(
.partition_point(|c| c.value[0..cmp::min(i, c.value.len())] < input_value[0..i]);
let top = sorted_possibilities
.partition_point(|c| c.value[0..cmp::min(i, c.value.len())] <= input_value[0..i]);
- if bottom < sorted_possibilities.len() && sorted_possibilities[bottom].value == input_value {
- is_hidden.set(false);
- suggestion_range.set(bottom..top);
- return;
- }
-
- is_hidden.set(true);
suggestion_range.set(bottom..top);
+ is_hidden.set(
+ !(bottom < sorted_possibilities.len() && sorted_possibilities[bottom].value == input_value),
+ );
}
#[component]
diff --git a/aep-schedule-website/src/frontend/components/common/tab.rs b/aep-schedule-website/src/frontend/components/common/tab.rs
index 9081812..e330d3b 100644
--- a/aep-schedule-website/src/frontend/components/common/tab.rs
+++ b/aep-schedule-website/src/frontend/components/common/tab.rs
@@ -3,7 +3,7 @@ use leptos::*;
#[component]
pub fn Tab(active_tab: ReadSignal<String>, tab_id: String, children: Children) -> impl IntoView {
view! {
- <div class="relative card tab tab-width" class=("hidden", {move || tab_id != active_tab.get()})>
+ <div class="relative card tab shrink w-full overflow-y-auto" class=("hidden", {move || tab_id != active_tab.get()})>
{children()}
</div>
}
diff --git a/aep-schedule-website/src/frontend/components/options/courses_selector.rs b/aep-schedule-website/src/frontend/components/options/courses_selector.rs
index 5e60c6c..63ef907 100644
--- a/aep-schedule-website/src/frontend/components/options/courses_selector.rs
+++ b/aep-schedule-website/src/frontend/components/options/courses_selector.rs
@@ -112,7 +112,7 @@ where
ReactiveCourseType::LabOnly { lab_open, lab_groups } => {
let groups = lab_groups;
view!{
- <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
+ <div class="flex gap-2 flex-col pb-2 overflow-y-auto">
<h3>"Laboratoire"</h3>
<GroupsSettings groups open=lab_open course_sigle=course_sigle.clone() group_type=GroupType::LabGroup submit/>
</div>
@@ -122,12 +122,12 @@ where
let theo_groups = theo_groups;
let lab_groups = lab_groups;
view!{
- <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
+ <div class="flex gap-2 flex-col pb-2 overflow-y-auto">
<h3>"Théorie"</h3>
<GroupsSettings groups=theo_groups open=theo_open course_sigle=course_sigle.clone() group_type=GroupType::TheoGroup submit/>
</div>
<div class="vertical-bar"></div>
- <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
+ <div class="flex gap-2 flex-col pb-2 overflow-y-auto">
<h3>"Laboratoire"</h3>
<GroupsSettings groups=lab_groups open=lab_open course_sigle=course_sigle.clone() group_type=GroupType::LabGroup submit/>
</div>
@@ -136,7 +136,7 @@ where
ReactiveCourseType::Linked { both_open, theo_groups, lab_groups } => {
let groups = theo_groups.merge(lab_groups);
view!{
- <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
+ <div class="flex gap-2 flex-col pb-2 overflow-y-auto">
<h3>"Théorie et laboratoire lié"</h3>
<GroupsSettings groups open=both_open course_sigle=course_sigle group_type=GroupType::LabGroup submit/>
</div>
@@ -165,7 +165,7 @@ where
>
<SearchCourse courses=courses.clone() action_courses set_active_tab/>
</Await>
- <div class="flex tab-width">
+ <div class="flex w-full">
<button class="tab-button chips" class=("tab-selected", move || active_tab.get() == "") id="personal" on:click={
move |_| set_active_tab.set("".to_string())
}>
diff --git a/aep-schedule-website/src/frontend/components/options/optimizations.rs b/aep-schedule-website/src/frontend/components/options/optimizations.rs
index 7bb0d8f..207e6df 100644
--- a/aep-schedule-website/src/frontend/components/options/optimizations.rs
+++ b/aep-schedule-website/src/frontend/components/options/optimizations.rs
@@ -52,7 +52,8 @@ where
<input type="range" min="0" max="4" class="lg:w-24 w-16 accent-amber-500" prop:value=state.finish_early on:input=move |ev| {
state.finish_early.set(event_target_value(&ev).parse::<u8>().unwrap());
submit();
- }/>
+ }
+ />
</div>
</div>
}
diff --git a/aep-schedule-website/style/options.scss b/aep-schedule-website/style/options.scss
index 84bc195..42abf52 100644
--- a/aep-schedule-website/style/options.scss
+++ b/aep-schedule-website/style/options.scss
@@ -102,11 +102,6 @@
transition-duration: 150ms;
}
-.tab-width {
- flex-wrap: wrap;
- width: 100%;
-}
-
.tab-selected {
background-color: $highlight-color;
color: $tern-text;
--
GitLab