Skip to content

minor style tweaks #4

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

Open
QpxDesign wants to merge 2 commits into
base: main
Choose a base branch
from
Open

minor style tweaks #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d0ef75
minor style changes + sort change for events
QpxDesign Sep 26, 2025
f813a77
minor style changes + sort change for events
QpxDesign Sep 26, 2025
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
25 changes: 14 additions & 11 deletions src/lib/components/arrowitem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<a href={url} target="_blank">
<!-- <img class="projectimg" src={img} alt={imgalt} /> -->
<div class="imgbg" style="background-image: url({img});"></div>
<div class="imgbg" style="background-image: url({img});"></div>
<div class="projectinfo">
<h2>{title}</h2>
<p>{description}</p>
Expand All @@ -37,22 +37,22 @@
font-family: 'Nunito', sans-serif;
}

.imgbg {
width: calc(173px * (16/9));
height: 173px;
background-size: calc(173px * (16/9)) auto;
background-repeat: no-repeat;
background-position: center;
}
.imgbg {
width: calc(173px * (16 / 9));
height: 173px;
background-size: calc(173px * (16 / 9)) auto;
background-repeat: no-repeat;
background-position: center;
}

@media screen and (orientation: portrait) {
a {
flex-direction: column;
}

.imgbg {
max-width: 100%;
}
.imgbg {
max-width: 100%;
}
}

@media screen and (orientation: landscape) {
Expand All @@ -71,6 +71,8 @@
align-items: center;
flex-direction: column;
width: 50%;
text-align: center;
padding: 0.75em 2em;
}

.projectinfo > h2 {
Expand All @@ -91,6 +93,7 @@
font-size: 4vh;
color: #555;
text-decoration: none;
padding-bottom: 0.5em;
}

.button:hover {
Expand Down
124 changes: 69 additions & 55 deletions src/lib/components/eventrow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,76 @@

<script lang="ts">
import Event from "$lib/components/event.svelte";
import { icalJSON } from "../../constants";




async function loadEvents() {
let res = await fetch(icalJSON);
const data = await res.json();

for (let i = 0; i < data.VCALENDAR[0].VEVENT.length; i++){
let date;
if (data.VCALENDAR[0].VEVENT[i]["DTSTART;TZID=America/Los_Angeles"]){
date = data.VCALENDAR[0].VEVENT[i]["DTSTART;TZID=America/Los_Angeles"];
} else {
date = data.VCALENDAR[0].VEVENT[i]["DTSTART"];
}
data.VCALENDAR[0].VEVENT[i].PROPERDT = new Date(date.slice(0,4) + "-" + date.slice(4,6) + "-" + date.slice(6,8) + "T" + date.slice(9,11) + ":" + date.slice(11,13) + ":" + date.slice(13,15) + "Z");
}


// data.VCALENDAR[0].VEVENT.reverse();
// sort calendar by PROPERDT
data.VCALENDAR[0].VEVENT.sort((a, b) => {
return a.PROPERDT - b.PROPERDT;
});

return data.VCALENDAR[0].VEVENT.reverse();
}

import Event from '$lib/components/event.svelte';
import { icalJSON } from '../../constants';

async function loadEvents() {
let res = await fetch(icalJSON);
const data = await res.json();

for (let i = 0; i < data.VCALENDAR[0].VEVENT.length; i++) {
let date;
if (data.VCALENDAR[0].VEVENT[i]['DTSTART;TZID=America/Los_Angeles']) {
date = data.VCALENDAR[0].VEVENT[i]['DTSTART;TZID=America/Los_Angeles'];
} else {
date = data.VCALENDAR[0].VEVENT[i]['DTSTART'];
}
data.VCALENDAR[0].VEVENT[i].PROPERDT = new Date(
date.slice(0, 4) +
'-' +
date.slice(4, 6) +
'-' +
date.slice(6, 8) +
'T' +
date.slice(9, 11) +
':' +
date.slice(11, 13) +
':' +
date.slice(13, 15) +
'Z'
);
}

data.VCALENDAR[0].VEVENT.sort((a, b) => {
return a.PROPERDT - b.PROPERDT;
});
// new sorting logic sorted by distance from today (low-high), then in the past events
let upcoming = [];
let past_events = [];
data.VCALENDAR[0].VEVENT.forEach((x) => {
let d = new Date(x.PROPERDT).getTime();
if (Date.now() <= d) {
upcoming.push(x);
} else {
past_events.push(x);
}
});
return upcoming.concat(past_events.reverse());
}
</script>






<div class="eventrow">
{#await loadEvents()}
<p>waiting for the events to load...</p>
{:then value}
{#each value as event}
<Event title={event.SUMMARY} date={event.PROPERDT.toDateString()} location={event.LOCATION} description={event.DESCRIPTION}></Event>
{/each}
{:catch error}
<p>There was an error loading the events</p>
{/await}
{#await loadEvents()}
<p>waiting for the events to load...</p>
{:then value}
{#each value as event}
<Event
title={event.SUMMARY}
date={event.PROPERDT.toDateString()}
location={event.LOCATION}
description={event.DESCRIPTION}
></Event>
{/each}
{:catch error}
<p>There was an error loading the events</p>
{/await}
</div>


<style>
.eventrow {
width:100%;
overflow:scroll;
white-space: nowrap;
flex-direction: row;
scrollbar-width: none;
padding-bottom: 1vh;
}
</style>
.eventrow {
width: 100%;
overflow: scroll;
white-space: nowrap;
flex-direction: row;
scrollbar-width: none;
padding-bottom: 1vh;
}
</style>
115 changes: 74 additions & 41 deletions src/routes/resources/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,86 @@
<script lang="ts">
import Arrowitem from "$lib/components/arrowitem.svelte";
import { discordURL, emailAddr } from "../../constants";
import Arrowitem from '$lib/components/arrowitem.svelte';
import { discordURL, emailAddr } from '../../constants';
</script>

<div class="page">
<Arrowitem
img="/img/discordbg169.png"
imgalt="Discord Logo"
title="Join the CSC Discord!"
description="Join our Discord to chat with other CS students and get help with your work!"
url={discordURL}
></Arrowitem>
<Arrowitem
img="/img/gmailscreenshot.png"
imgalt="Gmail Screenshot"
title="Loooking for advice/mentorship from an upperclassmen?"
description="Join our buddy system! We can pair you with a student eager to help out."
url={emailAddr}
></Arrowitem>
<Arrowitem
img="/img/SCR-20250126-rme.png"
imgalt="Q&A PDF"
title="Have a burning question about Computer Science at Oxy?"
description="We've answered as many as we could in this Computer Science Q&A"
url="/pdf/qa.pdf"
></Arrowitem>
<Arrowitem
img="/img/SCR-20250126-rnl.png"
imgalt="Opportunities Mailing List Screenshot"
title="Stay up to date on internship and research opportunities"
description="Join the CS Department's opportunities mailing list!"
url="https://groups.google.com/a/oxy.edu/g/compsci-opportunities-g"
></Arrowitem>
<Arrowitem
img="/img/serverroom-optim.jpg"
imgalt="Server Room"
title="Need a place to host your CS project?"
description="We'll host it for you on the Computer Science Club's server! Email us to learn more."
url={emailAddr}
></Arrowitem>

<Arrowitem img="/img/discordbg169.png" imgalt="Discord Logo" title="Join the CSC Discord!" description="Join our Discord to chat with other CS students and get help with your work!" url={discordURL}></Arrowitem>
<Arrowitem img="/img/gmailscreenshot.png" imgalt="Gmail Screenshot" title="Loooking for advice/mentorship from an upperclassmen?" description="Join our buddy system! We can pair you with a student eager to help out." url={emailAddr}></Arrowitem>
<Arrowitem img="/img/SCR-20250126-rme.png" imgalt="Q&A PDF" title="Have a burning question about Computer Science at Oxy?" description="We've answered as many as we could in this Computer Science Q&A" url="/pdf/qa.pdf"></Arrowitem>
<Arrowitem img="/img/SCR-20250126-rnl.png" imgalt="Opportunities Mailing List Screenshot" title="Stay up to date on internship and research opportunities" description="Join the CS Department's opportunities mailing list!" url="https://groups.google.com/a/oxy.edu/g/compsci-opportunities-g"></Arrowitem>
<Arrowitem img="/img/serverroom-optim.jpg" imgalt="Server Room" title="Need a place to host your CS project?" description="We'll host it for you on the Computer Science Club's server! Email us to learn more." url={emailAddr}></Arrowitem>


<p class="heading">Past Presentations and Workshops</p>
<p class="heading">Academic Support</p>
<p class="content">Workspace is a place where students come together to work on CS projects and coursework. It is a great opportunity to make connections with other CS students and get help from them. Additionally, tutors who work for Oxy's Scientific Scholars Achievement Program (SSAP), a student-led academic support organization, as well as class TAs are available for further help.</p>
<p class="content">Workspace & SSAP Hours</p>
<p class="content">Sun, 6-8 pm PST</p>
<p class="content">Tues, 6-8 pm PST</p>
<p class="heading">Career Support</p>
<p class="heading">Past Presentations and Workshops</p>
<p class="heading">Academic Support</p>
<p class="content">
Workspace is a place where students come together to work on CS projects and coursework. It is a
great opportunity to make connections with other CS students and get help from them.
Additionally, tutors who work for Oxy's Scientific Scholars Achievement Program (SSAP), a
student-led academic support organization, as well as class TAs are available for further help.
</p>
<p class="content">Workspace & SSAP Hours</p>
<p class="content">Sun, 6-8 pm PST</p>
<p class="content">Tues, 6-8 pm PST</p>
<p class="heading">Career Support</p>
</div>

<style>
.content {
font-size: 1em;
max-width: 90%;
margin: 0 auto;
text-align: center;
}

.content {
font-size: 1.5vh;
margin:0;
}

.heading {
font-size: 2vh;
margin-bottom:0.8vh;
}

.page {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Nunito", sans-serif;
margin:0px;
}
.heading {
font-size: 1.33em;
margin-bottom: 0.8vh;
}

.orangetext {
color: rgb(253, 115, 70);
text-decoration: none;
}
.page {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Nunito', sans-serif;
margin: 0px;
}

p {
}
.orangetext {
color: rgb(253, 115, 70);
text-decoration: none;
}

</style>
p {
}
</style>