www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Add Bottom Navigation #64

Merged
snedadah merged 23 commits from b72zhou-nav-bottom into main 2022-10-05 21:07:50 -04:00
Conversation 0 Commits 23 Files Changed 6 +1208 -1
b72zhou commented 2022-09-20 16:08:07 -04:00
Contributor
Copy Link

https://b72zhou-nav-bottom-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/

https://b72zhou-nav-bottom-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/
b72zhou added 6 commits 2022-09-20 16:08:08 -04:00
continuous-integration/drone/push Build is failing Details
e7131529e3 add bottom nav
b72zhou added 1 commit 2022-09-20 16:14:00 -04:00
continuous-integration/drone/push Build is passing Details
f802dbfd8e resolve lint
b72zhou added 1 commit 2022-09-20 16:15:05 -04:00
continuous-integration/drone/push Build is passing Details
4b968ea89e Merge branch 'main' into b72zhou-nav-bottom
b72zhou requested review from j285he 2022-09-20 16:22:10 -04:00
b72zhou requested review from snedadah 2022-09-20 16:22:10 -04:00
b72zhou requested review from e26chiu 2022-09-20 16:22:10 -04:00
snedadah reviewed 2022-09-21 11:25:03 -04:00
components/BottomNav.module.css Outdated
@ -0,0 +27,4 @@
transition: transform 0.25s ease-out;
}
.item:hover:after {
snedadah commented 2022-09-21 11:12:57 -04:00
Owner
Copy Link

Nice animation!

Nice animation!
❤️ 1
b72zhou marked this conversation as resolved
components/BottomNav.tsx Outdated
@ -0,0 +11,4 @@
export function BottomNav(props: PageLinks) {
return (
<div className={styles.container}>
<Arrow isPointRight={true}></Arrow>
snedadah commented 2022-09-21 11:13:25 -04:00
Owner
Copy Link

I think we should also move both arrows inside their respectives Links so that they are clickable.

Furthermore, I feel that the arrow and the text are a bit far away, is it possible to match the spacing on figma a bit better? Specefifically to have the arrow and the text be close to each other, and more out to the side.

(You may want to try adding align-self: flex-start and align-self: flex-end to the leftNavGroup) instead of justify-content: space-around; on the parent element

I think it will be easier once they are both in the same root element, something like:

    <Link href={props.leftPage} className={styles.leftNavGroup}>
        <a className={styles.item}>View Co-ops</a>
           <Link href={props.leftPage}>
         <Arrow isPointRight={false}></Arrow>
      </Link>

I think we should also move both arrows inside their respectives Links so that they are clickable. Furthermore, I feel that the arrow and the text are a bit far away, is it possible to match the spacing on figma a bit better? Specefifically to have the arrow and the text be close to each other, and more out to the side. (You may want to try adding align-self: flex-start and align-self: flex-end to the leftNavGroup) instead of justify-content: space-around; on the parent element I think it will be easier once they are both in the same root element, something like: ``` <Link href={props.leftPage} className={styles.leftNavGroup}> <a className={styles.item}>View Co-ops</a> <Link href={props.leftPage}> <Arrow isPointRight={false}></Arrow> </Link> ``` ![](https://i.postimg.cc/43WTG0LK/image.png)
b72zhou commented 2022-09-27 19:47:57 -04:00
Author
Contributor
Copy Link

@snedadah I adjusted it a bit, could you please take a look? :)

@snedadah I adjusted it a bit, could you please take a look? :)
👍 1
b72zhou marked this conversation as resolved
pages/playground.tsx Outdated
@ -168,2 +169,4 @@
/>
</div>
<h2></h2>
snedadah commented 2022-09-21 11:24:29 -04:00
Owner
Copy Link

is this here by accident :) ?

is this here by accident :) ?
😆 1
b72zhou marked this conversation as resolved
b72zhou added 1 commit 2022-09-27 19:47:29 -04:00
continuous-integration/drone/push Build is passing Details
002b5ff18d adjust space
snedadah added 2 commits 2022-10-02 14:40:14 -04:00
continuous-integration/drone/push Build is passing Details
20277268b5
Further adjusted mobile styles
snedadah added 1 commit 2022-10-02 14:52:03 -04:00
continuous-integration/drone/push Build is passing Details
fe874cbd29
Added calc values
snedadah reviewed 2022-10-02 16:16:14 -04:00
components/BottomNav.tsx Outdated
@ -0,0 +18,4 @@
</a>
</Link>
<Link href={props.leftPage}>
<a className={styles.item}>Demographics</a>
snedadah commented 2022-10-02 14:40:52 -04:00
Owner
Copy Link

Could we please use a prop for this text instead of hardcoding it? (and the view co-ops text as well)

Could we please use a prop for this text instead of hardcoding it? (and the view co-ops text as well)
b72zhou marked this conversation as resolved
snedadah reviewed 2022-10-02 16:28:19 -04:00
components/BottomNav.tsx Outdated
@ -0,0 +14,4 @@
<div className={styles.subBox + " " + styles.subBoxLeft}>
<Link href={props.leftPage}>
<a>
<Arrow isPointRight={true}></Arrow>
snedadah commented 2022-10-02 16:18:06 -04:00
Owner
Copy Link

nit: you can just do
<Arrow isPointRight></Arrow>

nit: you can just do ` <Arrow isPointRight></Arrow>`
b72zhou marked this conversation as resolved
b72zhou added 1 commit 2022-10-02 22:47:08 -04:00
continuous-integration/drone/push Build is failing Details
0b2aee86ee modify props
b72zhou added 4 commits 2022-10-02 22:51:52 -04:00
continuous-integration/drone/push Build is failing Details
9ab2bec0d4 merge conflict
b72zhou added 1 commit 2022-10-02 22:53:57 -04:00
continuous-integration/drone/push Build is failing Details
a66bb7f82c fix import
b72zhou added 1 commit 2022-10-02 23:02:20 -04:00
continuous-integration/drone/push Build is passing Details
989eb9f7e2 fix sample page
snedadah added 1 commit 2022-10-05 12:54:26 -04:00
continuous-integration/drone/push Build is passing Details
9d420f8668
Updated demo text
snedadah added 1 commit 2022-10-05 13:06:02 -04:00
continuous-integration/drone/push Build is passing Details
0e40097b70
Removed not used style
snedadah added 1 commit 2022-10-05 13:59:18 -04:00
continuous-integration/drone/push Build is passing Details
c5e9b7f159
Fixed centering of arrow
snedadah approved these changes 2022-10-05 16:54:24 -04:00
snedadah left a comment
Owner
Copy Link

Nice work! Once again, I love that animation!

Nice work! Once again, I love that animation!
snedadah added 1 commit 2022-10-05 17:02:23 -04:00
continuous-integration/drone/push Build is passing Details
4c977ad65d
Fixed arrow naming
snedadah merged commit fc2bf48706 into main 2022-10-05 21:07:50 -04:00
snedadah deleted branch b72zhou-nav-bottom 2022-10-05 21:07:50 -04:00
Sign in to join this conversation.
Reviewers
No reviewers
j285he
e26chiu
snedadah
Labels
Clear labels   
Bug

   
Component

   
Config

   
Good First Issue

   
Low-Priority

   
Page
No Label
Bug
Component
Config
Good First Issue
Low-Priority
Page
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/cs-2022-class-profile#64
No description provided.
Delete Branch "b72zhou-nav-bottom"

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?