From 6371c778d2359ae290b25c3676e0c557b14b4353 Mon Sep 17 00:00:00 2001
From: marcantoinem <marc-antoine.m@outlook.com>
Date: Wed, 24 Jul 2024 21:48:19 -0400
Subject: [PATCH] Start implementing tailwind
---
aep-schedule-website/Cargo.toml | 4 +-
.../src/frontend/components/options/form.rs | 9 +---
.../src/frontend/components/options/state.rs | 2 +-
.../src/frontend/components/options/todo.rs | 50 ++++++++++++++++---
aep-schedule-website/style/main.scss | 35 ++++++++-----
aep-schedule-website/style/tailwind.css | 3 ++
aep-schedule-website/tailwind.config.js | 8 +++
7 files changed, 84 insertions(+), 27 deletions(-)
create mode 100644 aep-schedule-website/style/tailwind.css
create mode 100644 aep-schedule-website/tailwind.config.js
diff --git a/aep-schedule-website/Cargo.toml b/aep-schedule-website/Cargo.toml
index 1860037..51d57cc 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 b333f81..301894e 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 836bddd..cd6580b 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 9e49938..d623481 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 678018a..ceb4b3f 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 0000000..bd6213e
--- /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 0000000..f44b598
--- /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
--
GitLab