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

ios projects fix attempt 1

Browse source
This commit is contained in:
chark1es 2025-03-08 14:29:35 -08:00
parent bcd933d87b
commit 6dc95b67f9
2 changed files with 194 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,29 +3,52 @@ import { LiaDotCircle } from "react-icons/lia";
import ProjectSection from "./ProjectSection.astro";
---
<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>
<p>Annual Projects</p>
</div>
<p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] 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
class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] 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 md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]">
<div
class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]"
>
<LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" />
<p class="md:text-[2vw] text-[3vw] mr-[2vw]">
Skills & Requirements
</p>
<p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p>
<p class="w-3/5">
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.
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>
<div class="project-section-container">
<ProjectSection />
</div>
</div>
<style>
/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
.project-section-container {
width: 100%;
overflow-x: hidden;
padding-bottom: 10vw;
}
}
@media screen and (max-width: 767px) {
.project-section-container {
width: 100%;
margin-left: -5%;
}
}
</style>

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

@ -64,6 +64,19 @@ import { Image } from "astro:assets";
transition: transform 0.3s ease-in-out;
}
/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
.project-card {
height: auto;
min-height: 30vw;
}
.project-card img {
height: auto;
min-height: 30vw;
}
}
@media (min-width: 768px) {
.project-card.expanded {
flex: 2;
@ -77,6 +90,14 @@ import { Image } from "astro:assets";
opacity: 1;
}
}
/* Fix for iOS Safari */
@media screen and (max-width: 767px) {
.project-card {
width: 100%;
margin-bottom: 5vw;
}
}
</style>
<script>
@ -103,7 +124,7 @@ import { Image } from "astro:assets";
// Get the last expanded card index from localStorage
// Prevents bug where the expanded card breaks upon page reload
const lastExpandedIndex = parseInt(
localStorage.getItem(STORAGE_KEY) || "0"
localStorage.getItem(STORAGE_KEY) || "0",
);
expandCard(lastExpandedIndex);
@ -116,9 +137,7 @@ import { Image } from "astro:assets";
// Handle window resize
window.addEventListener("resize", () => {
const currentIndex = parseInt(
localStorage.getItem(STORAGE_KEY) || "0"
);
const currentIndex = parseInt(localStorage.getItem(STORAGE_KEY) || "0");
expandCard(currentIndex);
});
}
@ -131,18 +150,21 @@ import { Image } from "astro:assets";
function handleImageLoading() {
const projectImages = document.querySelectorAll(".project-card img");
projectImages.forEach((image, index) => {
projectImages.forEach((img) => {
// Type assertion to fix TypeScript errors
const image = img as HTMLImageElement;
// Ensure the image is fully loaded, even if it's already in cache
if (image.complete) {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
const skeleton = image.previousElementSibling as HTMLElement;
if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none";
}
} else {
image.addEventListener("load", () => {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
const skeleton = image.previousElementSibling as HTMLElement;
if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none";
}