Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

💄 Fix conflicts regarding the generated CSS class names

Browse Source
This commit is contained in:
Adrien
2024-03-21 18:32:40 +01:00
parent ceeda1a771
commit 570a969cee
15 changed files with 73 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Cargo.toml
View File

@@ -38,3 +38,6 @@ target = "x86_64-unknown-linux-gnu"
[build-dependencies]
regex = "1.10.3"
[package.metadata.turf.class_names]
template = "<original_name>--<id>"

13
src/_base.scss
View File

@@ -69,16 +69,14 @@ $border-radius: 16px;
$geist-font-path: "../fonts/Geist";
$transition-duration: 300ms;
@font-face {
src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
font-family: "Geist";
font-weight: bold;
}
* {
font-family: "Geist";
}
body {
height: 100vh;
width: 100vw;
@@ -90,8 +88,15 @@ body {
#main {
height: 100%;
width: 100%;
font-family: "Geist";
}
::selection {
background-color: transparent;
}
// TODO: To remove once the design updated.
.aeroButton {
height: 50%;

4
src/components/avatar_selector.rs
View File

@@ -7,7 +7,7 @@ pub fn AvatarSelector(cx: Scope) -> Element {
style { STYLE_SHEET },
div {
class: ClassName::SELECTOR,
class: ClassName::AVATAR_SELECTOR,
svg {
view_box: "0 0 100 100",
linearGradient {
@@ -46,7 +46,7 @@ pub fn AvatarSelector(cx: Scope) -> Element {
},
},
img {
class: ClassName::PICTURE,
class: ClassName::AVATAR_SELECTOR_PICTURE,
src: "./images/default-avatar.png",
},
},

4
src/components/avatar_selector.scss
View File

@@ -1,9 +1,9 @@
.selector {
.avatar-selector {
position: relative;
height: 100%;
aspect-ratio: 1;
.picture {
&__picture {
$height: 65%;
$margin: calc(100% - $height) / 2;

4
src/components/button.rs
View File

@@ -80,7 +80,7 @@ pub fn RegisterButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
Button {
id: cx.props.id.unwrap_or(""),
style: ClassName::REGISTER,
style: ClassName::REGISTER_BUTTON,
onclick: |event| {
if let Some(cb) = &cx.props.onclick {
@@ -126,7 +126,7 @@ pub fn LoginButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
Button {
id: cx.props.id.unwrap_or(""),
style: ClassName::LOGIN,
style: ClassName::LOGIN_BUTTON,
onclick: |event| {
if let Some(cb) = &cx.props.onclick {

38
src/components/button.scss
View File

@@ -1,6 +1,6 @@
@import "../_base.scss"
.root {
%button {
height: 100%;
aspect-ratio: 3.5;
@@ -18,27 +18,31 @@
}
}
.register {
@extend .root;
.register-button {
@extend %button;
background-color: $color-ternary-90;
}
.register:hover {
background-color: $color-ternary-80;
}
.register:active {
background-color: $color-ternary-70;
&:hover {
background-color: $color-ternary-80;
}
&:active {
background-color: $color-ternary-70;
}
}
.login {
@extend .root;
.login-button {
@extend %button;
background-color: $color-secondary-90;
}
.login:hover {
background-color: $color-secondary-80;
}
.login:active {
background-color: $color-secondary-70;
&:hover {
background-color: $color-secondary-80;
}
&:active {
background-color: $color-secondary-70;
}
}

4
src/components/loading.rs
View File

@@ -14,12 +14,12 @@ pub fn LoadingPage(cx: Scope) -> Element {
style { STYLE_SHEET },
div {
class: ClassName::ROOT,
class: ClassName::LOADING,
Wallpaper {},
div {
class: ClassName::SPINNER,
class: ClassName::LOADING_SPINNER,
Spinner {},
}
}

5
src/components/loading.scss
View File

@@ -1,7 +1,7 @@
@import "../_base.scss"
@import "./spinner.scss"
.root {
.loading {
height: 100%;
width: 100%;
@@ -9,7 +9,7 @@
align-items: center;
justify-content: center;
.spinner {
&__spinner {
height: 5%;
aspect-ratio: $logo-aspect-ratio;
@@ -77,5 +77,4 @@
background-color: $greyscale-0;
}
}

18
src/components/login.rs
View File

@@ -375,14 +375,14 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
let avatar = match random_avatar_future.value() {
Some(Some(svg)) => {
rsx!(div {
class: ClassName::CONTENT,
class: ClassName::LOGIN_FORM_PHOTO_CONTENT,
dangerous_inner_html: svg.as_str(),
})
}
Some(None) | None => {
warn!("No profile image set or generated, display the placeholder");
rsx!(div {
class: ClassName::CONTENT,
class: ClassName::LOGIN_FORM_PHOTO_CONTENT,
img {
src: "./images/login-profile-placeholder.svg"
}
@@ -468,13 +468,13 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
Wallpaper {},
div {
class: ClassName::ROOT,
class: ClassName::LOGIN,
div {
class: "{form_classes_str}",
div {
class: ClassName::PHOTO,
class: ClassName::LOGIN_FORM_PHOTO,
onclick: move |_| {
random_avatar_future.restart()
@@ -484,7 +484,7 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
},
div {
class: ClassName::HOMESERVER,
class: ClassName::LOGIN_FORM_HOMESERVER,
TextInput {
id: "hs_url",
r#type: "text",
@@ -497,7 +497,7 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
},
div {
class: ClassName::ID,
class: ClassName::LOGIN_FORM_ID,
TextInput {
r#type: "text",
placeholder: "{id_placeholder}",
@@ -533,21 +533,21 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
},
div {
class: ClassName::SPINNER,
class: ClassName::LOGIN_FORM_SPINNER,
Spinner {
animate: **spinner_animated,
},
},
div {
class: ClassName::REGISTER,
class: ClassName::LOGIN_FORM_REGISTER_BUTTON,
RegisterButton {
onclick: on_register,
},
},
div {
class: ClassName::LOGIN,
class: ClassName::LOGIN_FORM_LOGIN_BUTTON,
LoginButton {
focus: true,
onclick: on_login,

26
src/components/login.scss
View File

@@ -1,7 +1,7 @@
@import "../_base.scss"
@import "./spinner.scss"
.root {
.login {
height: 100%;
width: 100%;
@@ -12,7 +12,9 @@
position: relative;
top: -100vh;
.form {
margin-bottom: -100vh;
&__form {
$height: 95%;
height: $height;
@@ -64,13 +66,13 @@
". . . . . . . . . . ."
;
transition: 300ms;
transition: $transition-duration;
&.register {
grid-template-rows: $padding-row $profile-img-height auto 5% 5% 5% 5% 5% 5% 5% 5% $spinner-height 5% $button-height $padding-row;
}
.photo {
&__photo {
grid-area: photo;
display: flex;
@@ -82,25 +84,25 @@
overflow: hidden;
.content {
&__content {
height: calc(100% + (2 * $border-big-width));
aspect-ratio: 1;
}
}
.homeserver {
&__homeserver {
grid-area: homeserver;
}
.id {
&__id {
grid-area: id;
}
.password {
&__password {
grid-area: password;
}
.confirm-password {
&__confirm-password {
grid-area: confirm;
display: none;
@@ -109,7 +111,7 @@
}
}
.spinner {
&__spinner {
grid-area: spinner;
}
@@ -117,11 +119,11 @@
width: 100%;
}
.register {
&__register-button {
grid-area: register;
}
.login {
&__login-button {
grid-area: login;
}
}

2
src/components/spinner.rs
View File

@@ -34,7 +34,7 @@ pub fn Spinner(cx: Scope<SpinnerProps>) -> Element {
style { STYLE_SHEET },
div {
class: ClassName::ROOT,
class: ClassName::SPINNER,
Icon {
class: if cx.props.animate { "" } else { ClassName::PAUSED },

2
src/components/spinner.scss
View File

@@ -6,7 +6,7 @@ $logo-height: calc(32px * 2);
$logo-width: calc(64px * 2);
$logo-aspect-ratio: calc($logo-width / $logo-height);
.root {
.spinner {
height: 100%;
width: 100%;

2
src/components/text_input.rs
View File

@@ -57,7 +57,7 @@ pub fn TextInput<'a>(cx: Scope<'a, TextInputProps<'a>>) -> Element<'a> {
style { STYLE_SHEET },
div {
class: ClassName::ROOT,
class: ClassName::TEXT_INPUT,
input {
class: level_class,

4
src/components/wallpaper.rs
View File

@@ -7,10 +7,10 @@ pub fn Wallpaper(cx: Scope) -> Element {
cx.render(rsx! {
style { STYLE_SHEET },
div {
class: ClassName::ROOT,
class: ClassName::WALLPAPER,
div {
class: ClassName::CONTENT,
class: ClassName::WALLPAPER_CONTENT,
}
}
})

4
src/components/wallpaper.scss
View File

@@ -1,6 +1,6 @@
@import "../_base.scss"
.root {
.wallpaper {
height: 100%;
width: 100%;
z-index: -1;
@@ -11,7 +11,7 @@
overflow: hidden;
.content {
&__content {
background-image: url("./images/wallpaper-pattern.svg");
background-position: center;