Skip to content

Commit

Permalink
Merge pull request #73 from ugahacks/feature/newlandingpage-jm
Browse files Browse the repository at this point in the history 
Dropped vertically centered div, but when content overflows, it shoul...
  • Loading branch information
@jtm13
jtm13 authored Sep 20, 2023
2 parents 825a6e4 + 4729d30 commit a2c10c5
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 36 deletions.
46 changes: 38 additions & 8 deletions projects/mybyte/components/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { useAuth } from "../context/AuthContext";
import { Events } from "../enums/events";
import { useLayoutEffect } from "react";

const Navbar = ({ children }: { children: React.ReactNode }) => {
const { user, logOut, currEvent, userInfo, user_type } = useAuth();
Expand Down Expand Up @@ -29,9 +30,31 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
}
};

const isElementXPercentInViewport = function(el: Element, percentVisible: number) {
let
rect = el.getBoundingClientRect(),
windowHeight = (window.innerHeight || document.documentElement.clientHeight);

return !(
Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100)) < percentVisible ||
Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
)
};

useLayoutEffect(() => {
let element = document.getElementById("acdweafadaefd");
if (element !== null && element !== undefined && isElementXPercentInViewport(element, 100)) {
let parent = element.parentElement;
if (parent !== null) {
parent.style.display = "grid";
parent.style.alignItems = "center";
}
}
});

return (
<div className="flex flex-col overflow-y-auto min-h-screen">
<header id="nav" className="flex flex-wrap container mx-auto max-w-full items-center p-6 justify-between bg-white shadow-md flex-initial">
<div className="overflow-y-auto h-screen">
<header id="nav" className="sticky top-0 z-10 flex flex-wrap container mx-auto max-w-full items-center p-6 justify-between bg-white shadow-md flex-initial">
<div className="flex items-center hover:text-blue-800 cursor-pointer transition duration-150 ">
{!user.uid ? (
<Link href="/">
Expand All @@ -52,18 +75,23 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
<ul className="text-lg inline-block">
<>
{!user.uid ? (
menuItems.map((item) => (
menuItems.map((item) => {
let cn = "text-black-800 hover:text-red-500 transition";
if (item.link.replace('/', '') === router.pathname.replace('/', '')) {
cn += " underline underline-offset-[5px]";
}
return (
<li
key={item.id}
className="my-3 md:my-0 items-center mr-4 md:inline-block block"
>
<Link href={item?.link}>
<span className="text-black-800 hover:text-red-900 transition">
<span className={cn}>
{item?.name}
</span>
</Link>
</li>
))
)})
) : (
<>
<li className="my-3 md:my-0 items-center mr-4 md:inline-block block ">
Expand Down Expand Up @@ -133,11 +161,13 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
</ul>
</nav>
</header>
<div className="flex flex-col items-center justify-center py-2 font-inter overflow-y-auto flex-auto basis-[50vh] smh:basis-[58vh] md:basis-[90vh]">
{children}
<div className="font-inter h-[calc(100%-168px)] md:h-[calc(100%-76px)]">
<div id="acdweafadaefd">
{children}
</div>
</div>
</div>
); // last div is to offset the navbar's position since it is fixed now
); // last div's height is to offset the navbar's position since it is sticky now
};

export default Navbar;
2 changes: 1 addition & 1 deletion projects/mybyte/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Home: NextPage = () => {
<p className="text-xl pt-4 font-bold text-left text-gray-500">
Join your fellow hackers. Let&apos;s build the future, together.
</p>
<Link href="/login" className="text-white bg-purple-600 rounded-full px-8 py-2 text-lg">
<Link href="/login" className="text-white bg-primary-600 rounded-full px-8 py-2 text-lg">
Log in
</Link>
</div>
Expand Down
18 changes: 9 additions & 9 deletions projects/mybyte/pages/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,19 @@ const LoginPage = () => {
};

return (
<div className="sign-up-form container mx-auto w-[90%] sm:w-96 flex-initial pt-20 smh:pt-10 md:pt-5">
<div className="sign-up-form container mx-auto w-[90%] sm:w-96">
<h2 className="px-12 text-center text-2xl font-semibold inter">
Log in to your account
</h2>

<div className="mt-8">
<div className="mt-4 grid space-y-4 px-4">
<button
className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-purple-50 active:bg-purple-100"
className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-primary-50 active:bg-primary-100"
onClick={onSubmitGoogle}
>
<div className="relative flex items-center space-x-2 justify-center">
<span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-purple-600 sm:text-base">
<span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary-500 sm:text-base">
Sign in with Google
</span>
<Image
Expand All @@ -102,7 +102,7 @@ const LoginPage = () => {
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex items-center justify-between">
<label htmlFor="" className="block mb-3 inter">
<label htmlFor="" className="block mb-3 inter font-bold">
Email
</label>
</div>
Expand All @@ -119,7 +119,7 @@ const LoginPage = () => {
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
Password
</label>
Expand All @@ -133,19 +133,19 @@ const LoginPage = () => {
className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
/>
{errors.password && (
<p className="text-red-400">{errors.password.message}</p>
<p className="text-red-500">{errors.password.message}</p>
)}
</div>

<div className="flex justify-center pt-8">
<button
type="submit"
className={`h-12 text-center w-full bg-purple-700 rounded-md hover:shadow-lg hover:bg-purple-800 active:bg-purple-950 text-lg transition`}
className={`h-12 text-center w-full hover:text-white bg-[#F8F8F8] rounded-md hover:shadow-lg hover:bg-primary-500 active:bg-primary-950 text-lg transition`}
>
<p className="capitalize text-white font-normal">Log in</p>
<p className="capitalize font-normal">Log in</p>
</button>
</div>
<div className="flex justify-between text-sm text-purple-400 mt-2">
<div className="flex justify-between text-sm text-primary-500 mt-2">
<Link href="/resetPassword">Forgot your password?</Link>
<Link href="/signup">Create account</Link>
</div>
Expand Down
36 changes: 18 additions & 18 deletions projects/mybyte/pages/signup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,18 @@ const SignupPage = () => {
};

return (
<div className="sign-up-form container mx-auto w-[90%] sm:w-96 flex-initial h-[50vh] smh:h-[58vh] md:h-[90vh]">
<div className="sign-up-form container mx-auto w-[90%] sm:w-96">
<h2 className="px-12 mt-8 text-center text-2xl font-semibold inter">
Sign up for an account
</h2>
<div className="mt-8">
<div className="mt-4 grid space-y-4 px-4">
<button
className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-purple-50 active:bg-purple-100"
className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-primary-50 active:bg-primary-100"
onClick={onSubmitGoogle}
>
<div className="relative flex items-center space-x-2 justify-center">
<span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-purple-600 sm:text-base">
<span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary-600 sm:text-base">
Sign in with Google
</span>
<Image
Expand Down Expand Up @@ -127,7 +127,7 @@ const SignupPage = () => {
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
Email
</label>
Expand All @@ -139,14 +139,14 @@ const SignupPage = () => {
className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
/>
{errors.email && (
<p className="text-red-400">{errors.email.message}</p>
<p className="text-red-500">{errors.email.message}</p>
)}
</div>
<div className="mt-8">
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
First Name
</label>
Expand All @@ -160,14 +160,14 @@ const SignupPage = () => {
className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
/>
{errors.first_name && (
<p className="text-red-400">{errors.first_name.message}</p>
<p className="text-red-500">{errors.first_name.message}</p>
)}
</div>
<div className="mt-8">
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
Last Name
</label>
Expand All @@ -181,14 +181,14 @@ const SignupPage = () => {
className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
/>
{errors.last_name && (
<p className="text-red-400">{errors.last_name.message}</p>
<p className="text-red-500">{errors.last_name.message}</p>
)}
</div>
<div className="mt-8">
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
School
</label>
Expand All @@ -207,14 +207,14 @@ const SignupPage = () => {
)}
</datalist>
{errors.last_name && (
<p className="text-red-400">{errors.last_name.message}</p>
<p className="text-red-500">{errors.last_name.message}</p>
)}
</div>
<div className="mt-8">
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
Password
</label>
Expand All @@ -226,14 +226,14 @@ const SignupPage = () => {
className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
/>
{errors.password && (
<p className="text-red-400">{errors.password.message}</p>
<p className="text-red-500">{errors.password.message}</p>
)}
</div>
<div className="mt-8">
<div className="flex items-center justify-between">
<label
htmlFor=""
className="block mb-3 inter"
className="block mb-3 inter font-bold"
>
Confirm Password
</label>
Expand All @@ -247,20 +247,20 @@ const SignupPage = () => {
className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
/>
{errors.password_confirm && (
<p className="text-red-400">
<p className="text-red-500">
{errors.password_confirm.message}
</p>
)}
</div>
<div className="flex justify-center pt-8">
<button
type="submit"
className={`h-12 text-center w-full bg-purple-700 rounded-md hover:shadow-lg hover:bg-purple-800 active:bg-purple-950 text-lg transition`}
className={`h-12 text-center hover:text-white w-full bg-[#F8F8F8] rounded-md hover:shadow-lg hover:bg-primary-500 active:bg-primary-950 text-lg transition`}
>
<p className="capitalize text-white font-normal">Sign up</p>
<p className="capitalize font-normal">Sign up</p>
</button>
</div>
<div className="flex justify-between text-sm text-purple-400 mt-2">
<div className="flex justify-between text-sm text-primary-500 mt-2">
<Link href="/login">Already have an account?</Link>
</div>
</form>
Expand Down
16 changes: 16 additions & 0 deletions projects/mybyte/tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
const colors = require('tailwindcss/colors');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
Expand All @@ -18,6 +19,21 @@ module.exports = {
fontFamily: {
'inter': ['Inter', 'sans-serif'],
},
colors: {
primary: {
50: "#FEEDEC",
100: "#FDDCD9",
200: "#FBBDB7",
300: "#F89990",
400: "#F67A6F",
500: "#F4574A",
600: "#F0210F",
700: "#B2190B",
800: "#781107",
900: "#3A0804",
950: "#1D0402",
},
},
},
},
plugins: [],
Expand Down

0 comments on commit a2c10c5

Please sign in to comment.