Shapes Background #164

Merged
a258wang merged 33 commits from feat/shapes-background into main 2021-08-27 01:45:16 -04:00
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 2021-08-20 01:35:11 -04:00
a258wang added 3 commits 2021-08-22 16:29:46 -04:00
a3thakra reviewed 2021-08-22 21:08:39 -04:00
pages/index.tsx Outdated
@ -93,2 +94,4 @@
return <div className={styles.page}>{props.children}</div>;
};
Home.getShapesConfig = (() => {
Owner

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 2021-08-23 11:49:20 -04:00
a3thakra reviewed 2021-08-23 13:54:24 -04:00
@ -22,0 +29,4 @@
if (window.innerWidth <= 768) {
return mobileShapesConfig;
}
return aboutShapesConfig;
Owner

return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig

`return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig`
a258wang added 6 commits 2021-08-23 15:55:14 -04:00
continuous-integration/drone/push Build is passing Details
41fdadb229
Add decoration to the bubble component (#152)
Closes #87

Co-authored-by: l42luo <l42luo@localhost>
Co-authored-by: Linna Luo <linnaluo18@gmail.com>
Reviewed-on: #152
Reviewed-by: l42luo <l42luo@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passing Details
d1e6c89a0b
Create the constitution page (#165)
Closes #11
Closes #98

Reviewed-on: #165
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
continuous-integration/drone/push Build is passing Details
a8cae99c11
Meet the Team page (#94)
Includes mobile Team Member Card

Closes #9
Closes #42

Co-authored-by: Bonnie <bonniepeng2002@gmail.com>
Reviewed-on: #94
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: b38peng <b38peng@uwaterloo.ca>
Co-committed-by: b38peng <b38peng@uwaterloo.ca>
a258wang added 7 commits 2021-08-26 01:12:41 -04:00
a258wang added 1 commit 2021-08-26 01:22:18 -04:00
continuous-integration/drone/push Build is passing Details
0a0f803ccf
Revert back to rems for vertical offset
a3thakra reviewed 2021-08-26 13:08:39 -04:00
@ -0,0 +155,4 @@
minAngle: 15,
maxAngle: 26,
},
triangleBig: {
Owner

Why is it not just triangle? Same for waves.

Why is it not just `triangle`? Same for waves.
Author
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 2021-08-26 13:12:29 -04:00
@ -0,0 +208,4 @@
const colour = getRandomColour();
const opacity = getRandomOpacity(colour);
defaultConfig[shape]?.push({
Owner

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 2021-08-26 16:00:11 -04:00
continuous-integration/drone/push Build is passing Details
711152c428
Tweak shape placement and generation
a258wang added 2 commits 2021-08-26 16:15:52 -04:00
a258wang added 2 commits 2021-08-26 21:21:33 -04:00
a258wang changed title from WIP: Shapes Background to Shapes Background 2021-08-26 21:22:12 -04:00
a258wang added 2 commits 2021-08-26 21:31:47 -04:00
a3thakra reviewed 2021-08-26 22:35:20 -04:00
@ -0,0 +271,4 @@
}
function getRandomOpacity(colour: "blue" | "teal"): number {
if (colour == "blue") {
Owner

===

===
a3thakra approved these changes 2021-08-26 22:37:36 -04:00
a258wang added 1 commit 2021-08-26 23:17:13 -04:00
continuous-integration/drone/push Build is passing Details
9574952d15
Fix equals sign typo
a258wang merged commit 0b05915342 into main 2021-08-27 01:45:16 -04:00
a258wang referenced this issue from a commit 2021-08-27 01:45:16 -04:00
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#164
No description provided.