diff --git a/aep-schedule-website/Cargo.toml b/aep-schedule-website/Cargo.toml
index 186003719a9ab917be6284d44e3796fec38dac28..51d57cc29ea8f7f8a170e1ffa34fd4782cf4d986 100644
--- a/aep-schedule-website/Cargo.toml
+++ b/aep-schedule-website/Cargo.toml
@@ -69,7 +69,7 @@ ssr = [
# Defines a size-optimized profile for the WASM bundle in release mode
[profile.wasm-release]
inherits = "release"
-opt-level = 'z'
+opt-level = 3
lto = true
panic = "abort"
codegen-units = 4
@@ -138,3 +138,5 @@ lib-default-features = false
#
# Optional. Defaults to "release".
lib-profile-release = "wasm-release"
+
+tailwind-input-file = "style/tailwind.css"
diff --git a/aep-schedule-website/src/frontend/components/options/form.rs b/aep-schedule-website/src/frontend/components/options/form.rs
index b333f811ed9f6f92e5388f79039451e55a30a9dc..301894ee2e20d7156359499d24f97c494f5ba797 100644
--- a/aep-schedule-website/src/frontend/components/options/form.rs
+++ b/aep-schedule-website/src/frontend/components/options/form.rs
@@ -8,17 +8,12 @@ use aep_schedule_generator::algorithm::{generation::SchedulesOptions, schedule::
use leptos::*;
#[component]
-pub fn OptionsForms(
- action: Action<SchedulesOptions, Vec<Schedule>>,
-) -> impl IntoView {
+pub fn OptionsForms(action: Action<SchedulesOptions, Vec<Schedule>>) -> impl IntoView {
let state = OptionState::default();
- let submit = move || {
- action.dispatch((&state).into())
- };
+ let submit = move || action.dispatch((&state).into());
view! {
- <h1 class="title">"Options de générations"</h1>
<CoursesSelector state=state submit/>
<span class="spacer"></span>
<div class="row-container input-item auto-bottom"><p>"Nombre de conflits maximum"</p><NumberInput value=state.max_nb_conflicts max=127/></div>
diff --git a/aep-schedule-website/src/frontend/components/options/state.rs b/aep-schedule-website/src/frontend/components/options/state.rs
index 836bddd2e9b15ed5a6ce36748bac8ae8a5d156b5..cd6580b4925277527475666201b3148a9c30db9a 100644
--- a/aep-schedule-website/src/frontend/components/options/state.rs
+++ b/aep-schedule-website/src/frontend/components/options/state.rs
@@ -197,7 +197,7 @@ impl From<&OptionState> for SchedulesOptions {
max_nb_conflicts,
evaluation,
user_conflicts,
- max_size: 5,
+ max_size: 10,
}
}
}
diff --git a/aep-schedule-website/src/frontend/components/options/todo.rs b/aep-schedule-website/src/frontend/components/options/todo.rs
index 9e49938c8cfbe2891d3dc8d250925fb4aa2154c2..d623481cebf04b91176a6aa00372185839be61c3 100644
--- a/aep-schedule-website/src/frontend/components/options/todo.rs
+++ b/aep-schedule-website/src/frontend/components/options/todo.rs
@@ -3,17 +3,55 @@ use leptos::*;
#[component]
pub fn Step(n: u8, title: &'static str, description: &'static str) -> impl IntoView {
view! {
- <h2 class="small-margin">{n} - {title}</h2>
- <h5 class="small-margin">{description}</h5>
+ <div class="flex">
+ <div class="flex flex-col items-center mr-4">
+ <div>
+ <div class="flex items-center justify-center w-10 h-10 border rounded-full">
+ <svg class="w-4 text-gray-600" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+ <line fill="none" stroke-miterlimit="10" x1="12" y1="2" x2="12" y2="22"></line>
+ <polyline fill="none" stroke-miterlimit="10" points="19,15 12,22 5,15"></polyline>
+ </svg>
+ </div>
+ </div>
+ <div class="w-px h-full bg-gray-300"></div>
+ </div>
+ <div class="pt-1 pb-8">
+ <p class="mb-2 text-lg font-bold">{n}" - "{title}</p>
+ <p class="text-gray-700">
+ {description}
+ </p>
+ </div>
+ </div>
}
}
#[component]
pub fn Todo() -> impl IntoView {
view! {
- <Step n=1 title="Ajoutez vos cours" description="Utilisez la barre de recherche à gauche pour trouver et sélectionner vos cours. Une fois les cours sélectionnés, ils apparaîtront comme un onglet."/>
- <Step n=2 title="Forcer des heures libres (facultatif)" description="Sélectionnez une plage de temps à avoir absolument libre en pressant et relâchant sur votre horaire personnel."/>
- <Step n=3 title="Ouvrez des sections (facultatif)" description="Assurez d'avoir au moins une section d'ouverte pour la théorie et la pratique. En sélectionnant l'onglet du cours et en appuyant sur les sections."/>
- <Step n=4 title="Ajustez les paramètres (facultatif)" description="Bougez les curseurs en bas pour ajuster vos préférences. Vous pouvez choisir d'avoir plus de congés, de commencer en moyenne les cours plus tôt ou plus tard, ou de finir en moyenne plus tôt."/>
+ <div class="px-4 py-4 mx-auto">
+ <div class="grid gap-6 row-gap-10">
+ <div class="lg:py-6 lg:pr-16">
+ <Step n=1 title="Ajoutez vos cours" description="Utilisez la barre de recherche à gauche pour trouver et sélectionner vos cours. Une fois les cours sélectionnés, ils apparaîtront comme un onglet."/>
+ <Step n=2 title="Forcer des heures libres" description="Sélectionnez une plage de temps à avoir absolument libre en pressant et relâchant sur votre horaire personnel."/>
+ <Step n=3 title="Ouvrez des sections" description="Assurez d'avoir au moins une section d'ouverte pour la théorie et la pratique. En sélectionnant l'onglet du cours et en appuyant sur les sections."/>
+ <Step n=4 title="Ajustez les paramètres" description="Bougez les curseurs en bas pour ajuster vos préférences. Vous pouvez choisir d'avoir plus de congés, de commencer en moyenne les cours plus tôt ou plus tard, ou de finir en moyenne plus tôt."/>
+ <div class="flex">
+ <div class="flex flex-col items-center mr-4">
+ <div>
+ <div class="flex items-center justify-center w-10 h-10 border rounded-full">
+ <svg class="w-6 text-gray-600" stroke="currentColor" viewBox="0 0 24 24">
+ <polyline fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="6,12 10,16 18,8"></polyline>
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div class="pt-1">
+ <p class="mb-2 text-lg font-bold">"Générer un horaire"</p>
+ <p class="text-gray-700"></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
}
}
diff --git a/aep-schedule-website/style/main.scss b/aep-schedule-website/style/main.scss
index 678018a6e4790326745357326870caad6d9af2d6..ceb4b3fd412ca68fbb480748509783983d54e11d 100644
--- a/aep-schedule-website/style/main.scss
+++ b/aep-schedule-website/style/main.scss
@@ -17,11 +17,13 @@ nav {
top: -100%;
transition: 0.3s;
}
+
@media screen and (min-width: 1000px) {
flex-direction: row;
height: 3em;
left: 0;
}
+
width: 100%;
display: flex;
box-sizing: border-box;
@@ -36,26 +38,28 @@ nav {
z-index: 42;
}
-nav > a {
+nav>a {
display: block;
}
@keyframes slideInFromLeft {
0% {
- transform: translateX(-100%);
+ transform: translateX(-100%);
}
+
100% {
- transform: translateX(0);
+ transform: translateX(0);
}
}
@keyframes slideOutToLeft {
0% {
- transform: translateX(0);
+ transform: translateX(0);
}
+
100% {
- transform: translateX(-100%);
- display: none;
+ transform: translateX(-100%);
+ display: none;
}
}
@@ -64,9 +68,11 @@ main {
justify-content: flex-end;
min-height: calc(100vh - 3em);
background-color: $light-background;
+
@media screen and (max-width: 1000px) {
margin-top: 0;
}
+
@media screen and (min-width: 1000px) {
margin-top: 3em;
}
@@ -90,11 +96,13 @@ section {
width: 100%;
height: 100%;
}
+
@media screen and (min-width: 1000px) {
top: 3em;
height: calc(100vh - 3em);
width: 42%;
}
+
box-sizing: border-box;
z-index: 20;
position: fixed;
@@ -104,7 +112,7 @@ section {
flex-direction: column;
justify-items: center;
background-color: $background-color;
- padding: 0.2em 0.69em;
+ padding: 1em 1em;
gap: 0.2em;
animation: 0.5s ease-out 0s 1 slideInFromLeft;
}
@@ -113,6 +121,7 @@ section {
@media screen and (max-width: 1000px) {
width: 100%;
}
+
@media screen and (min-width: 1000px) {
width: 58%;
}
@@ -128,13 +137,15 @@ section {
#go-back {
position: fixed;
+
@media screen and (max-width: 1000px) {
top: 0.42em;
}
-
+
@media screen and (min-width: 1000px) {
display: none;
}
+
left: 0.42em;
width: 3em;
height: 3em;
@@ -149,7 +160,7 @@ section {
cursor: pointer;
}
-a:link {
+a:link {
text-decoration: none;
}
@@ -169,7 +180,7 @@ a:hover {
padding: 0em 1em;
}
-nav > a {
+nav>a {
color: black;
}
@@ -190,7 +201,7 @@ nav > a {
@media screen and (min-width: 1000px) {
display: none;
}
-
+
z-index: 100;
position: fixed;
top: 0.42em;
@@ -229,4 +240,4 @@ nav.active {
.classroom-page {
justify-content: space-between;
padding: 2em;
-}
+}
\ No newline at end of file
diff --git a/aep-schedule-website/style/tailwind.css b/aep-schedule-website/style/tailwind.css
new file mode 100644
index 0000000000000000000000000000000000000000..bd6213e1dfe6b0a79ce7d8b37d0d2dc70f0250bb
--- /dev/null
+++ b/aep-schedule-website/style/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/aep-schedule-website/tailwind.config.js b/aep-schedule-website/tailwind.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..f44b598bf6c7dbff67203c8c380b1553b057cf43
--- /dev/null
+++ b/aep-schedule-website/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["*.html", "./src/**/*.rs",],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
\ No newline at end of file