First iteration of the join ECSESS page
This commit is contained in:
@@ -3,7 +3,6 @@
|
|||||||
import ECSESS from 'assets/ECSESS.png';
|
import ECSESS from 'assets/ECSESS.png';
|
||||||
import { Menu } from '@lucide/svelte';
|
import { Menu } from '@lucide/svelte';
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition';
|
||||||
let isElectionTime = $state(false);
|
|
||||||
let menuHidden = $state(true);
|
let menuHidden = $state(true);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -36,9 +35,7 @@
|
|||||||
<NavButton href="/events">Events</NavButton>
|
<NavButton href="/events">Events</NavButton>
|
||||||
<NavButton href="/resources">Resources</NavButton>
|
<NavButton href="/resources">Resources</NavButton>
|
||||||
<NavButton href="/devteam">Dev Team</NavButton>
|
<NavButton href="/devteam">Dev Team</NavButton>
|
||||||
{#if isElectionTime}
|
|
||||||
<NavButton href="/join">Join ECSESS</NavButton>
|
<NavButton href="/join">Join ECSESS</NavButton>
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@@ -54,9 +51,7 @@
|
|||||||
<NavButton href="/events">Events</NavButton>
|
<NavButton href="/events">Events</NavButton>
|
||||||
<NavButton href="/resources">Resources</NavButton>
|
<NavButton href="/resources">Resources</NavButton>
|
||||||
<NavButton href="/devteam">Dev Team</NavButton>
|
<NavButton href="/devteam">Dev Team</NavButton>
|
||||||
{#if isElectionTime}
|
|
||||||
<NavButton href="/join">Join ECSESS</NavButton>
|
<NavButton href="/join">Join ECSESS</NavButton>
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -1,24 +1,272 @@
|
|||||||
<script>
|
<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 Section from 'components/layout/Section.svelte';
|
||||||
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
|
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
|
||||||
let isElectionTime = $state(true);
|
|
||||||
let { data } = $props();
|
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: 'Candidate debates',
|
||||||
|
range: 'March 19',
|
||||||
|
instruction: ['The candidate for elected positions debates are held. The location is TBA.']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Submit candidate blurb',
|
||||||
|
range: 'March 20',
|
||||||
|
instruction: ['Submit a blurb about yourself to ecsess.dro@mcgilleus.ca.']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 (U1-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>
|
</script>
|
||||||
|
|
||||||
<SeoMetaTags
|
<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!"
|
description="Learn how you can join the ECSESS council and make an impact on the ECSE student community at McGill University!"
|
||||||
canonical={data.canonical}
|
canonical={data.canonical}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
|
<!-- Section 1: Election timeline & documents -->
|
||||||
<p class="page-title">Want to join ECSESS Council?</p>
|
<Section from="from-ecsess-black" to="to-ecsess-800" direction="to-b">
|
||||||
<p>Come back around March for application period!</p>
|
<p class="page-title">ECSESS Election 2026</p>
|
||||||
|
|
||||||
<!-- {#if isElectionTime}
|
<p class="text-ecsess-200 mb-2 text-center text-3xl">
|
||||||
<ResourceCard title="Involvement Booklet">
|
<Link href="https://ecsess.mcgilleus.ca/r/candidate-package" external>
|
||||||
A guide to involvement with ECSESS and its subcommittees (The Factory, IEEE McGill, CodeJam).
|
<Button
|
||||||
</ResourceCard>
|
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"
|
||||||
{:else}{/if} -->
|
>
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</Section>
|
||||||
|
|||||||
Reference in New Issue
Block a user