Skip to content

First iteration of the join ECSESS page #111

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

Merged
notkaramel merged 2 commits into from
Feb 28, 2026
Merged

First iteration of the join ECSESS page #111

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
ecae8f4
First iteration of the join ECSESS page
notkaramel Feb 28, 2026
abdaf31
Fix: change the year rep range + debate date
notkaramel Feb 28, 2026
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
9 changes: 2 additions & 7 deletions src/components/layout/NavBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import ECSESS from 'assets/ECSESS.png';
import { Menu } from '@lucide/svelte';
import { slide } from 'svelte/transition';
let isElectionTime = $state(false);
let menuHidden = $state(true);
</script>

Expand Down Expand Up @@ -36,9 +35,7 @@
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/devteam">Dev Team</NavButton>
{#if isElectionTime}
<NavButton href="/join">Join ECSESS</NavButton>
{/if}
<NavButton href="/join">Join ECSESS</NavButton>
</div>
{/if}
</div>
Expand All @@ -54,9 +51,7 @@
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/devteam">Dev Team</NavButton>
{#if isElectionTime}
<NavButton href="/join">Join ECSESS</NavButton>
{/if}
<NavButton href="/join">Join ECSESS</NavButton>
</div>
</div>
</nav>
270 changes: 259 additions & 11 deletions src/routes/join/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,272 @@
<script>
import ResourceCard from 'components/resource/ResourceCard.svelte';
import Button from 'components/Button.svelte';
import Link from 'components/Link.svelte';
import Section from 'components/layout/Section.svelte';
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
let isElectionTime = $state(true);
let { data } = $props();

const keyDates = [
{
label: 'Nomination period',
range: 'March 2 - 13',
instruction: [
'Review the Electrical, Computer, and Software Engineering Student Society Terms of Reference and EUS and ECSESS Electoral bylaws.',
'If applicable, prepare a nomination form and gather signatures from peers.',
'Share nomination Google Form with ecsess.dro@mcgilleus.ca by 5pm March 13th.'
]
},
{
label: 'Extended nomination period',
range: 'March 14 - 15',
instruction: [
'For positions with one or fewer candidates, the nomination period ends at 5PM.'
]
},
{
label: 'Campaigning period',
range: 'March 17 - 23',
instruction: [
'The candidate runs their campaign and reaches out to the student body. The campaign ends at 10PM on March 23rd.'
]
},
{
label: 'Deadline to register a "No" campaign',
range: 'March 18',
instruction: [
'If you are interested in running a "No" campaign against a candidate, you must register by 11:59pm on March 18th.'
]
},
{
label: 'Submit candidate blurb',
range: 'March 20',
instruction: ['Submit a blurb (max 200 words) about yourself to ecsess.dro@mcgilleus.ca by 12pm on March 20th.']
},
{
label: 'Candidate debates',
range: 'March 23',
instruction: ['The candidate for elected positions debates are held. The location is TBA.']
},
{
label: 'Voting period',
range: 'March 24 - 30',
instruction: ['Cast your vote for your preferred candidates.']
},
{
label: 'Results released',
range: 'March 31',
instruction: ['Election results are published.']
}
];

const electedPositions = [
'President',
'VP Administration',
'VP Events',
'VP Internal',
'VP External',
'VP Communications',
'VP Academic',
'Year Representatives (U2-U4)'
];

const selectedPositions = [
'VP Finance',
'VP Technical Development',
'Equity and Mental Health Officer'
];

const importantDocuments = [
{
label: 'ECSESS Terms of Reference',
link: 'https://drive.google.com/file/d/1gK3GwDrz7d-p_JG75-afHbVb_DGHG7YS/view'
},
{
label: 'EUS Constitution',
link: 'https://drive.google.com/file/d/1_awn7S_WHHtsTPiytyLScnTXmEQ0d0M8/view'
},
{
label: 'EUS Electoral and Referendum Bylaws',
link: 'https://drive.google.com/file/d/1mCkcwhZ931R3BjSnTmjoitRYpUDZc2iK/view'
},
{
label: 'ECSESS Electoral Bylaws',
link: ''
},
{
label: 'Nomination Form Guidelines',
link: 'https://docs.google.com/document/d/1UEvnwzQ4fyLBYDDRpACKPr9zdXcH76UWtYLZ0E1CCBg/edit?tab=t.0'
}
];

const droContact = {
name: 'Sydney Brajer',
email: 'ecsess.dro@mcgilleus.ca'
};
</script>

<SeoMetaTags
title="Join the ECSESS student council!!!"
title="Join the ECSESS student council!"
description="Learn how you can join the ECSESS council and make an impact on the ECSE student community at McGill University!"
canonical={data.canonical}
/>

<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
<p class="page-title">Want to join ECSESS Council?</p>
<p>Come back around March for application period!</p>
<!-- Section 1: Election timeline & documents -->
<Section from="from-ecsess-black" to="to-ecsess-800" direction="to-b">
<p class="page-title">ECSESS Election 2026</p>

<p class="text-ecsess-200 mb-2 text-center text-3xl">
<Link href="https://ecsess.mcgilleus.ca/r/candidate-package" external>
<Button
class="text-ecsess-50 bg-ecsess-800 text-bold hover:bg-ecsess-700 border-ecsess-400/50 rounded-md border-2 text-lg shadow-md transition-all hover:cursor-pointer"
>
View the full <span class="underline underline-offset-4">candidate package</span>
<br /><span class="text-ecsess-200 text-sm">ecsess.mcgilleus.ca/r/candidate-package</span>
</Button>
</Link>
</p>
<p class="text-ecsess-200 mb-2 text-center text-3xl">
<Link
href="https://docs.google.com/document/d/1UEvnwzQ4fyLBYDDRpACKPr9zdXcH76UWtYLZ0E1CCBg/edit?usp=sharing
"
external
>
<Button
class="text-ecsess-50 bg-ecsess-800 text-bold hover:bg-ecsess-700 border-ecsess-400/50 rounded-md border-2 text-base shadow-md transition-all hover:cursor-pointer"
>
Nomination Form Guidelines
</Button>
</Link>
</p>

<!-- File explorer - style timeline -->
<div
class="border-ecsess-700 bg-ecsess-800 mx-auto w-full max-w-2xl overflow-hidden rounded-lg border shadow-xl"
>
<!-- Title bar -->
<div class="border-ecsess-700 bg-ecsess-850 flex items-center gap-2 border-b px-4 py-2.5">
<div class="flex gap-1.5">
<span class="bg-ecsess-150 h-3 w-3 rounded-full"></span>
<span class="bg-ecsess-500 h-3 w-3 rounded-full"></span>
<span class="bg-ecsess-300 h-3 w-3 rounded-full"></span>
</div>
<span class="text-ecsess-300 ml-2 font-mono text-xs">ecsess / election-2026 / key-dates</span>
</div>
<!-- File list -->
<div class="divide-ecsess-700 divide-y font-mono">
{#each keyDates as date}
<details
class="group hover:bg-ecsess-800/80 [[open]]:bg-ecsess-800/80 cursor-pointer transition-colors"
>
<summary
class="flex list-none items-center gap-3 px-4 py-3.5 focus:outline-none [&::-webkit-details-marker]:hidden"
>
<div class="min-w-0 flex-1">
<p class="text-ecsess-100 text-base font-medium">{date.label}</p>
<p class="text-ecsess-400 mt-0.5 text-sm">{date.range}</p>
</div>
<svg
class="text-ecsess-400 h-5 w-5 shrink-0 transition-transform group-open:rotate-90"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</summary>
<div class="border-ecsess-700 bg-ecsess-900 border-t px-4 py-3.5 pl-4">
<p class="text-ecsess-300 text-base leading-relaxed">
{#each date.instruction as instruction}
<span class="text-ecsess-300 text-base leading-relaxed">{instruction}</span> <br />
{/each}
</p>
</div>
</details>
{/each}
</div>
</div>
</Section>

<!-- Section 2: Positions & contact -->
<Section from="from-ecsess-800" to="to-ecsess-black" direction="to-b">
<div class="mx-auto mb-12 w-full max-w-4xl text-center">
<p class="text-ecsess-100 my-4 text-3xl font-extrabold">Important documents</p>
<div class="mx-auto flex flex-col flex-wrap items-center justify-center gap-3">
{#each importantDocuments.filter((d) => d.link) as doc}
<Link href={doc.link} external>
<Button
class="border-ecsess-600 bg-ecsess-800 text-ecsess-100 hover:bg-ecsess-700 inline-flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium"
>
<svg
class="text-ecsess-400 h-4 w-4 shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
{doc.label}
</Button>
</Link>
{/each}
</div>
</div>

<p class="text-ecsess-100 mb-4 text-3xl font-bold">Available positions</p>

<div class="mx-auto grid w-full max-w-4xl grid-cols-1 gap-8 md:grid-cols-2">
<div class="bg-ecsess-400/20 border-ecsess-700 rounded-xl border p-6 text-left">
<h2 class="text-ecsess-100 text-xl font-bold">Elected positions</h2>
<p class="text-ecsess-200 border-ecsess-700 mb-4 border-b pb-4 text-sm">
Positions that are elected by the student body via voting.
</p>
<ul class="text-ecsess-200 space-y-2">
{#each electedPositions as position}
<li>{position}</li>
{/each}
</ul>
</div>

<div class="bg-ecsess-400/20 border-ecsess-700 rounded-xl border p-6 text-left">
<h2 class="text-ecsess-100 text-xl font-bold">Selected positions</h2>
<p class="text-ecsess-200 border-ecsess-700 mb-4 border-b pb-4 text-sm">
Positions that are selected by the ECSESS Council, via selection committee process.
</p>
<ul class="text-ecsess-200 space-y-2">
{#each selectedPositions as position}
<li>{position}</li>
{/each}
</ul>
</div>
</div>

<!-- {#if isElectionTime}
<ResourceCard title="Involvement Booklet">
A guide to involvement with ECSESS and its subcommittees (The Factory, IEEE McGill, CodeJam).
</ResourceCard>
{:else}{/if} -->
<!-- Contact (DRO) -->
<div class="mx-auto my-12 w-full max-w-4xl">
<h2 class="text-ecsess-100 border-ecsess-700 mb-4 border-b pb-4 text-xl font-bold">Contact</h2>
<p class="text-ecsess-200 mb-4 text-base">Please direct any questions to:</p>
<div class="flex flex-col items-center justify-start">
<p class="text-ecsess-100 text-lg font-semibold">{droContact.name}</p>
<Link
href={`mailto:${droContact.email}`}
external
class="text-ecsess-200 hover:text-ecsess-100 underline underline-offset-3 transition-colors hover:cursor-pointer"
>
{droContact.email}
</Link>
<p class="text-ecsess-200 my-2 text-xs font-medium tracking-wider uppercase">
ECSESS Deputy Returning Officer (DRO)
</p>
</div>
</div>
</Section>
Loading