www
/
www-new
18
3
Fork 9
Code Issues 62 Pull Requests 48 Projects Releases Wiki Activity

Shapes Background #164

Merged
a258wang merged 33 commits from feat/shapes-background into main 2021-08-27 01:45:16 -04:00
Conversation 0 Commits 33 Files Changed 23 +824 -10
a258wang commented 2021-08-20 01:35:10 -04:00
Owner
Copy Link

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
continuous-integration/drone/push Build is passing Details
c2e6078dff Add shapes background to mobile home page
a258wang added 3 commits 2021-08-22 16:29:46 -04:00
continuous-integration/drone/push Build is passing Details
ef3c8d2eac Use useWindowDimension hook in shapes background
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 = (() => {
a3thakra commented 2021-08-22 21:08:39 -04:00
Owner
Copy Link

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
continuous-integration/drone/push Build is passing Details
5c283ef979 Add get involved page shapes background
a3thakra reviewed 2021-08-23 13:54:24 -04:00
pages/about/our-supporters.tsx Outdated
@ -22,0 +29,4 @@
if (window.innerWidth <= 768) {
return mobileShapesConfig;
}
return aboutShapesConfig;
a3thakra commented 2021-08-23 13:54:24 -04:00
Owner
Copy Link

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
continuous-integration/drone/push Build is passing Details
4e66628fb6 Change rem to vh/vw and clean up shapesBySize
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
components/ShapesBackground.tsx
@ -0,0 +155,4 @@
minAngle: 15,
maxAngle: 26,
},
triangleBig: {
a3thakra commented 2021-08-26 13:08:39 -04:00
Owner
Copy Link

Why is it not just triangle? Same for waves.

Why is it not just `triangle`? Same for waves.
a258wang commented 2021-08-26 14:06:18 -04:00
Author
Owner
Copy Link

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
components/ShapesBackground.tsx Outdated
@ -0,0 +208,4 @@
const colour = getRandomColour();
const opacity = getRandomOpacity(colour);
defaultConfig[shape]?.push({
a3thakra commented 2021-08-26 13:12:29 -04:00
Owner
Copy Link

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
continuous-integration/drone/push Build is passing Details
d9c920bea0 Allow big shapes to generate partially offscreen
a258wang added 2 commits 2021-08-26 21:21:33 -04:00
continuous-integration/drone/push Build is passing Details
ff98395d9b Remove hardcoded shapes backgrounds
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
continuous-integration/drone/push Build is passing Details
392ff923ed Change news archive shapes background
a3thakra reviewed 2021-08-26 22:35:20 -04:00
components/ShapesBackground.tsx Outdated
@ -0,0 +271,4 @@
}
function getRandomOpacity(colour: "blue" | "teal"): number {
if (colour == "blue") {
a3thakra commented 2021-08-26 22:35:19 -04:00
Owner
Copy Link

===

===
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
Shapes Background (#164)
Sign in to join this conversation.
Reviewers
No reviewers
a3thakra
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
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
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.
Delete Branch "feat/shapes-background"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?