Navigation and Bottomsheet #247
Conversation
# Conflicts: # pnpm-lock.yaml
| @keyframes fadeIn { | ||
| from { | ||
| background-color: transparent; | ||
| } | ||
| to { | ||
| background-color: var(--color-overlay-scrim-weak, rgba(25, 25, 28, 40%)); | ||
| } | ||
| } | ||
| @keyframes fadeOut { | ||
| from { | ||
| background-color: var(--color-overlay-scrim-weak, rgba(25, 25, 28, 40%)); | ||
| } | ||
| to { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideIn { | ||
| from { | ||
| bottom: calc(-1 * var(--base-36)); | ||
| opacity: 0; | ||
| } | ||
| to { | ||
| bottom: var(--base-36); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideOut { | ||
| from { | ||
| bottom: var(--base-36); | ||
| opacity: 1; | ||
| } | ||
| to { | ||
| bottom: calc(-1 * var(--base-36)); | ||
| opacity: 0; | ||
| } | ||
| } |
There was a problem hiding this comment.
We might be able to simplify some of the CSS by using svelte transitions 🤔
https://v4.svelte.dev/docs/svelte-transition
| width: 100vw; | ||
| height: 100vh; |
There was a problem hiding this comment.
Might be worth using dvh and dvw to account for mobile browsers
There was a problem hiding this comment.
I think it might make sense to use the native html dialog element right?
There was a problem hiding this comment.
makes sense yes! Adjusted!
There was a problem hiding this comment.
@ernstmul we can also replace the overlay, the native dialog element has the a pseudo-element that you can target with ::backdrop
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
There was a problem hiding this comment.
This has more work to it than anticipated. In order to get the dialog backdrop, the showModal function needs to be used. This has more effect on the look and animations than just replacing a backdrop div. Discussed to keep this for now.
| </Input.Text> | ||
| </div> | ||
| {/if} | ||
| <img src={avatar} alt={'Avatar'} class="avatar" /> |
There was a problem hiding this comment.
The avatar is not going to be clickable, is that the intended behaviour?
There was a problem hiding this comment.
There is no click defined in the design for this one. So at this point there is no action behind it :)
| {#if resizable} | ||
| <button | ||
| class="collapse" | ||
| class:icons={state === 'icons'} | ||
| on:click={() => { | ||
| state = state === 'icons' ? 'open' : 'icons'; | ||
| }} | ||
| > | ||
| <div class="lines-container"> | ||
| <div class="icon icon-idle minus-icon"><Icon icon={IconMinus} /></div> | ||
| <div class="icon icon-hover"> | ||
| <Icon icon={state === 'icons' ? IconChevronRight : IconChevronLeft} /> | ||
| </div> | ||
| </div> | ||
| <div class="badge"> | ||
| <Badge | ||
| size="xs" | ||
| variant="primary" | ||
| content={state === 'icons' ? 'Expand' : 'Collapse'} | ||
| /> | ||
| </div> | ||
| </button> | ||
| {/if} |
There was a problem hiding this comment.
I'm still seeing the scroll bars
There was a problem hiding this comment.
In none of my browsers on MacOS I get this behaviour. I think i've spotted what is causing it. Added a fix, but need you to confirm it actually works 😅
There was a problem hiding this comment.
Still not sure if this should be in Pink... how do we plan to support these states?
There was a problem hiding this comment.
Agreed to discuss with Caio and Sara
What does this PR do?
Adds new navigation:
And bottom sheet:
Have you read the Contributing Guidelines on issues?
Yes