Merge branch 'fix/login-invalid-width-on-mobile' into develop

src/main.rs

@@ -20,6 +20,7 @@ use crate::base::{login, sync_rooms};
 use crate::base::{APP_SETTINGS, ROOMS, SESSION};
 use crate::ui::components::login::Login;
 use crate::ui::components::main_window::MainWindow;
+use crate::ui::views::login_view::LoginView;
 
 mod base;
 
@@ -92,7 +93,7 @@ fn app() -> Element {
         }
     } else {
         rsx! {
-            Login {},
+            LoginView {},
         }
     }
 }

src/ui/_base.scss

@@ -167,7 +167,6 @@ $colors: (
 @function get-color($color-name, $color-level) {
     $color: map.get($colors, $color-name);
     @return map.get($color, $color-level);
-
 }
 
 $border-default-color: get-color(greyscale, 90);
@@ -176,9 +175,6 @@ $border-big: solid $border-big-width $border-default-color;
 $border-normal-width: 2px;
 $border-normal: solid $border-normal-width $border-default-color;
 
-$form-max-height: 1024px;
-$form-aspect-ratio: 1/1.618;
-
 // TODO: Radius should be a percentage(eg: 1024/16px).
 $border-radius: 16px;
 

src/ui/components/_panel.scss

@@ -0,0 +1,19 @@
+@import "../base.scss";
+
+$panel-aspect-ratio: 1/1.618;
+$panel-padding-v: 5%;
+$panel-padding-h: 5%;
+
+%panel {
+    padding: $panel-padding-v $panel-padding-h;
+
+    height: calc(100% - $panel-padding-v - (2 * $border-big-width));
+    width: calc(100% - $panel-padding-h - (2 * $border-big-width));
+    flex-shrink: 0;
+
+    border: $border-big;
+    border-color: get-color(primary, 90);
+    border-radius: $border-radius;
+
+    background-color: get-color(greyscale, 0);
+}

src/ui/components/loading.rs

@@ -15,7 +15,9 @@ pub fn LoadingPage() -> Element {
         div {
             class: ClassName::LOADING,
 
-            Wallpaper {},
+            Wallpaper {
+                display_version: true
+            },
 
             div {
                 class: ClassName::LOADING_SPINNER,

src/ui/components/login.rs

@@ -20,8 +20,6 @@ use super::modal::{Modal, Severity};
 use super::spinner::Spinner;
 use super::text_input::{PasswordInputState, PasswordTextInput, TextInput, TextInputState};
 
-use super::wallpaper::Wallpaper;
-
 include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
 
 use style::{
@@ -613,7 +611,7 @@ pub fn Login() -> Element {
     let avatar = match &*random_avatar_future.read_unchecked() {
         Some(svg) => Some(rsx! {
             div {
-                class: ClassName::LOGIN_FORM_PHOTO_CONTENT,
+                class: ClassName::LOGIN_AVATAR_CONTENT,
                 dangerous_inner_html: svg.as_str(),
             }
         }),
@@ -639,7 +637,6 @@ pub fn Login() -> Element {
         to_owned![handlers];
 
         move |_| {
-
             handlers.reset_handlers();
 
             if *current_process.read() == Process::Registration {
@@ -713,13 +710,13 @@ pub fn Login() -> Element {
         }
     };
 
-    let mut form_classes: [&str; 2] = [ClassName::LOGIN_FORM, ""];
+    let mut classes: [&str; 2] = [ClassName::LOGIN, ""];
-    let mut password_classes: [&str; 2] = [ClassName::LOGIN_FORM_PASSWORD, ""];
+    let mut password_classes: [&str; 2] = [ClassName::LOGIN_PASSWORD, ""];
-    let mut confirm_password_classes: [&str; 2] = [ClassName::LOGIN_FORM_CONFIRM_PASSWORD, ""];
+    let mut confirm_password_classes: [&str; 2] = [ClassName::LOGIN_CONFIRM_PASSWORD, ""];
 
     match *current_process.read() {
         Process::Registration => {
-            form_classes[1] = ClassName::REGISTER;
+            classes[1] = ClassName::REGISTER;
             password_classes[1] = ClassName::SHOW;
             confirm_password_classes[1] = ClassName::SHOW;
 
@@ -743,23 +740,18 @@ pub fn Login() -> Element {
         .as_ref()
         .map(|modal_config| rsx!({ generate_modal(modal_config, on_modal_confirm) }));
 
-    let form_classes_str = form_classes.join(" ");
+    let classes_str = classes.join(" ");
     let password_classes_str = password_classes.join(" ");
     let confirm_password_classes_str = confirm_password_classes.join(" ");
 
     rsx! {
         style { {STYLE_SHEET} },
 
-        Wallpaper {},
+        div {
+            class: "{classes_str}",
 
             div {
-            class: ClassName::LOGIN,
+                class: ClassName::LOGIN_AVATAR,
-
-            div {
-                class: "{form_classes_str}",
-
-                div {
-                    class: ClassName::LOGIN_FORM_PHOTO,
 
                 onclick: move |_| {
                     random_avatar_future.restart()
@@ -769,7 +761,7 @@ pub fn Login() -> Element {
             },
 
             div {
-                    class: ClassName::LOGIN_FORM_HOMESERVER,
+                class: ClassName::LOGIN_HOMESERVER,
                 TextInput {
                     placeholder: "Homeserver URL",
                     value: "{homeserver_url}",
@@ -779,7 +771,7 @@ pub fn Login() -> Element {
             },
 
             div {
-                    class: ClassName::LOGIN_FORM_ID,
+                class: ClassName::LOGIN_ID,
                 TextInput {
                     placeholder: "{id_placeholder}",
                     value: "{id}",
@@ -810,28 +802,27 @@ pub fn Login() -> Element {
             },
 
             div {
-                    class: ClassName::LOGIN_FORM_SPINNER,
+                class: ClassName::LOGIN_SPINNER,
                 Spinner {
                     animate: *spinner_animated.read(),
                 },
             },
 
             div {
-                    class: ClassName::LOGIN_FORM_REGISTER_BUTTON,
+                class: ClassName::LOGIN_REGISTER_BUTTON,
                 RegisterButton {
                     onclick: on_clicked_register,
                 },
             },
 
             div {
-                    class: ClassName::LOGIN_FORM_LOGIN_BUTTON,
+                class: ClassName::LOGIN_LOGIN_BUTTON,
                 LoginButton {
                     focus: true,
                     onclick: on_clicked_login,
                 },
             },
         },
-        },
 
         {rendered_modal},
     }

src/ui/components/login.scss

@@ -1,25 +1,11 @@
-@import "../_base.scss"
+@import "../_base.scss";
-@import "./spinner.scss"
+@import "./_panel.scss";
+@import "./spinner.scss";
 
 .login {
-    height: 100%;
+    @extend %panel;
-    width: 100%;
 
-    display: flex;
+    $aspect-ratio: var(--aspect-ratio);
-    align-items: center;
-    justify-content: center;
-
-    position: relative;
-    top: -100vh;
-
-    margin-bottom: -100vh;
-
-    &__form {
-        $height: 95%;
-        height: $height;
-
-        max-height: $form-max-height;
-        aspect-ratio: $form-aspect-ratio;
 
     border: $border-big;
     border-color: get-color(primary, 90);
@@ -29,51 +15,52 @@
 
     display: grid;
 
-        $padding-col: 5%;
     $button-height: 8%;
     $button-overlap: 5%;
     $profile-img-width: 40%;
     $edit-padding: 7.5%;
-        $photo-padding: 17.5%;
+    $avatar-padding: 17.5%;
 
-        $padding-row: calc(5% * $form-aspect-ratio);
     $spinner-col-width: calc(0% + ($button-overlap * 2));
-        $profile-img-height: calc($profile-img-width * $form-aspect-ratio);
-        $profile-img-ext-width: calc((($profile-img-width - $spinner-col-width) / 2) - $button-overlap);
-        $center-width: calc((50% - $padding-col - $edit-padding - $photo-padding - $button-overlap -
-                             $profile-img-ext-width) * 2);
-        $spinner-height: calc(($spinner-col-width + $center-width) * $form-aspect-ratio / $logo-aspect-ratio);
 
-        grid-template-columns: $padding-col $edit-padding $photo-padding
+    $profile-img-height: calc($profile-img-width * $aspect-ratio);
+    $profile-img-ext-width: calc((($profile-img-width - $spinner-col-width) / 2) - $button-overlap);
+
+    $center-width: calc((50% - $edit-padding - $avatar-padding - $button-overlap - $profile-img-ext-width) * 2);
+
+    $spinner-height: calc(($spinner-col-width + $center-width) * $aspect-ratio / $logo-aspect-ratio);
+
+    grid-template-columns: $edit-padding $avatar-padding
                            $button-overlap $profile-img-ext-width $center-width $profile-img-ext-width $button-overlap
-                               $photo-padding $edit-padding $padding-col;
+                           $avatar-padding $edit-padding;
-        grid-template-rows: $padding-row $profile-img-height auto 5% 5% 5% 5% 5% 0% 0% 8.5% $spinner-height 8.5% $button-height $padding-row;
+    grid-template-rows: $profile-img-height auto 5% 5% 5% 5% 5% 0% 0% 12.5% $spinner-height 12.5% $button-height;
     grid-template-areas:
-            ". . . . . . . . . . ."
+        ". . . avatar avatar avatar . . ."
-            ". . . photo photo photo photo photo . . ."
+        ". . . . . . . . ."
-            ". . . . . . . . . . ."
+        ". homeserver homeserver homeserver homeserver homeserver homeserver homeserver ."
-            ". . homeserver homeserver homeserver homeserver homeserver homeserver homeserver . ."
+        ". . . . . . . . ."
-            ". . . . . . . . . . ."
+        ". id id id id id id id ."
-            ". . id id id id id id id . ."
+        ". . . . . . . . ."
-            ". . . . . . . . . . ."
+        ". password password password password password password password  ."
-            ". . password password password password password password password  . ."
+        ". . . . . . . . ."
-            ". . . . . . . . . . ."
+        ". confirm confirm confirm confirm confirm confirm confirm  ."
-            ". . confirm confirm confirm confirm confirm confirm confirm  . ."
+        ". . . . . . . . ."
-            ". . . . . . . . . . ."
+        ". . . spinner spinner spinner . . ."
-            ". . . . spinner spinner spinner . . . ."
+        ". . . . . . . . ."
-            ". . . . . . . . . . ."
+        "register register register register . login login login login"
-            ". register register register register . login login login login ."
-            ". . . . . . . . . . ."
     ;
 
     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;
+        grid-template-rows: $profile-img-height auto 5% 5% 5% 5% 5% 5% 5% 5% $spinner-height 5% $button-height;
     }
 
-        &__photo {
+    &__avatar {
-            grid-area: photo;
+        grid-area: avatar;
+
+        height: 100%;
+        width: 100%;
 
         display: flex;
         align-items: center;
@@ -90,26 +77,30 @@
         }
     }
 
-        input {
-            font-family: inherit;
-        }
-
     &__homeserver {
         grid-area: homeserver;
+
+        height: 100%;
     }
 
     &__id {
         grid-area: id;
+
+        height: 100%;
     }
 
     &__password {
         grid-area: password;
+
+        height: 100%;
     }
 
     &__confirm-password {
         grid-area: confirm;
         display: none;
 
+        height: 100%;
+
         &.show {
             display: initial;
         }
@@ -118,6 +109,9 @@
     &__spinner {
         grid-area: spinner;
 
+        height: 100%;
+        width: 100%;
+
         svg {
             width: 100%;
             height: 100%;
@@ -125,15 +119,19 @@
     }
 
     button {
+        height: 100%;
         width: 100%;
     }
 
     &__register-button {
         grid-area: register;
+
+        height: 100%;
     }
 
     &__login-button {
         grid-area: login;
-        }
+
+        height: 100%;
     }
 }

src/ui/components/wallpaper.rs

@@ -5,7 +5,10 @@ const GIT_VERSION: &str = git_version!();
 
 turf::style_sheet!("src/ui/components/wallpaper.scss");
 
-pub fn Wallpaper() -> Element {
+#[component]
+pub fn Wallpaper(display_version: Option<bool>) -> Element {
+    let version = display_version.map(|flag| if flag { Some(GIT_VERSION) } else { None });
+
     rsx! {
         style { {STYLE_SHEET} },
         div {
@@ -17,7 +20,7 @@ pub fn Wallpaper() -> Element {
 
             div {
                 class: ClassName::WALLPAPER_VERSION,
-                {GIT_VERSION},
+                {version},
             }
         }
     }

src/ui/components/wallpaper.scss

@@ -22,7 +22,7 @@
     &__version {
         position: absolute;
 
-        top: 97vh;
+        top: 97.5vh;
 
         font-size: 1.5vh;
         color: get-color(greyscale, 80);

src/ui/mod.rs

@@ -1 +1,2 @@
 pub(crate) mod components;
+pub(crate) mod views;

src/ui/views/login_view.rs

@@ -0,0 +1,25 @@
+use dioxus::prelude::*;
+
+use crate::ui::components::login::Login;
+use crate::ui::components::wallpaper::Wallpaper;
+
+turf::style_sheet!("src/ui/views/login_view.scss");
+
+pub fn LoginView() -> Element {
+    rsx! {
+        style { {STYLE_SHEET} },
+
+        Wallpaper {
+            display_version: true
+        }
+
+        div {
+            class: ClassName::LOGIN_VIEW,
+
+            div {
+                class: ClassName::LOGIN_VIEW_LOGIN_PANEL,
+                Login {}
+            }
+        }
+    }
+}

src/ui/views/login_view.scss

@@ -0,0 +1,41 @@
+@import "../_base.scss";
+@import "../components/_panel.scss";
+
+.login-view {
+    $panel-max-height: 1024px;
+
+    height: 100%;
+    width: 100%;
+
+    position: relative;
+    top: -100vh;
+
+    margin-bottom: -100vh;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: safe center;
+    align-items: safe center;
+
+    &__login-panel {
+        @media (max-aspect-ratio: $panel-aspect-ratio) {
+            width: 95%;
+        }
+        @media (min-aspect-ratio: $panel-aspect-ratio) {
+            height: 100%;
+        }
+
+        aspect-ratio: $panel-aspect-ratio;
+        max-height: $panel-max-height;
+
+        flex-shrink: 0;
+        scroll-snap-align: center;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        // Variables inherited by children
+        --aspect-ratio: #{$panel-aspect-ratio};
+    }
+}

src/ui/views/mod.rs

@@ -0,0 +1 @@
+pub(crate) mod login_view;