Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

fix mobile for board

Browse source
This commit is contained in:
Shing Hung 2025-01-27 07:23:22 -08:00
parent d457e0d93d
commit af8871ad14
11 changed files with 43 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/board/Filter.astro
View file

@ -2,18 +2,18 @@
const { filters, currentFilter } = Astro.props; const { filters, currentFilter } = Astro.props;
--- ---
<div class="inline-flex border border-white/20 rounded-full p-1 relative"> <div class="inline-flex border border-white/20 rounded-full md:p-[0.2vw] p-[0.4vw] relative my-[3vw]">
<div <div
id="slider" id="slider"
class="absolute h-[calc(100%-8px)] bg-[#FFB81C] rounded-full transition-none" class="absolute h-[calc(100%-15%)] bg-[#FFB81C] rounded-full transition-none"
style="left: 4px;" style="left: 1%;"
> >
</div> </div>
{ {
filters.map((filter) => ( filters.map((filter) => (
<button <button
data-filter={filter} data-filter={filter}
class={`px-6 py-2 rounded-full transition-all relative z-10 ${ class={`md:text-[1.3vw] text-[2.5vw] md:px-[1.8vw] px-[3vw] md:py-[0.2vw] py-[0.4vw] rounded-full transition-all relative z-10 ${
currentFilter === filter currentFilter === filter
? "text-black" ? "text-black"
: "text-white hover:bg-white/10 hover:bg-opacity-50" : "text-white hover:bg-white/10 hover:bg-opacity-50"

11
src/components/board/Officer.astro
View file

@ -36,22 +36,21 @@ const { name, position, picture, email } = Astro.props;
> >
<FaGear /> <FaGear />
</div> </div>
<p <div
data-inview class="flex w-[85%] justify-between"
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"
> >
<p <p
data-inview data-inview
class="in-view:animate-fade-right text-[2vw] font-light md:leading-[3vh] leading-[1.5vh]" class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
> >
{name} {name}
</p> </p>
<div <div
data-inview data-inview
class="md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] w-[20vw] md:w-[10vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center" class="md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] w-fit border-[0.11vw] border-white/90 rounded-full px-[1vw] py-[0.1vw] h-fit text-center"
> >
{position} {position}
</div> </div>
</p> </div>
</div> </div>
</div> </div>

4
src/components/board/Officers.astro
View file

@ -25,11 +25,11 @@ const currentFilter = "All";
<Image <Image
src={neko} src={neko}
alt="About image" alt="About image"
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:ww-[14vw] rounded-[2vw]" class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
/> />
</div> </div>
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]"> <div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
<p>MEET THE BOARD</p> <p>MEET THE BOARD</p>
</div> </div>

2
src/components/events/EventList.jsx
View file

@ -12,7 +12,7 @@ const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
data-inview data-inview
className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`} className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`}
> >
<p>Location: {location}</p> Location: {location}
{date && ( {date && (
<> <>
<div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" /> <div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />

11
src/components/find/FindTitle.astro
View file

@ -3,22 +3,21 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="pt-[14vh] text-white w-full flex justify-center mb-[10vh]"> <div class="md:pt-[10vw] pt-[15vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]">
<div class="w-3/4 h-[40vh] flex justify-between flex-col"> <div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
<div class="flex items-center text-[3vw] pl-[5%] pt-[5%]"> <div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p> <p>
Contact Us Contact Us
</p> </p>
</div> </div>
<p class="text-[1.25vw]"> <p class="md:text-[1.25vw] text-[2vw]">
The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts! The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
</p> </p>
<div class="flex justify-end"> <div class="flex justify-end">
<Link data-inview href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 text-[1.2vw]"> <Link data-inview href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 md:text-[1.2vw] text-[2vw]">
DISCORD DISCORD
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>

22
src/components/projects/AP.astro
View file

@ -4,29 +4,25 @@ import ProjectSection from "./ProjectSection.astro";
--- ---
<div class="text-white mt-[15%] mb-[30%] mx-[10%] relative"> <div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
<div class="flex items-center text-[2.7vw] mb-[7%]"> <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p> <p>
Annual Projects Annual Projects
</p> </p>
</div> </div>
<p class="text-[1.2vw] mt-[5%] mb-[3%] ml-[25%] font-light"> <p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[25%] ml-[15%] font-light">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Join in the fray of internationally-recognized competition through Robocup, Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD! Participate in an intensive collaborative environment that challenges hard skills of hardware and software.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
</p> </p>
<div class="flex items-center text-[1.2vw] font-light mb-[7%] justify-between ml-[20%]"> <div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[20%] ml-[10%]">
<LiaDotCircle className="text-[2vw] pt-[0.5%]"/> <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
<p class="text-[2vw]"> <p class="md:text-[2vw] text-[3vw]">
ridiculus nec egestas Skills & Requirements
</p> </p>
<p class="w-3/5"> <p class="w-3/5">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat. IEEE @ UCSD’s annual projects are intended for students with intermediate experience with hardware or software. Participation on teams assemble an array of skills and talents of soft and hard skills.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
</p> </p>
</div> </div>

18
src/components/projects/ProjectSection.astro
View file

@ -6,7 +6,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
--- ---
<div class="flex gap-[1.5vw] h-[50vh]"> <div class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0">
{ {
Object.entries(annualProjects).map(([title, project], index) => ( Object.entries(annualProjects).map(([title, project], index) => (
<a <a
@ -20,18 +20,18 @@ import { Image } from "astro:assets";
alt={`${title} Project`} alt={`${title} Project`}
width={668} width={668}
height={990} height={990}
class="opacity-70 w-full h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110" class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
/> />
<div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]"> <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
<div class="w-full"> <div class="w-full">
<p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap text-[1.2vw] font-light mb-[5%]"> <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
{title} {title}
</p> </p>
<p class="hidden [.expanded_&]:contents transition-all duration-300 overflow-hidden"> <p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
{project.description} {project.description}
</p> </p>
<div class="w-full flex justify-end invisible [.expanded_&]:visible h-0 [.expanded_&]:h-auto"> <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
<div class="flex items-center text-[1.3vw] [.expanded_&]:mt-[5%]"> <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
more details more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" /> <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
</div> </div>
@ -40,8 +40,8 @@ import { Image } from "astro:assets";
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" /> <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
</div> </div>
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw] absolute top-[3%] right-[5%]"> <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
<FaGear /> <FaGear data-inview className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]" />
</div> </div>
</a> </a>
)) ))

4
src/components/robocub/RoboTitle.astro
View file

@ -5,12 +5,12 @@ import model from "../../images/model.webp";
--- ---
<div <div
class="flex items-center h-[60vh] relative w-full pl-[10%] mt-[3%] mb-[15%]" class="flex items-center md:h-[35vw] h-[45vw] relative w-full pl-[10%] md:mt-[3%] mt-[20%] mb-[15%]"
> >
<Title title="Robocup" /> <Title title="Robocup" />
<Image <Image
src={model} src={model}
alt="Robocup robot model" alt="Robocup robot model"
class="absolute w-[50%] right-[10%] top-[5%]" class="absolute md:w-[50%] w-[60%] md:right-[10%] right-0 md:top-[5%]"
/> />
</div> </div>

5
src/pages/events.astro
View file

@ -3,7 +3,6 @@ import Layout from "../layouts/Layout.astro";
import EventTitle from "../components/events/EventTitle.astro"; import EventTitle from "../components/events/EventTitle.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import eventborder from "../images/eventborder.webp"; import eventborder from "../images/eventborder.webp";
import calendar from "../images/calendar2.webp";
import UpcomingEvents from "../components/events/UpcomingEvents.astro"; import UpcomingEvents from "../components/events/UpcomingEvents.astro";
import Calendar from "../components/events/Calendar.jsx"; import Calendar from "../components/events/Calendar.jsx";
@ -15,12 +14,12 @@ const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
<Image <Image
src={eventborder} src={eventborder}
alt="JOIN US" alt="JOIN US"
class="absolute left-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw] -z-10" class="absolute left-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/> />
<Image <Image
src={eventborder} src={eventborder}
alt="JOIN US" alt="JOIN US"
class="absolute right-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw] -z-10" class="absolute right-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/> />
<EventTitle /> <EventTitle />
<UpcomingEvents /> <UpcomingEvents />

6
src/pages/find.astro
View file

@ -12,19 +12,19 @@ import contactbroder from "../images/contactbroder.webp";
<Image <Image
src={contactbroder} src={contactbroder}
alt="JOIN US" alt="JOIN US"
class="absolute left-[1vw] w-[4vw] top-[60vh]" class="absolute left-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/> />
<Image <Image
src={contactbroder} src={contactbroder}
alt="JOIN US" alt="JOIN US"
class="absolute right-[1vw] w-[4vw] top-[60vh]" class="absolute right-[1vw] md:w-[4vw] w-[5vw] md:top-[60vh] top-[70vw] -z-10"
/> />
<FindTitle /> <FindTitle />
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
<Image <Image
src={event} src={event}
alt="board group photos" alt="board group photos"
class="w-3/4 rounded-full" class="w-[90%] md:w-3/4 rounded-full"
/> />
</div> </div>
<Findus /> <Findus />

2
src/pages/robocup.astro
View file

@ -34,7 +34,7 @@ import Competition from "../components/signal/Competition.astro";
<Link <Link
href="/" href="/"
target="_blank" target="_blank"
className="px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light" className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
> >
Past Team Description Paper Past Team Description Paper
</Link> </Link>