Skip to content
Snippets Groups Projects
Unverified Commit b82f3c20 authored by Ahmad Farhat's avatar Ahmad Farhat Committed by GitHub
Browse files

Fixed footer issues (#4509)

parent b3d08821
No related branches found
No related tags found
No related merge requests found
...@@ -8,12 +8,15 @@ ...@@ -8,12 +8,15 @@
box-shadow: 0 0 0 100vmax white; box-shadow: 0 0 0 100vmax white;
clip-path: inset(0 -100vmax); clip-path: inset(0 -100vmax);
} }
.vertical-center { .vertical-center {
position: relative; position: absolute;
top: 45%; top: 0;
-webkit-transform: translateY(-50%); bottom: 0;
-ms-transform: translateY(-50%); left: 0;
transform: translateY(-50%); right: 0;
margin: auto;
height: 70%;
} }
.vertical-buffer { .vertical-buffer {
...@@ -21,7 +24,7 @@ ...@@ -21,7 +24,7 @@
} }
.no-header-height { .no-header-height {
height: calc(100vh - $footer-height - $footer-buffer-height); min-height: calc(100vh - $footer-height - $footer-buffer-height);
} }
.regular-height { .regular-height {
......
...@@ -16,7 +16,7 @@ export default function RequireAuthentication({ path }) { ...@@ -16,7 +16,7 @@ export default function RequireAuthentication({ path }) {
<div className="text-center pb-4"> <div className="text-center pb-4">
<Logo size="medium" /> <Logo size="medium" />
</div> </div>
<Card className="col-md-6 mx-auto p-0 border-0 shadow-sm text-center"> <Card className="col-xl-4 col-lg-5 col-md-7 col-8 mx-auto p-0 border-0 shadow-sm text-center">
<Card.Body className="pt-4 px-5"> <Card.Body className="pt-4 px-5">
<p className="mb-0">{ t('room.settings.require_signed_in_message') }</p> <p className="mb-0">{ t('room.settings.require_signed_in_message') }</p>
</Card.Body> </Card.Body>
......
import React from 'react'; import React from 'react';
import Image from 'react-bootstrap/Image'; import Image from 'react-bootstrap/Image';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useNavigate } from 'react-router-dom';
import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting'; import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
export default function Logo({ size }) { export default function Logo({ size }) {
const { isLoading, data: brandingImage } = useSiteSetting('BrandingImage'); const { isLoading, data: brandingImage } = useSiteSetting('BrandingImage');
const navigate = useNavigate();
const sizeClass = `${size}-logo`; const sizeClass = `${size}-logo`;
if (isLoading) return null; if (isLoading) return null;
...@@ -13,8 +14,9 @@ export default function Logo({ size }) { ...@@ -13,8 +14,9 @@ export default function Logo({ size }) {
return ( return (
<Image <Image
src={brandingImage} src={brandingImage}
className={sizeClass} className={`cursor-pointer ${sizeClass}`}
alt="CompanyLogo" alt="CompanyLogo"
onClick={() => { navigate('/'); }}
/> />
); );
} }
......
...@@ -13,7 +13,7 @@ export default function SignIn() { ...@@ -13,7 +13,7 @@ export default function SignIn() {
<div className="text-center pb-4"> <div className="text-center pb-4">
<Logo size="medium" /> <Logo size="medium" />
</div> </div>
<Card className="col-md-4 mx-auto p-4 border-0 shadow-sm"> <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
<Card.Title className="text-center pb-2"> { t('authentication.sign_in') } </Card.Title> <Card.Title className="text-center pb-2"> { t('authentication.sign_in') } </Card.Title>
<SigninForm /> <SigninForm />
<span className="text-center text-muted small"> { t('authentication.dont_have_account') } <span className="text-center text-muted small"> { t('authentication.dont_have_account') }
......
...@@ -23,7 +23,7 @@ export default function Signup() { ...@@ -23,7 +23,7 @@ export default function Signup() {
<div className="text-center pb-4"> <div className="text-center pb-4">
<Logo size="medium" /> <Logo size="medium" />
</div> </div>
<Card className="col-md-4 mx-auto p-4 border-0 shadow-sm"> <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
<Card.Title className="text-center pb-2"> { t('authentication.create_an_account') } </Card.Title> <Card.Title className="text-center pb-2"> { t('authentication.create_an_account') } </Card.Title>
<SignupForm /> <SignupForm />
<span className="text-center text-muted small"> { t('authentication.already_have_account') } <span className="text-center text-muted small"> { t('authentication.already_have_account') }
......
...@@ -29,7 +29,7 @@ export default function SignupForm() { ...@@ -29,7 +29,7 @@ export default function SignupForm() {
<FormControl field={fields.password_confirmation} type="password" /> <FormControl field={fields.password_confirmation} type="password" />
<HCaptcha ref={captchaRef} /> <HCaptcha ref={captchaRef} />
<Stack className="mt-1" gap={1}> <Stack className="mt-1" gap={1}>
<Button variant="brand" className="w-100 mb- mt-1" type="submit" disabled={createUserAPI.isLoading}> <Button variant="brand" className="w-100 my-3 mt-1" type="submit" disabled={createUserAPI.isLoading}>
{ createUserAPI.isLoading && <Spinner className="me-2" /> } { createUserAPI.isLoading && <Spinner className="me-2" /> }
{ t('authentication.create_account') } { t('authentication.create_account') }
</Button> </Button>
......
...@@ -13,7 +13,7 @@ export default function ForgetPassword() { ...@@ -13,7 +13,7 @@ export default function ForgetPassword() {
<div className="text-center pb-4"> <div className="text-center pb-4">
<Logo size="medium" /> <Logo size="medium" />
</div> </div>
<Card className="col-md-4 mx-auto p-4 border-0 shadow-sm"> <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
<Card.Title className="text-center pb-2"> { t('user.account.reset_password')} </Card.Title> <Card.Title className="text-center pb-2"> { t('user.account.reset_password')} </Card.Title>
<ForgetPwdForm /> <ForgetPwdForm />
<span className="text-center text-muted small"> { t('or') } <span className="text-center text-muted small"> { t('or') }
......
...@@ -20,7 +20,7 @@ export default function ResetPassword() { ...@@ -20,7 +20,7 @@ export default function ResetPassword() {
<div className="text-center pb-4"> <div className="text-center pb-4">
<Logo size="medium" /> <Logo size="medium" />
</div> </div>
<Card className="col-md-4 mx-auto p-4 border-0 shadow-sm"> <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
<ResetPwdForm token={token} /> <ResetPwdForm token={token} />
</Card> </Card>
</div> </div>
......
...@@ -42,13 +42,13 @@ export default function SetAvatar({ user }) { ...@@ -42,13 +42,13 @@ export default function SetAvatar({ user }) {
}; };
return ( return (
<div id="profile-avatar" className="vertical-center d-block ms-auto me-auto"> <div id="profile-avatar" className="mt-5 d-block ms-auto me-auto">
<Stack direction="vertical" gap={2}> <Stack direction="vertical" gap={2}>
<div onClick={handleClick} className="cursor-pointer" aria-hidden="true"> <div onClick={handleClick} className="cursor-pointer position-relative" aria-hidden="true">
<Avatar avatar={user?.avatar} radius={150} /> <div className="avatar-icon-circle float-end position-absolute rounded-circle">
<div className="avatar-icon-circle position-absolute rounded-circle">
<FolderPlusIcon className="hi-s" /> <FolderPlusIcon className="hi-s" />
</div> </div>
<Avatar avatar={user?.avatar} radius={150} />
</div> </div>
<input <input
id="avatarUpload" id="avatarUpload"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment