Skip to content

fix: responsiveness improvement #76

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

Merged
Miran-Firdausi merged 1 commit into from
Dec 24, 2024
Merged

fix: responsiveness improvement #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 6 additions & 7 deletions src/components/Footer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from "react";
import { Link, useLocation } from "react-router-dom";
import Logo from "@/assets/images/logo.svg";
import SitLogo from "@/assets/images/Teams/sitlogo.svg";

const Footer = () => {
function Footer() {
const location = useLocation();

const handleLinkClick = () => {
Expand Down Expand Up @@ -38,7 +37,7 @@ const Footer = () => {
alt="Symbiosis Logo"
className="h-10 md:h-12"
/>
<div className="hidden sm:block w-px h-10 bg-secondary-light"></div>
<div className="hidden sm:block w-px h-10 bg-secondary-light" />
<img src={Logo} alt="CodeX Logo" className="h-10 md:h-12" />
</div>
</div>
Expand All @@ -48,7 +47,7 @@ const Footer = () => {
<div className="flex-1">
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
QUICK LINKS
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
</h4>
<ul className="space-y-2 text-text-light text-sm sm:text-base">
{[
Expand Down Expand Up @@ -79,7 +78,7 @@ const Footer = () => {
<div className="flex-1">
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block ">
SOCIAL
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
</h4>
<ul className="space-y-2 text-text-light text-sm sm:text-base">
<li className="cursor-pointer">
Expand All @@ -101,7 +100,7 @@ const Footer = () => {
<div className="relative bottom-0 left-0 w-full">
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
CONTACT
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
</h4>
</div>
<ul className="space-y-2 text-text-light text-sm sm:text-base">
Expand All @@ -127,6 +126,6 @@ const Footer = () => {
</div>
</footer>
);
};
}

export default Footer;
14 changes: 7 additions & 7 deletions src/pages/Contact/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,20 +44,20 @@ function Contact() {
>
{result}
</div>
<div className="mt-8 flex gap-x-8 overflow-hidden">
<span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
<div className="mt-8 flex gap-x-4 md:gap-x-8 overflow-hidden justify-center">
<span className="text-outlined uppercase text-4xl md:text-8xl font-black text-transparent whitespace-nowrap">
Contact Us
</span>
<span className="text-text-light uppercase text-8xl font-black whitespace-nowrap">
<span className="text-text-light uppercase text-4xl md:text-8xl font-black whitespace-nowrap">
Contact Us
</span>
<span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
<span className="text-outlined uppercase text-4xl md:text-8xl font-black text-transparent whitespace-nowrap">
Contact Us
</span>
</div>
<div className="mx-10 mt-16">
<div className="mx-8 md:mx-10 mt-8">
<form onSubmit={onSubmit}>
<div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-12 py-8 max-w-2xl">
<div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
<span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
Drop us a message
</span>
Expand Down Expand Up @@ -87,7 +87,7 @@ function Contact() {
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
required
/>
<div className=" flex justify-end mt-4">
<div className=" flex justify-center md:justify-end mt-4">
<button
type="submit"
className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
Expand Down
134 changes: 68 additions & 66 deletions src/pages/Gallery/Gallery.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,76 +161,78 @@ export default function Gallery() {

return (
<PageTransition>
<Heading
text="Gallery"
className="text-center absolute top-0 left-0 right-0 mb-24"
/>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
{images.map((image, index) => (
<div
role="button"
aria-label="Open"
onClick={() => openModal(index)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
openModal(index);
}
}}
tabIndex={0} // Makes the div focusable
key={image.src}
className="cursor-pointer"
>
<img
className="h-auto max-w-full rounded-lg aspect-square"
src={image.src}
alt={`Gallery img ${index + 1}`}
/>
</div>
))}

{modalOpen ? (
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75 overflow-y-auto">
<div className="relative max-h-screen max-w-screen-lg p-4 bg-white rounded-lg">
<button
type="button"
className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
onClick={closeModal}
aria-label="Close"
>
x
</button>
<button
className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
onClick={goToPrevious}
aria-label="Previous Image"
type="button"
>
&lt;&lt;
</button>
<button
className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
onClick={goToNext}
aria-label="Next Image"
type="button"
>
&gt;&gt;
</button>
<div className="pt-8 pb-16">
<Heading
text="Gallery"
className="text-center absolute top-0 left-0 right-0 mb-12 md:mb-24"
/>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
{images.map((image, index) => (
<div
role="button"
aria-label="Open"
onClick={() => openModal(index)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
openModal(index);
}
}}
tabIndex={0} // Makes the div focusable
key={image.src}
className="cursor-pointer"
>
<img
className="max-h-[80vh] max-w-[80vw] rounded-lg mb-4"
src={images[selectedImageIndex].src}
alt={`Selected gallery img ${selectedImageIndex + 1}`}
className="h-auto max-w-full rounded-lg aspect-square"
src={image.src}
alt={`Gallery img ${index + 1}`}
/>
<div className="text-center max-w-[80vw]">
<h3 className="text-lg font-semibold truncate">
{images[selectedImageIndex].caption}
</h3>
<p className="text-sm text-gray-500">
Date: {images[selectedImageIndex].date}
</p>
</div>
))}

{modalOpen ? (
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75 overflow-y-auto">
<div className="relative max-h-screen max-w-screen-lg p-4 bg-white rounded-lg">
<button
type="button"
className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
onClick={closeModal}
aria-label="Close"
>
x
</button>
<button
className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
onClick={goToPrevious}
aria-label="Previous Image"
type="button"
>
&lt;&lt;
</button>
<button
className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
onClick={goToNext}
aria-label="Next Image"
type="button"
>
&gt;&gt;
</button>
<img
className="max-h-[80vh] max-w-[80vw] rounded-lg mb-4"
src={images[selectedImageIndex].src}
alt={`Selected gallery img ${selectedImageIndex + 1}`}
/>
<div className="text-center max-w-[80vw]">
<h3 className="text-lg font-semibold truncate">
{images[selectedImageIndex].caption}
</h3>
<p className="text-sm text-gray-500">
Date: {images[selectedImageIndex].date}
</p>
</div>
</div>
</div>
</div>
) : null}
) : null}
</div>
</div>
</PageTransition>
);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Teams/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ function Teams() {
<PageTransition>
<div className="min-h-screen">
<div className="flex justify-center items-center">
<div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
<div className="flex-grow mx-auto px-5 space-x-30 pt-8 pb-16">
<Heading
text="MEET OUR TEAM"
className="text-center absolute top-0 left-0 right-0 mb-24"
className="text-center absolute top-0 left-0 right-0 mb-12 md:mb-24"
/>
<div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
<div className="flex flex-row flex-wrap gap-8 md:gap-16 justify-center items-center mt-4 sm:mt-12">
{teamMembers}
</div>
{/* <SkewButton text="SEE ALL" link="/all-members" className="mt-16" /> */}
Expand Down
Loading