Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dropped vertically centered div, but when content overflows, it shoul... #73

Merged
merged 5 commits into from
Sep 20, 2023
Merged

Dropped vertically centered div, but when content overflows, it shoul... #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e059108
Dropped vertically centered div, but when content overflows, it shoul…
jtm13 Sep 13, 2023
81dd1b6
Added the right colors. Should use primary instead of red or purple now.
jtm13 Sep 13, 2023
6380f71
Modified the navbar component so it will center the main content if i…
jtm13 Sep 13, 2023
ed0e919
Added underlines to the login and signup items in the navbar for thei…
jtm13 Sep 13, 2023
4729d30
Added the right color to tailwind config
jtm13 Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 38 additions & 8 deletions projects/mybyte/components/navbar.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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