-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create new page for board applications (#754)
Create new page for board applications (#754)
- Loading branch information
1 parent
c0c0275
commit ad054dd
Showing
14 changed files
with
467 additions
and
1 deletion.
There are no files selected for viewing
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,16 @@ | ||
<script lang="ts"> | ||
import type { ListItem } from './types'; | ||
export let data: ListItem[]; | ||
</script> | ||
|
||
<ul class="recursive-ul"> | ||
{#each data as item} | ||
<li class="recursive-ul__item"> | ||
{@html item.html} | ||
{#if item.children} | ||
<svelte:self data={item.children} /> | ||
{/if} | ||
</li> | ||
{/each} | ||
</ul> |
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,4 @@ | ||
export interface ListItem { | ||
html: string; | ||
children?: ListItem[]; | ||
} |
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,5 @@ | ||
import type { ListItem } from './types'; | ||
|
||
export function li(html: string, children?: ListItem[]): ListItem { | ||
return { html, children }; | ||
} |
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,133 @@ | ||
<script lang="ts"> | ||
import { MetaTags } from 'svelte-meta-tags'; | ||
import Block from '$lib/components/block/block.svelte'; | ||
import Button from '$lib/components/button/button.svelte'; | ||
import Spacing from '$lib/public/legacy/spacing.svelte'; | ||
import { TextAlignment } from '$lib/public/legacy/text-alignment'; | ||
import PositionList from './position-list.svelte'; | ||
import { POSITIONS } from './data'; | ||
function expandAll() { | ||
const positions = document.querySelectorAll('.position'); | ||
positions.forEach((el) => el.setAttribute('open', 'true')); | ||
} | ||
</script> | ||
|
||
<svelte:head> | ||
<title>Spring 2023 board applications | ACM at CSUF</title> | ||
</svelte:head> | ||
|
||
<MetaTags | ||
openGraph={{ | ||
title: "Spring 2023 board applications", | ||
description: "Listed below are the positions that are open for the Spring 2023 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.", | ||
url: "https://acmcsuf.com/s23positions", | ||
type: "article", | ||
article: { | ||
publishedTime: "2023-19-01T00:00:00.000Z", | ||
modifiedTime: "2023-19-01T00:00:00.000Z", | ||
}, | ||
}} | ||
/> | ||
|
||
<Spacing --min="175px" --med="200px" --max="200px" /> | ||
|
||
<Block align={TextAlignment.LEFT}> | ||
<h1 slot="headline" class="size-lg">Spring 2023 board applications</h1> | ||
<p slot="text" class="size-sm"> | ||
Listed below are the positions that are open for the Spring 2023 semester. Please read the | ||
descriptions carefully and apply for the position(s) that you are interested in. You may apply | ||
for multiple positions, but you may only be selected for one. If you are selected for a | ||
position, you will be contacted by the current board member in charge of that position. | ||
<br /> | ||
<br /> | ||
Last updated January 19th, 2023 | ||
<br /> | ||
<br /> | ||
<span class="center-btn" on:click={expandAll} on:keypress={expandAll}> | ||
<Button text="Expand all!" /> | ||
</span> | ||
</p> | ||
</Block> | ||
|
||
<section class="positions-container"> | ||
<div class="positions-container-inner"> | ||
<PositionList data={POSITIONS} /> | ||
</div> | ||
</section> | ||
|
||
<Spacing --med="64px" /> | ||
|
||
<span class="center-btn"> | ||
<Button link="/s23apply" text="Apply now!" /> | ||
</span> | ||
|
||
<Spacing --med="64px" /> | ||
|
||
<Block align={TextAlignment.LEFT}> | ||
<h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1> | ||
<div slot="text" class="contact-text"> | ||
<p class="size-sm"> | ||
<span class="brand-italic" | ||
>Feel free to contact the ACM Executive Board if you have questions.</span | ||
> | ||
</p> | ||
|
||
<p class="size-sm"> | ||
<span class="brand-em">Karnikaa Velumani (ACM President)</span> | ||
</p> | ||
<ul> | ||
<li>Email: <code>karnikaavelumani@csu.fullerton.edu</code></li> | ||
<li>Discord: <code>Karbas#0001</code></li> | ||
</ul> | ||
|
||
<p> | ||
<span class="brand-em">Ethan Davidson (ACM VP / Webmaster)</span> | ||
</p> | ||
<ul> | ||
<li>Email: <code>ethandavidson@csu.fullerton.edu</code></li> | ||
<li>Discord: <code>EthanThatOneKid#3456</code></li> | ||
</ul> | ||
</div> | ||
</Block> | ||
|
||
<Spacing --min="40px" --med="95px" --max="120px" /> | ||
|
||
<style lang="scss"> | ||
.page-body { | ||
width: 100%; | ||
margin: 0 1rem; | ||
} | ||
.center-btn { | ||
display: flex; | ||
justify-content: center; | ||
} | ||
.contact-text ul { | ||
padding: 0 0 0 1rem; | ||
} | ||
.positions-container { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
.positions-container-inner { | ||
margin: 0 24px; | ||
width: 100%; | ||
} | ||
@media (min-width: 768px) { | ||
.positions-container { | ||
margin-top: 2rem; | ||
} | ||
.positions-container-inner { | ||
max-width: 64ch; | ||
margin: 0 1rem; | ||
} | ||
} | ||
</style> |
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,151 @@ | ||
import { li } from '$lib/components/recursive-ul/utils'; | ||
|
||
import type { ClubPosition } from './position'; | ||
|
||
/** | ||
* The tools that are used in the club. | ||
* | ||
* @remarks This is a map of tool names to their reasons for being used. | ||
*/ | ||
export const TOOLS = { | ||
'Google Drive/Docs': 'To collaborate on presentations, documents, and spreadsheets.', | ||
Discord: 'Internal team communication, assistance for student questions', | ||
Figma: 'Create marketing materials and teaching students how to use it', | ||
GitHub: 'To collaborate on code, manage projects, and teach students how to use it', | ||
'Social media': 'Discord, Instagram, LinkedIn, and YouTube', | ||
'Google Colab/Juptyer Notebook': 'Cloud development environment for Python', | ||
}; | ||
|
||
export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [ | ||
{ | ||
title: 'AI Officer', | ||
teamColor: 'var(--acm-ai-rgb)', | ||
requirements: [ | ||
li('Interest in artificial intelligence'), | ||
li('Interest in public speaking/leading events'), | ||
li('Passion for guiding AI related student projects'), | ||
], | ||
tools: ['Google Drive/Docs', 'Discord', 'Google Colab/Juptyer Notebook'], | ||
responsibilities: [ | ||
li('Attend AI board meetings and collaborate with other AI board members for workshops'), | ||
li( | ||
'Create biweekly/weekly workshop presentations prior to events that effectively teach students algorithms/data structures', | ||
[li('Suggest new ideas/topics to teach at a workshop')] | ||
), | ||
li('Oversee multiple AI semester projects'), | ||
li('Check Discord messages and respond to the important discussion in regards to AI daily'), | ||
], | ||
}, | ||
{ | ||
title: 'Algo Officer', | ||
teamColor: 'var(--acm-algo-rgb)', | ||
requirements: [ | ||
li('Passion for algorithms'), | ||
li('Productive time management'), | ||
li('Interest in public speaking and leading events'), | ||
], | ||
tools: ['Google Drive/Docs', 'Discord'], | ||
responsibilities: [ | ||
li( | ||
'Attend Algo board meetings and collaborate with other Algo board members for Algo workshops' | ||
), | ||
li( | ||
'Create weekly workshop presentations prior to events that effectively teach students algorithms/data structures' | ||
), | ||
li('Check Discord messages and respond to the important discussion in regards to Algo daily'), | ||
], | ||
}, | ||
{ | ||
title: 'Design Officer', | ||
teamColor: 'var(--acm-design-rgb)', | ||
requirements: [ | ||
li('Open mind to suggest new ideas in the field of design'), | ||
li('Interest in learning and teaching common apps (ex. Figma)'), | ||
li('Interest in programming to create basic front-end applications'), | ||
], | ||
tools: ['Google Drive/Docs', 'Discord', 'Figma'], | ||
responsibilities: [ | ||
li( | ||
'Host engaging and interesting biweekly/weekly events along with the Design President and Officers' | ||
), | ||
li( | ||
'Research common design practices in tech and brands to relay this information via workshops and events, and to enhance our chapter' | ||
), | ||
li('Attend weekly team meetings to catch up on what’s being worked on, progress, etc.'), | ||
li( | ||
'Check Discord messages and respond to the important discussion in regards to Design at least daily' | ||
), | ||
], | ||
}, | ||
{ | ||
title: 'Dev Officer', | ||
teamColor: 'var(--acm-dev-rgb)', | ||
requirements: [ | ||
li('Passion for helping students develop projects'), | ||
li('Strong communication and leadership'), | ||
li('Flexibility with skills to assist students in a variety of projects'), | ||
], | ||
tools: ['Google Drive/Docs', 'Discord', 'GitHub'], | ||
responsibilities: [ | ||
li( | ||
'Attend Dev board meetings, provide essential input and collaborate with the Dev President and other officers' | ||
), | ||
li('Oversee multiple Dev semester projects'), | ||
li('Assist and direct students in ACM Open Source Projects'), | ||
li( | ||
'Possibility of being tasked to collaborate and participate in events created in partnerships with other ACM branches', | ||
[ | ||
li( | ||
'These can include creating and presenting workshops on behalf of Dev or organizing an collab event' | ||
), | ||
] | ||
), | ||
li( | ||
'Check Discord messages and respond to the important discussion in regards to Dev at least daily' | ||
), | ||
], | ||
}, | ||
{ | ||
title: 'Game Dev Officer', | ||
teamColor: 'var(--acm-foundry-rgb)', | ||
requirements: [ | ||
li('Passion and interest in game development'), | ||
li('Strong communication and leadership'), | ||
li('Flexibility with skills to assist students in a variety of projects'), | ||
], | ||
tools: ['Google Drive/Docs', 'Discord', 'GitHub'], | ||
responsibilities: [ | ||
li( | ||
'Attend Game Dev board meetings, provide essential input and collaborate with the Game Dev President and other officers' | ||
), | ||
li('Assist and direct students in Game Dev related projects'), | ||
li( | ||
'Host engaging and interesting biweekly/weekly workshops along with the Design President and Officers' | ||
), | ||
li( | ||
'Research common game dev techniques to relay this information via workshops and events, and to enhance our chapter' | ||
), | ||
li( | ||
'Check Discord messages and respond to the important discussion in regards to Dev at least daily' | ||
), | ||
], | ||
}, | ||
{ | ||
title: 'Marketing Officer', | ||
teamColor: 'var(--acm-marketing-rgb)', | ||
requirements: [ | ||
li('Interest in exploring business and marketing'), | ||
li('Substantial awareness or usage of multiple social media platforms'), | ||
li('Represent and advocate diversity within the club'), | ||
], | ||
tools: ['Google Drive/Docs', 'Discord', 'GitHub'], | ||
responsibilities: [ | ||
li( | ||
'Assist in designing flyers for marketing to be printed and posted on all forms of social media' | ||
), | ||
li('Suggest and direct new ideas for the diversification of our club '), | ||
li('Take pictures of our members to add to our socials and website gallery'), | ||
li('Produce paragraphs for the announcements in our official Discord server'), | ||
], | ||
}, | ||
]; |
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,8 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
test.describe.configure({ mode: 'parallel' }); | ||
|
||
test('s23positions page has expected h1', async ({ page }) => { | ||
await page.goto('/s23positions'); | ||
expect(await page.textContent('h1')).toBe('Spring 2023 board applications'); | ||
}); |
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,13 @@ | ||
<script lang="ts"> | ||
import Position from './position.svelte'; | ||
import type { ClubPosition } from './position'; | ||
import type { TOOLS } from './data'; | ||
export let data: ClubPosition<keyof typeof TOOLS>[]; | ||
</script> | ||
|
||
{#each data as position} | ||
<Position data={position} /> | ||
{:else} | ||
<p>There are no open positions at this time.</p> | ||
{/each} |
Oops, something went wrong.