www
/
www-new
12
2
Fork 3
Code Issues 59 Pull Requests 31 Projects Releases Wiki Activity
Labels Milestones

Shapes Background #164

Merged
a258wang merged 33 commits from feat/shapes-background into main 1 year ago
Conversation 0 Commits 33 Files Changed 23
a258wang commented 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
continuous-integration/drone/push Build is passing
Details
c2e6078dff Add shapes background to mobile home page
a258wang added 3 commits 1 year ago
continuous-integration/drone/push Build is passing
Details
ef3c8d2eac Use useWindowDimension hook in shapes background
a3thakra reviewed 1 year ago
pages/index.tsx Outdated
return <div className={styles.page}>{props.children}</div>;
};
Home.getShapesConfig = (() => {
a3thakra commented 1 year ago
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
continuous-integration/drone/push Build is passing
Details
5c283ef979 Add get involved page shapes background
a3thakra reviewed 1 year ago
pages/about/our-supporters.tsx Outdated
if (window.innerWidth <= 768) {
return mobileShapesConfig;
}
return aboutShapesConfig;
a3thakra commented 1 year ago
Collaborator

return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig

`return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig`
a258wang added 6 commits 1 year ago
continuous-integration/drone/push Build is passing
Details
41fdadb229 Add decoration to the bubble component (#152)
continuous-integration/drone/push Build is passing
Details
d1e6c89a0b Create the constitution page (#165)
continuous-integration/drone/push Build is passing
Details
a8cae99c11 Meet the Team page (#94)
a258wang added 7 commits 1 year ago
continuous-integration/drone/push Build is passing
Details
4e66628fb6 Change rem to vh/vw and clean up shapesBySize
a258wang added 1 commit 1 year ago
continuous-integration/drone/push Build is passing
Details
0a0f803ccf Revert back to rems for vertical offset
a3thakra reviewed 1 year ago
components/ShapesBackground.tsx
minAngle: 15,
maxAngle: 26,
},
triangleBig: {
a3thakra commented 1 year ago
Collaborator

Why is it not just triangle? Same for waves.

Why is it not just `triangle`? Same for waves.
a258wang commented 1 year ago
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
components/ShapesBackground.tsx Outdated
const colour = getRandomColour();
const opacity = getRandomOpacity(colour);
defaultConfig[shape]?.push({
a3thakra commented 1 year ago
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
continuous-integration/drone/push Build is passing
Details
711152c428 Tweak shape placement and generation
a258wang added 2 commits 1 year ago
continuous-integration/drone/push Build is passing
Details
d9c920bea0 Allow big shapes to generate partially offscreen
a258wang added 2 commits 1 year ago
continuous-integration/drone/push Build is passing
Details
ff98395d9b Remove hardcoded shapes backgrounds
a258wang changed title from WIP: Shapes Background to Shapes Background 1 year ago
a258wang added 2 commits 1 year ago
continuous-integration/drone/push Build is passing
Details
392ff923ed Change news archive shapes background
a3thakra reviewed 1 year ago
components/ShapesBackground.tsx Outdated
}
function getRandomOpacity(colour: "blue" | "teal"): number {
if (colour == "blue") {
a3thakra commented 1 year ago
Collaborator

===

===
a3thakra approved these changes 1 year ago
a258wang added 1 commit 1 year ago
continuous-integration/drone/push Build is passing
Details
9574952d15 Fix equals sign typo
a258wang merged commit 0b05915342 into main 1 year ago
a258wang referenced this issue from a commit 1 year ago
Shapes Background (#164)

Reviewers

a3thakra approved these changes 1 year ago
continuous-integration/drone/push Build is passing
Details
The pull request has been merged as 0b05915342.
Sign in to join this conversation.
Reviewers
Request review
No reviewers
a3thakra
Labels
Apply labels
Clear labels
a11y Backlog Blocked Bug Content Dependencies Design Feature Request Good First Issue In Progress Performance Priority - High Priority - Low Priority - Medium Untriaged
No Label a11y Backlog Blocked Bug Content Dependencies Design Feature Request Good First Issue In Progress Performance Priority - High Priority - Low Priority - Medium Untriaged
Milestone
Set milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Assign users
Clear assignees
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#164
Write Preview
Loading…
Cancel
Save
There is no content yet.
Delete Branch 'feat/shapes-background'

Deleting a branch is permanent. It CANNOT be undone. Continue?

No
Yes