Shapes Background #164

Merged
a258wang merged 33 commits from feat/shapes-background into main 1 year ago
Owner

EDIT: We have decided to use randomly-generated shapes for most of the pages, instead of hard-coding the shapes backgrounds. The old to-do list of hard-coded backgrounds is retained for reference.

Closes #25

OLD TODO:

  • Home page - desktop
  • Home page - mobile
  • About Us - desktop
  • Meet the Team - desktop
  • Constitution, Code of Conduct, Our Supporters - desktop
  • Get Involved - desktop
  • "Upcoming" Events - desktop
  • Resources (Services, Tech Talks, Advice) - desktop
  • News/Events Archives - desktop
  • Mobile shapes backgrounds - almost every mobile page uses the same three shapes
    • mobile Home page is different
    • mobile "Upcoming" Events page has one less shape
    • mobile Events Archive [term].tsx has two less shapes
    • other mobile News/Events Archive pages have no shapes
  • White drop shadow for text in front of shapes?
EDIT: We have decided to use randomly-generated shapes for most of the pages, instead of hard-coding the shapes backgrounds. The old to-do list of hard-coded backgrounds is retained for reference. Closes #25 OLD TODO: - [x] Home page - desktop - [x] Home page - mobile - [X] About Us - desktop - [ ] Meet the Team - desktop - [X] Constitution, Code of Conduct, Our Supporters - desktop - [X] Get Involved - desktop - [ ] "Upcoming" Events - desktop - [ ] Resources (Services, Tech Talks, Advice) - desktop - [ ] News/Events Archives - desktop - [X] Mobile shapes backgrounds - almost every mobile page uses the same three shapes - mobile Home page is different - mobile "Upcoming" Events page has one less shape - mobile Events Archive \[term\].tsx has two less shapes - other mobile News/Events Archive pages have no shapes - [ ] White drop shadow for text in front of shapes?
a258wang added 7 commits 1 year ago
a258wang added 3 commits 1 year ago
a3thakra reviewed 1 year ago
pages/index.tsx Outdated
return <div className={styles.page}>{props.children}</div>;
};
Home.getShapesConfig = (() => {
Collaborator

This does not seem scalable at all :'( Can we try to make it less hardcoded? I think 200 lines of code just to define shapes is not worth it.

This does not seem scalable at all :'( Can we try to make it less hardcoded? I think 200 lines of code just to define shapes is not worth it.
a258wang added 4 commits 1 year ago
a3thakra reviewed 1 year ago
if (window.innerWidth <= 768) {
return mobileShapesConfig;
}
return aboutShapesConfig;
Collaborator

return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig

`return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig`
a258wang added 6 commits 1 year ago
41fdadb229 Add decoration to the bubble component (#152)
d1e6c89a0b Create the constitution page (#165)
a8cae99c11 Meet the Team page (#94)
a258wang added 7 commits 1 year ago
a258wang added 1 commit 1 year ago
0a0f803ccf Revert back to rems for vertical offset
a3thakra reviewed 1 year ago
minAngle: 15,
maxAngle: 26,
},
triangleBig: {
Collaborator

Why is it not just triangle? Same for waves.

Why is it not just `triangle`? Same for waves.
Poster
Owner

triangleBig is a different SVG file from the smaller triangle. Scaling triangle.svg up to be really big caused the lines to be too thick, so triangleBig.svg has thinner lines which allow it to be scaled up without looking out of place. Same with waves/wavesBig.

`triangleBig` is a different SVG file from the smaller `triangle`. Scaling `triangle.svg` up to be really big caused the lines to be too thick, so `triangleBig.svg` has thinner lines which allow it to be scaled up without looking out of place. Same with `waves`/`wavesBig`.
a3thakra marked this conversation as resolved
a3thakra reviewed 1 year ago
const colour = getRandomColour();
const opacity = getRandomOpacity(colour);
defaultConfig[shape]?.push({
Collaborator

nitpick:

defaultConfig[shape] ??= []
defaultConfig[shape].push(...)

and then you can remove shapeTypes.forEach((shape) => (defaultConfig[shape] = [])); on 189

nitpick: ```ts defaultConfig[shape] ??= [] defaultConfig[shape].push(...) ``` and then you can remove `shapeTypes.forEach((shape) => (defaultConfig[shape] = []));` on 189
a258wang added 1 commit 1 year ago
711152c428 Tweak shape placement and generation
a258wang added 2 commits 1 year ago
a258wang added 2 commits 1 year ago
a258wang changed title from WIP: Shapes Background to Shapes Background 1 year ago
a258wang added 2 commits 1 year ago
a3thakra reviewed 1 year ago
}
function getRandomOpacity(colour: "blue" | "teal"): number {
if (colour == "blue") {
Collaborator

===

===
a3thakra approved these changes 1 year ago
a258wang added 1 commit 1 year ago
9574952d15 Fix equals sign typo
a258wang merged commit 0b05915342 into main 1 year ago
a258wang referenced this issue from a commit 1 year ago

Reviewers

a3thakra approved these changes 1 year ago
continuous-integration/drone/push Build is passing
The pull request has been merged as 0b05915342.
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#164
Loading…
There is no content yet.