From 41fdadb229cb165ec16b647a010b0d794a3a1e12 Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Sun, 22 Aug 2021 22:40:54 -0400 Subject: [PATCH 1/3] Add decoration to the bubble component (#152) Closes #87 Co-authored-by: l42luo Co-authored-by: Linna Luo Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/152 Reviewed-by: l42luo Co-authored-by: Aditya Thakral Co-committed-by: Aditya Thakral --- components/Bubble.module.css | 68 ++++++++++++++++++++++++++++- components/Bubble.tsx | 15 ++++++- pages/about/index.module.css | 2 +- public/images/bubble-decoration.svg | 5 +++ 4 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 public/images/bubble-decoration.svg diff --git a/components/Bubble.module.css b/components/Bubble.module.css index a7f3b645..638c93b7 100644 --- a/components/Bubble.module.css +++ b/components/Bubble.module.css @@ -1,7 +1,71 @@ -.bubble { +.container { + position: relative; padding: calc(36rem / 16) 0; + overflow-x: clip; } -.bubble:nth-child(odd) { +.bubble { + --border-radius: calc(5000rem / 16); + + display: flex; + flex-direction: row; + position: absolute; + top: 0; + height: 100%; + width: 100%; + justify-content: center; + align-items: flex-start; +} + +.bar { + height: 100%; + width: 100%; +} + +.decoration { + display: none; + width: calc(128rem / 16); +} + +.margin { + display: none; +} + +.content { + position: relative; + z-index: 1; +} + +.container:nth-child(odd) .bar { background-color: var(--primary-accent-light); } + +@media only screen and (min-width: calc(1350rem / 16)) { + .container:nth-child(odd) .decoration { + display: block; + position: absolute; + } + + .container:nth-child(4n + 1) .bar { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + transform: translateX(-12.5vw); + } + + .container:nth-child(4n + 1) .decoration { + top: calc(-50rem / 16); + right: 8vw; + } + + .container:nth-child(4n + 3) .bar { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + transform: translateX(12.5vw); + } + + .container:nth-child(4n + 3) .decoration { + top: calc(-50rem / 16); + left: 8vw; + transform: rotateY(180deg); + } +} diff --git a/components/Bubble.tsx b/components/Bubble.tsx index 746ee896..da86dc3d 100644 --- a/components/Bubble.tsx +++ b/components/Bubble.tsx @@ -1,13 +1,24 @@ import React from "react"; +import { Image } from "@/components/Image"; + import { DefaultLayout } from "./DefaultLayout"; import styles from "./Bubble.module.css"; export default function Bubble(props: { children: React.ReactNode }) { return ( -
- {props.children} +
+
+
+ +
+
+ {props.children} +
); } diff --git a/pages/about/index.module.css b/pages/about/index.module.css index c3fc0309..2bcd8b39 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -1,5 +1,5 @@ .page { - margin-bottom: calc(20rem / 16); + margin-bottom: calc(60rem / 16); } .title { diff --git a/public/images/bubble-decoration.svg b/public/images/bubble-decoration.svg new file mode 100644 index 00000000..4c3efe69 --- /dev/null +++ b/public/images/bubble-decoration.svg @@ -0,0 +1,5 @@ + + + + + From d1e6c89a0b08b9019d31958face266d49159a181 Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Mon, 23 Aug 2021 09:27:59 -0400 Subject: [PATCH 2/3] Create the constitution page (#165) Closes #11 Closes #98 Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/165 Co-authored-by: Aditya Thakral Co-committed-by: Aditya Thakral --- .vscode/settings.json | 6 +- components/OrganizedContent.module.css | 42 ++++-- components/OrganizedContent.tsx | 123 ++++++++++++------ components/OrganizedContent/Header.module.css | 37 ++++++ components/OrganizedContent/Header.tsx | 23 ++++ components/OrganizedContent/ReadAll.tsx | 61 +++++++++ components/OrganizedContent/Section.tsx | 46 +++++++ components/OrganizedContent/static.ts | 69 ++++++++++ components/playground.tsx | 28 +++- .../code-of-conduct/additional-information.md | 8 ++ .../code-of-conduct/addressing-grievances.md | 9 ++ .../about/code-of-conduct/confidentiality.md | 13 ++ ...consequences-of-inappropriate-behaviour.md | 13 ++ .../code-of-conduct/contact-information.md | 6 + .../code-of-conduct/expected-behaviour.md | 10 ++ .../experiencing-unacceptable-behaviour.md | 19 +++ .../license-information-and-attribution.md | 6 + content/about/code-of-conduct/purpose.md | 13 ++ content/about/code-of-conduct/revision.md | 6 + .../about/code-of-conduct/scope-and-spaces.md | 12 ++ .../code-of-conduct/unacceptable-behaviour.md | 16 +++ .../constitution/amendments-and-procedures.md | 10 ++ content/about/constitution/code-of-conduct.md | 8 ++ content/about/constitution/committees.md | 27 ++++ content/about/constitution/dissolution.md | 6 + .../about/constitution/duties-of-officers.md | 27 ++++ .../about/constitution/executive-council.md | 10 ++ content/about/constitution/finances.md | 9 ++ content/about/constitution/meetings.md | 13 ++ content/about/constitution/membership.md | 10 ++ content/about/constitution/name.md | 6 + content/about/constitution/officers.md | 30 +++++ content/about/constitution/purpose.md | 10 ++ content/about/constitution/revision.md | 6 + .../constitution/use-of-club-resources.md | 10 ++ lib/organized-content.ts | 40 ++++++ pages/about/code-of-conduct.mdx | 1 - pages/about/code-of-conduct.tsx | 14 ++ pages/about/code-of-conduct/[section].tsx | 16 +++ pages/about/constitution.mdx | 1 - pages/about/constitution.tsx | 14 ++ pages/about/constitution/[section].tsx | 16 +++ public/images/code-of-conduct.svg | 9 ++ public/images/constitution.svg | 43 ++++++ 44 files changed, 848 insertions(+), 54 deletions(-) create mode 100644 components/OrganizedContent/Header.module.css create mode 100644 components/OrganizedContent/Header.tsx create mode 100644 components/OrganizedContent/ReadAll.tsx create mode 100644 components/OrganizedContent/Section.tsx create mode 100644 components/OrganizedContent/static.ts create mode 100644 content/about/code-of-conduct/additional-information.md create mode 100644 content/about/code-of-conduct/addressing-grievances.md create mode 100644 content/about/code-of-conduct/confidentiality.md create mode 100644 content/about/code-of-conduct/consequences-of-inappropriate-behaviour.md create mode 100644 content/about/code-of-conduct/contact-information.md create mode 100644 content/about/code-of-conduct/expected-behaviour.md create mode 100644 content/about/code-of-conduct/experiencing-unacceptable-behaviour.md create mode 100644 content/about/code-of-conduct/license-information-and-attribution.md create mode 100644 content/about/code-of-conduct/purpose.md create mode 100644 content/about/code-of-conduct/revision.md create mode 100644 content/about/code-of-conduct/scope-and-spaces.md create mode 100644 content/about/code-of-conduct/unacceptable-behaviour.md create mode 100644 content/about/constitution/amendments-and-procedures.md create mode 100644 content/about/constitution/code-of-conduct.md create mode 100644 content/about/constitution/committees.md create mode 100644 content/about/constitution/dissolution.md create mode 100644 content/about/constitution/duties-of-officers.md create mode 100644 content/about/constitution/executive-council.md create mode 100644 content/about/constitution/finances.md create mode 100644 content/about/constitution/meetings.md create mode 100644 content/about/constitution/membership.md create mode 100644 content/about/constitution/name.md create mode 100644 content/about/constitution/officers.md create mode 100644 content/about/constitution/purpose.md create mode 100644 content/about/constitution/revision.md create mode 100644 content/about/constitution/use-of-club-resources.md create mode 100644 lib/organized-content.ts delete mode 100644 pages/about/code-of-conduct.mdx create mode 100644 pages/about/code-of-conduct.tsx create mode 100644 pages/about/code-of-conduct/[section].tsx delete mode 100644 pages/about/constitution.mdx create mode 100644 pages/about/constitution.tsx create mode 100644 pages/about/constitution/[section].tsx create mode 100644 public/images/code-of-conduct.svg create mode 100644 public/images/constitution.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 68d9b3b3..ac678f36 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -38,5 +38,9 @@ "files.exclude": { "node_modules": true }, - "editor.tabSize": 2 + "editor.tabSize": 2, + "[markdown]": { + "editor.wordWrap": "on", + "editor.quickSuggestions": false + } } \ No newline at end of file diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css index 8c5dc5bb..b7bbe06f 100644 --- a/components/OrganizedContent.module.css +++ b/components/OrganizedContent.module.css @@ -2,20 +2,28 @@ display: flex; } -.wrapper h1 { - margin: 1rem 0; - font-size: calc(24rem / 16); - font-weight: 600; - color: var(--primary-accent); -} - .content { display: flex; flex-direction: column; width: 100%; } +.content h1 { + font-size: calc(24rem / 16); + color: var(--primary-accent); +} + +.content h2, +.content h3 { + font-size: calc(18rem / 16); + margin-top: calc(24rem / 16); + margin-bottom: calc(16rem / 16); +} + .nav { + top: calc(20rem / 16); + position: sticky; + height: 100%; margin: calc(8rem / 16) calc(32rem / 16) 0 0; color: var(--primary-heading); font-weight: 500; @@ -29,7 +37,7 @@ border-bottom: calc(1rem / 16) solid var(--primary-accent-light); align-items: center; height: calc(40rem / 16); - width: calc(284rem / 16); + width: calc(200rem / 16); padding: 0 calc(14rem / 16); cursor: pointer; } @@ -110,7 +118,25 @@ padding-left: calc(8rem / 16); } +.link, +.link:visited { + color: inherit; + text-decoration: none; +} + @media only screen and (max-width: calc(768rem / 16)) { + .content h1 { + font-size: calc(18rem / 16); + } + + .content h2, + .content h3, + .content h4 { + font-size: calc(18rem / 16); + margin-top: calc(24rem / 16); + margin-bottom: calc(8rem / 16); + } + .nav { display: none; } diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx index 6d18db4c..2a490397 100644 --- a/components/OrganizedContent.tsx +++ b/components/OrganizedContent.tsx @@ -1,19 +1,13 @@ +import NextLink from "next/link"; import React, { ReactNode, ComponentType } from "react"; import styles from "./OrganizedContent.module.css"; -export interface LinkProps { - className?: string; - id: string; - children: ReactNode; -} - type Link = ComponentType; interface Section { id: string; title: string; - Content: ComponentType; } const READ_ALL_TITLE = "Read All"; @@ -21,16 +15,23 @@ export const READ_ALL_ID = "read-all"; interface Props { sections: Section[]; - currentId: string; + id: string; + children: ReactNode; link: Link; } -export function OrganizedContent(props: Props) { - const sections = createSections(props.sections); - const currentIndex = sections.findIndex(({ id }) => id === props.currentId); +export function OrganizedContent({ + sections, + id, + children, + link: Link, +}: Props) { + const currentIndex = sections.findIndex( + ({ id: sectionId }) => sectionId === id + ); if (currentIndex < 0) { - throw new Error(`Section with ID ${props.currentId} was not found`); + throw new Error(`Section with ID ${id} was not found`); } const section = sections[currentIndex]; @@ -38,20 +39,20 @@ export function OrganizedContent(props: Props) { return (
-