forked from gdgbari/2023-web-devfest
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from gdgbari/main
target blank on links
- Loading branch information
Showing
16 changed files
with
311 additions
and
237 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
@mixin dots($count, $color) { | ||
$text-shadow: (); | ||
@for $i from 0 through $count { | ||
$text-shadow: $text-shadow, | ||
(-.5+(random()) * 3) + em | ||
(-.5+(random()) * 3) + em | ||
14px | ||
$color | ||
} | ||
text-shadow: $text-shadow; | ||
} | ||
html.multicolored-bg{ | ||
head{ | ||
display: block; | ||
color: transparent; | ||
} | ||
head::before, head::after, | ||
body::before, body::after { | ||
display: block; | ||
font-size: 250px; | ||
color: transparent; | ||
position: fixed; | ||
top: 50%; | ||
left: 50%; | ||
width: 3em; | ||
height: 3em; | ||
content: '.'; | ||
mix-blend-mode: screen; | ||
animation: 44s -27s move infinite ease-in-out alternate; | ||
} | ||
|
||
|
||
body::before { | ||
@include dots(200, #34A853); | ||
animation-duration: 10s; | ||
animation-delay: -27s; | ||
} | ||
|
||
body::after { | ||
@include dots(200, #4285F4); | ||
animation-duration: 20s; | ||
animation-delay: -32s; | ||
} | ||
|
||
head::before { | ||
@include dots(300, #EA4335); | ||
animation-duration: 40s; | ||
animation-delay: -23s; | ||
} | ||
|
||
head::after { | ||
@include dots(100, #F9AB00); | ||
animation-duration: 30s; | ||
animation-delay: -19s; | ||
} | ||
|
||
|
||
@keyframes move { | ||
from { | ||
transform: rotate(0deg) scale(12) translateX(-40px); | ||
} | ||
to { | ||
transform: rotate(180deg) scale(18) translateX(40px); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
--- | ||
import ScheduleCard from "../ScheduleCard.astro"; | ||
import { getSchedule } from "../../../scripts/api/sessionize_api"; | ||
import { getLangFromUrl, useTranslations } from "../../../i18n/utils"; | ||
const schedule = await getSchedule(); | ||
const lang = getLangFromUrl(Astro.url); | ||
const t = useTranslations(lang); | ||
--- | ||
<div class="text-white"> | ||
{ | ||
schedule.map((s) => { | ||
const totalScheduleCols = s.rooms.length + 1; | ||
const totalScheduleRows = s.timeSlots.length; | ||
let skipPadding: {[key:string]:number} = s.rooms.map((room) => ({[room.id]:0})).reduce((a,b)=>({...a,...b}),{}) | ||
return ( | ||
<div class="mb-5"> | ||
<p class="text-3xl font-bold mb-5"> | ||
{new Date(s.date).toLocaleDateString("en-US", { | ||
day: "numeric", | ||
month: "long", | ||
weekday: "long", | ||
})} | ||
</p> | ||
<div | ||
class={`grid grid-flow-row xl:grid-cols-[90px_repeat(5,_minmax(0,_1fr))] xl:grid-rows-${totalScheduleRows} grid-cols-1 gap-4`} | ||
> | ||
{s.timeSlots.map((ts,ts_idx) => { | ||
|
||
const hasServiceSession = ts.rooms.some( | ||
(tsr) => tsr.session.isServiceSession, | ||
); | ||
|
||
const sessionsInTimeSlot = ts.rooms.map((tsr) => { | ||
const endDate = new Date(tsr.session.endsAt); | ||
endDate.setSeconds(0) | ||
endDate.setMilliseconds(0) | ||
const slots = !hasServiceSession? ( | ||
//Function that calculate the rows to take for this session | ||
(()=>{ | ||
//Calculate the space to take (how many timeSlot takes this session (until a service session)) | ||
let session_len = 1 | ||
let last_is_service = false | ||
for (let i = ts_idx+1; i < s.timeSlots.length; i++){ | ||
//No sessions | ||
if (s.timeSlots[i].rooms.length == 0) continue | ||
//Take time from one of the sessions | ||
//Get next start date | ||
const next_date = new Date(s.timeSlots[i].rooms[0].session.startsAt) | ||
next_date.setSeconds(0) | ||
next_date.setMilliseconds(0) | ||
//If it's a service session, can't take this space | ||
if (s.timeSlots[i].rooms.some( (tsr) => tsr.session.isServiceSession)){ | ||
last_is_service = true | ||
continue //We need to check if replicate this session for the next timeSlot that is not a service session | ||
} | ||
if (last_is_service){ //We stopped at a service session and need to check if replicate this session in next timeSlots | ||
if (next_date < endDate){ | ||
s.timeSlots[i].rooms.push(tsr) //Replicate | ||
} | ||
break | ||
} | ||
//Continue to get space until this session ends | ||
if (next_date < endDate){ | ||
session_len ++ | ||
}else{ | ||
break | ||
} | ||
} | ||
return session_len | ||
})() | ||
) : 1; | ||
if (slots > 1){ | ||
skipPadding[tsr.id.toString()] = slots-1 | ||
} | ||
return { | ||
data: tsr, | ||
html: <div class={`xl:col-span-${ hasServiceSession ? totalScheduleCols - 1 : 1 } row-span-${slots}`}> | ||
<ScheduleCard value={tsr} /> | ||
</div> | ||
}; | ||
}); | ||
|
||
const orderedSessions = ( | ||
!hasServiceSession? | ||
s.rooms.map( | ||
(room) => { | ||
let session = sessionsInTimeSlot.find((target) => room.id == target.data.id) | ||
if (!session){ | ||
if (skipPadding[room.id.toString()]){ | ||
skipPadding[room.id.toString()]-- | ||
return null | ||
} | ||
return <div /> | ||
} | ||
return session?.html | ||
} | ||
).filter((ele)=>ele!=null) : sessionsInTimeSlot.map((session) => session.html) | ||
) | ||
|
||
return [ | ||
<div class="font-medium text-2xl"> | ||
<p>{ts.slotStart.substring(0, 5)}</p> | ||
</div>, | ||
...orderedSessions | ||
]; | ||
})} | ||
</div> | ||
</div> | ||
); | ||
}) | ||
} | ||
{schedule.length == 0?<h3 class="underline">{t("scheduling.noschedule")}</h3>:null} | ||
|
||
</div> |
Oops, something went wrong.