client: use 100svh instead of 100vh

BIT-GDSC · Dec 3, 2023 · c7ad773 · c7ad773
1 parent 3e71282
commit c7ad773
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 21 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -202,7 +202,7 @@ a {
 
 /* Mobile Menu */
 .mobile-menu-container {
- height: 100vh;
+ height: 100svh;
  width: 100%;
  top: 0;
  position: fixed;
@@ -254,7 +254,8 @@ a {
 }
 
 .mobile-menu-close-btn {
- margin: 1rem 0;
+ margin-top: .5rem;
+ /* margin: 1rem 0; */
  padding: .5rem 0;
  width: 100%;
  color: #ff0000;

diff --git a/client/src/components/Loader.jsx b/client/src/components/Loader.jsx
@@ -1,14 +1,9 @@
 import React from 'react'
-import useWindowHeight from '../utils/useWindowHeight'
 
 const Loader = () => {
- const { height, isReady } = useWindowHeight();
-
  return (
  <div style={{
- height: `${height}px`,
- opacity: isReady ? 1 : 0,
- transition: 'opacity 0.5s linear'
+ height: '100svh'
  }}>
  <div className='h-full flex items-center justify-center'>
  Loading...

diff --git a/client/src/pages/Auth.jsx b/client/src/pages/Auth.jsx
@@ -6,13 +6,11 @@ import {
  useLoginStore,
  useForgotStore
 } from '../store/useAuthStore'
-import useWindowHeight from '../utils/useWindowHeight'
 import { toast } from 'sonner'
 import useSocialAuth from '../utils/useSocialAuth'
 
 // Auth page component
 const Auth = () => {
- const { isReady } = useWindowHeight()
  const { authType, setAuthType } = useAuthStore()
 
  useSocialAuth();
@@ -21,9 +19,7 @@ const Auth = () => {
  <div
  style={{
  overflow: 'auto',
- minHeight: '100vh',
- opacity: isReady ? 1 : 0,
- transition: 'opacity 0.5s linear'
+ minHeight: '100svh'
  }}
  className='flex items-center justify-center'
  >

diff --git a/client/src/pages/Certificate/VerifyCertificate.jsx b/client/src/pages/Certificate/VerifyCertificate.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import useWindowHeight from '../../utils/useWindowHeight'
 import { useCertStore } from '../../store/useCertStore'
 import Skeleton from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
@@ -10,7 +9,6 @@ import GoogleCloudFacilitator from './Template/GoogleCloudFacilitator'
 // Main Component
 const VerifyCertificate = () => {
  const { certificateID } = useParams()
- const { height, isReady } = useWindowHeight()
 
  const { certLoading, certData, fetchCertData } = useCertStore()
 
@@ -20,13 +18,10 @@ const VerifyCertificate = () => {
 
  return (
  <div
- className='overflow-hidden md:overflow-auto pb-8'
- style={{
- opacity: isReady ? 1 : 0,
- transition: 'opacity 0.5s linear'
- }}
+ className='flex items-center justify-center overflow-hidden md:overflow-auto'
+ style={{ minHeight: '100svh' }}
  >
- <div className='h-full pt-[120px] flex flex-col gap-5 items-center justify-center'>
+ <div className='h-full md:pt-[100px] flex flex-col gap-5 items-center justify-center'>
  {certLoading ? (
  // Fetching Certificate
  <>