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;
---
<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
id="slider"
class="absolute h-[calc(100%-8px)] bg-[#FFB81C] rounded-full transition-none"
style="left: 4px;"
class="absolute h-[calc(100%-15%)] bg-[#FFB81C] rounded-full transition-none"
style="left: 1%;"
>
</div>
{
filters.map((filter) => (
<button
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
? "text-black"
: "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 />
</div>
<p
data-inview
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"
<div
class="flex w-[85%] justify-between"
>
<p
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}
</p>
<div
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}
</div>
</p>
</div>
</div>
</div>

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

@ -25,11 +25,11 @@ const currentFilter = "All";
<Image
src={neko}
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 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%]" />
<p>MEET THE BOARD</p>
</div>

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

@ -12,7 +12,7 @@ const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
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%]`}
>
<p>Location: {location}</p>
Location: {location}
{date && (
<>
<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";
---
<div class="pt-[14vh] text-white w-full flex justify-center mb-[10vh]">
<div class="w-3/4 h-[40vh] flex justify-between flex-col">
<div class="flex items-center text-[3vw] pl-[5%] pt-[5%]">
<div class="md:pt-[10vw] pt-[15vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]">
<div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
<div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p>
Contact Us
</p>
</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!
</p>
<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
</Link>
</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="flex items-center text-[2.7vw] mb-[7%]">
<div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p>
Annual Projects
</p>
</div>
<p class="text-[1.2vw] mt-[5%] mb-[3%] ml-[25%] font-light">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
<p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[25%] ml-[15%] font-light">
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.
</p>
<div class="flex items-center text-[1.2vw] font-light mb-[7%] justify-between ml-[20%]">
<LiaDotCircle className="text-[2vw] pt-[0.5%]"/>
<p class="text-[2vw]">
ridiculus nec egestas
<div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[20%] ml-[10%]">
<LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
<p class="md:text-[2vw] text-[3vw]">
Skills & Requirements
</p>
<p class="w-3/5">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
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.
</p>
</div>

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

@ -6,7 +6,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
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) => (
<a
@ -20,18 +20,18 @@ import { Image } from "astro:assets";
alt={`${title} Project`}
width={668}
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">
<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}
</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}
</p>
<div class="w-full flex justify-end invisible [.expanded_&]:visible h-0 [.expanded_&]:h-auto">
<div class="flex items-center text-[1.3vw] [.expanded_&]:mt-[5%]">
<div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
<div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
</div>
@ -40,8 +40,8 @@ import { Image } from "astro:assets";
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
</div>
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw] absolute top-[3%] right-[5%]">
<FaGear />
<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 data-inview className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]" />
</div>
</a>
))

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

@ -5,12 +5,12 @@ import model from "../../images/model.webp";
---
<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" />
<Image
src={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>

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 { Image } from "astro:assets";
import eventborder from "../images/eventborder.webp";
import calendar from "../images/calendar2.webp";
import UpcomingEvents from "../components/events/UpcomingEvents.astro";
import Calendar from "../components/events/Calendar.jsx";
@ -15,12 +14,12 @@ const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
<Image
src={eventborder}
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
src={eventborder}
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 />
<UpcomingEvents />

6
src/pages/find.astro
View file

@ -12,19 +12,19 @@ import contactbroder from "../images/contactbroder.webp";
<Image
src={contactbroder}
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
src={contactbroder}
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 />
<div class="w-full flex justify-center">
<Image
src={event}
alt="board group photos"
class="w-3/4 rounded-full"
class="w-[90%] md:w-3/4 rounded-full"
/>
</div>
<Findus />

2
src/pages/robocup.astro
View file

@ -34,7 +34,7 @@ import Competition from "../components/signal/Competition.astro";
<Link
href="/"
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
</Link>