From e33f60ded79cc3ec89db0188ac160080658f42ea Mon Sep 17 00:00:00 2001
From: Ahmad Farhat <ahmad.af.farhat@gmail.com>
Date: Wed, 1 Mar 2023 15:08:22 -0500
Subject: [PATCH] Fix vertical center (#4906)
* Fix vertical center
* logged in fixes
---
app/assets/stylesheets/helpers.scss | 32 ++++---------------
.../components/rooms/CantCreateRoom.jsx | 2 +-
.../rooms/room/join/RequireAuthentication.jsx | 2 +-
.../components/rooms/room/join/RoomJoin.jsx | 2 +-
.../rooms/room/join/RoomJoinPlaceholder.jsx | 2 +-
.../account_activation/VerifyAccount.jsx | 2 +-
.../users/authentication/SignIn.jsx | 2 +-
.../users/authentication/Signup.jsx | 2 +-
.../password_management/ForgetPassword.jsx | 2 +-
.../password_management/ResetPassword.jsx | 2 +-
.../registration/PendingRegistration.jsx | 2 +-
11 files changed, 17 insertions(+), 35 deletions(-)
diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/helpers.scss
index 5119c623..107604e6 100644
--- a/app/assets/stylesheets/helpers.scss
+++ b/app/assets/stylesheets/helpers.scss
@@ -26,40 +26,22 @@
}
.vertical-center {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- height: 75%;
-
- @include media-breakpoint-down(xxl) {
- height: 85%;
- }
+ min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ justify-content: center;
}
.no-header-height {
min-height: calc(100vh - $footer-height - $footer-buffer-height);
-
- .vertical-buffer {
- padding-top: 10%;
-
- @include media-breakpoint-down(xxl) {
- height: 5%;
- }
- }
}
.regular-height {
min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
- .vertical-buffer {
- padding-top: 5%;
-
- @include media-breakpoint-down(xxl) {
- height: 3%;
- }
+ .vertical-center {
+ min-height: calc(100vh - $header-height - $header-height - $footer-height - $footer-buffer-height);
}
}
diff --git a/app/javascript/components/rooms/CantCreateRoom.jsx b/app/javascript/components/rooms/CantCreateRoom.jsx
index ae91fc63..fc09a1d2 100644
--- a/app/javascript/components/rooms/CantCreateRoom.jsx
+++ b/app/javascript/components/rooms/CantCreateRoom.jsx
@@ -36,7 +36,7 @@ export default function CantCreateRoom() {
const parsedUrl = meetingUrl.match(regex);
return (
- <div className="vertical-buffer">
+ <div className="vertical-center">
<Card className="col-md-8 mx-auto border-0 card-shadow">
<div className="p-5 pb-4">
<h2><strong>{t('homepage.enter_meeting_url')}</strong></h2>
diff --git a/app/javascript/components/rooms/room/join/RequireAuthentication.jsx b/app/javascript/components/rooms/room/join/RequireAuthentication.jsx
index a1cd2b4a..dbcecb0f 100644
--- a/app/javascript/components/rooms/room/join/RequireAuthentication.jsx
+++ b/app/javascript/components/rooms/room/join/RequireAuthentication.jsx
@@ -32,7 +32,7 @@ export default function RequireAuthentication({ path }) {
<div className="text-center pb-4">
<Logo />
</div>
- <Card className="col-xl-4 col-lg-5 col-md-7 col-8 mx-auto p-0 border-0 card-shadow text-center">
+ <Card className="col-xl-6 col-lg-7 col-md-9 col-10 mx-auto p-0 border-0 card-shadow text-center">
<Card.Body className="pt-4 px-5">
<p className="mb-0">{ t('room.settings.require_signed_in_message') }</p>
</Card.Body>
diff --git a/app/javascript/components/rooms/room/join/RoomJoin.jsx b/app/javascript/components/rooms/room/join/RoomJoin.jsx
index 898d1e23..109e94c4 100644
--- a/app/javascript/components/rooms/room/join/RoomJoin.jsx
+++ b/app/javascript/components/rooms/room/join/RoomJoin.jsx
@@ -162,7 +162,7 @@ export default function RoomJoin() {
);
return (
- <div className="vertical-buffer">
+ <div className="vertical-center">
<div className="text-center pb-4">
<Logo />
</div>
diff --git a/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx b/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx
index 3e3649a4..78461d91 100644
--- a/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx
+++ b/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx
@@ -28,7 +28,7 @@ export default function RoomJoinPlaceholder() {
const { t } = useTranslation();
return (
- <div className="vertical-buffer">
+ <div className="vertical-center">
<div className="text-center pb-4">
<Logo />
</div>
diff --git a/app/javascript/components/users/account_activation/VerifyAccount.jsx b/app/javascript/components/users/account_activation/VerifyAccount.jsx
index 9b5cb736..01d4ec3a 100644
--- a/app/javascript/components/users/account_activation/VerifyAccount.jsx
+++ b/app/javascript/components/users/account_activation/VerifyAccount.jsx
@@ -32,7 +32,7 @@ export default function VerifyAccount() {
const { t } = useTranslation();
return (
- <div className="vertical-buffer">
+ <div className="vertical-center">
<div className="text-center pb-4">
<Logo />
</div>
diff --git a/app/javascript/components/users/authentication/SignIn.jsx b/app/javascript/components/users/authentication/SignIn.jsx
index ac6ea3ee..3059feab 100644
--- a/app/javascript/components/users/authentication/SignIn.jsx
+++ b/app/javascript/components/users/authentication/SignIn.jsx
@@ -31,7 +31,7 @@ export default function SignIn() {
<div className="text-center pb-4">
<Logo />
</div>
- <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+ <Card className="col-xl-5 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
<Card.Title className="text-center pb-2"> { t('authentication.sign_in') } </Card.Title>
<SigninForm />
{ registrationMethod !== 'invite' && (
diff --git a/app/javascript/components/users/authentication/Signup.jsx b/app/javascript/components/users/authentication/Signup.jsx
index a379d2c2..90670b39 100644
--- a/app/javascript/components/users/authentication/Signup.jsx
+++ b/app/javascript/components/users/authentication/Signup.jsx
@@ -39,7 +39,7 @@ export default function Signup() {
<div className="text-center pb-4">
<Logo />
</div>
- <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+ <Card className="col-xl-5 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
<Card.Title className="text-center pb-2"> { t('authentication.create_an_account') } </Card.Title>
<SignupForm />
<span className="text-center text-muted small"> { t('authentication.already_have_account') }
diff --git a/app/javascript/components/users/password_management/ForgetPassword.jsx b/app/javascript/components/users/password_management/ForgetPassword.jsx
index e4a00582..e7a2f38e 100644
--- a/app/javascript/components/users/password_management/ForgetPassword.jsx
+++ b/app/javascript/components/users/password_management/ForgetPassword.jsx
@@ -29,7 +29,7 @@ export default function ForgetPassword() {
<div className="text-center pb-4">
<Logo />
</div>
- <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+ <Card className="col-xl-4 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
<Card.Title className="text-center pb-2"> { t('user.account.reset_password')} </Card.Title>
<ForgetPwdForm />
<span className="text-center text-muted small"> { t('or') }
diff --git a/app/javascript/components/users/password_management/ResetPassword.jsx b/app/javascript/components/users/password_management/ResetPassword.jsx
index 0c4362c9..b3ace1a9 100644
--- a/app/javascript/components/users/password_management/ResetPassword.jsx
+++ b/app/javascript/components/users/password_management/ResetPassword.jsx
@@ -36,7 +36,7 @@ export default function ResetPassword() {
<div className="text-center pb-4">
<Logo />
</div>
- <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+ <Card className="col-xl-5 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
<ResetPwdForm token={token} />
</Card>
</div>
diff --git a/app/javascript/components/users/registration/PendingRegistration.jsx b/app/javascript/components/users/registration/PendingRegistration.jsx
index e13328e7..14ca8f32 100644
--- a/app/javascript/components/users/registration/PendingRegistration.jsx
+++ b/app/javascript/components/users/registration/PendingRegistration.jsx
@@ -25,7 +25,7 @@ export default function PendingRegistration() {
const { t } = useTranslation();
return (
- <div className="vertical-buffer">
+ <div className="vertical-center">
<div className="text-center pb-4">
<Logo />
</div>
--
GitLab