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

revert #4

Browse source
This commit is contained in:
chark1es 2025-03-08 14:47:14 -08:00
parent 4dbcf04199
commit 9b226fd5e7
9 changed files with 26 additions and 229 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/core/About.astro
View file

@ -5,7 +5,7 @@ const { title, text } = Astro.props;
<div class="flex flex-col items-center text-white my-[10%]">
<div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p
class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black"
>
@ -17,18 +17,3 @@ const { title, text } = Astro.props;
{text}
</p>
</div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

17
src/components/core/Subtitle.astro
View file

@ -4,23 +4,8 @@ import { LiaDotCircle } from "react-icons/lia";
---
<div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p>
{title}
</p>
</div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

27
src/components/join/Involvement.astro
View file

@ -23,15 +23,15 @@ const { image, text, link, delay } = Astro.props;
>
<div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
<div
class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw] flex items-center justify-center"
class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]"
>
{
text === "PROJECTS" ? (
<RiRobot2Fill className="icon-fix" />
<RiRobot2Fill />
) : text === "EVENTS" ? (
<IoMdCalendar className="icon-fix" />
<IoMdCalendar />
) : (
<FaGear className="icon-fix" />
<FaGear />
)
}
</div>
@ -49,14 +49,14 @@ const { image, text, link, delay } = Astro.props;
{text}
</p>
<GoArrowDownRight
className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow icon-fix"
className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"
/>
</div>
{
text === "H.A.R.D. HACK" && (
<p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
UC San Diego's largest hardware focused hackathon hold by IEEE UCSD,
UC San Diego’s largest hardware focused hackathon hold by IEEE UCSD,
HKN, and TNT
</p>
)
@ -64,18 +64,3 @@ const { image, text, link, delay } = Astro.props;
</div>
</Link>
</div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

17
src/components/main_page/Activity.astro
View file

@ -27,7 +27,7 @@ const { title, text, link, number, delay } = Astro.props;
>
more details
<IoIosArrowDroprightCircle
className="ml-[0.5vw] text-[2vw] md:text-[1.4vw] icon-fix"
className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"
/>
</Link>
<p
@ -36,18 +36,3 @@ const { title, text, link, number, delay } = Astro.props;
{number}
</p>
</div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

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

@ -5,7 +5,7 @@ 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%] icon-fix" />
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p>Annual Projects</p>
</div>
@ -21,10 +21,10 @@ import ProjectSection from "./ProjectSection.astro";
<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%] icon-fix" />
<LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" />
<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
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>
@ -32,18 +32,3 @@ import ProjectSection from "./ProjectSection.astro";
<ProjectSection />
</div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

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

@ -36,17 +36,17 @@ import { Image } from "astro:assets";
<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] icon-fix" />
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
</div>
</div>
</div>
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%] icon-fix" />
<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 md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%] flex items-center justify-center">
<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] icon-fix"
className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
/>
</div>
</a>
@ -77,36 +77,6 @@ import { Image } from "astro:assets";
opacity: 1;
}
}
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
/* Specific fixes for project card icons */
.project-card .bg-white {
display: flex;
align-items: center;
justify-content: center;
}
/* Fix for the arrow icon at the bottom */
.project-card .GoArrowDownRight {
margin-bottom: 0.1vw;
}
/* Fix for the more details icon */
.project-card .IoIosArrowDroprightCircle {
vertical-align: middle;
}
}
</style>
<script>
@ -159,20 +129,20 @@ import { Image } from "astro:assets";
function handleImageLoading() {
const projectImages = document.querySelectorAll(".project-card img");
projectImages.forEach((image) => {
projectImages.forEach((image, index) => {
// Ensure the image is fully loaded, even if it's already in cache
if ((image as HTMLImageElement).complete) {
(image as HTMLElement).style.opacity = "1";
if (image.complete) {
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) {
(skeleton as HTMLElement).style.display = "none";
skeleton.style.display = "none";
}
} else {
image.addEventListener("load", () => {
(image as HTMLElement).style.opacity = "1";
image.style.opacity = "1";
const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) {
(skeleton as HTMLElement).style.display = "none";
skeleton.style.display = "none";
}
});
}
@ -183,27 +153,4 @@ import { Image } from "astro:assets";
setTimeout(handleImageLoading, 100);
handleImageLoading();
document.addEventListener("astro:page-load", handleImageLoading);
// iOS detection and class addition
document.addEventListener("DOMContentLoaded", () => {
// Check if the device is iOS
const isIOS =
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
// Add iOS-specific class to the body for additional styling if needed
document.body.classList.add("ios-device");
// Apply additional fixes for specific iOS versions if needed
const iOSVersion = parseInt(
(navigator.userAgent.match(/OS (\d+)_/) || [])[1],
10,
);
if (iOSVersion && iOSVersion < 15) {
// Additional fixes for older iOS versions
document.body.classList.add("ios-legacy");
}
}
});
</script>

23
src/components/projects/QP.astro
View file

@ -8,7 +8,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
<div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p>Quarterly Project</p>
</div>
<div class="w-[70vw] aspect-[2.5/1] relative">
@ -27,7 +27,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
>
more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] icon-fix" />
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]" />
</Link>
<div
data-inview
@ -43,21 +43,6 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
</div>
</div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const image = document.getElementById("qp-image");
@ -65,9 +50,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
if (image) {
image.onload = () => {
if (skeleton) {
(skeleton as HTMLElement).style.display = "none";
}
skeleton.style.display = "none";
};
}
});

17
src/components/qp/PastProject.astro
View file

@ -27,23 +27,8 @@ import Link from "next/link";
{title}
</p>
<GoArrowDownRight
className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 icon-fix"
className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "
/>
</div>
</div>
</Link>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

43
src/layouts/Layout.astro
View file

@ -26,25 +26,6 @@ import InView from "../components/core/InView.astro";
document.documentElement.setAttribute("data-theme", savedTheme);
}
</script>
<style is:global>
/* Global iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
/* Apply to all icons in iOS */
svg {
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
/* Add iOS-specific class for additional styling */
.ios-device svg {
vertical-align: middle;
}
}
</style>
</head>
<InView />
<body class="w-full h-full m-0 bg-ieee-black">
@ -57,29 +38,5 @@ import InView from "../components/core/InView.astro";
</main>
<Footer />
</div>
<script is:inline>
// iOS detection
document.addEventListener("DOMContentLoaded", () => {
// Check if the device is iOS
const isIOS =
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
// Add iOS-specific class to the body for additional styling
document.body.classList.add("ios-device");
// Apply additional fixes for specific iOS versions if needed
const iOSVersion = parseInt(
(navigator.userAgent.match(/OS (\d+)_/) || [])[1],
10,
);
if (iOSVersion && iOSVersion < 15) {
// Additional fixes for older iOS versions
document.body.classList.add("ios-legacy");
}
}
});
</script>
</body>
</html>