ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS animation for toasts and offcanvas (#1432) 

* CSS animation for toasts

* Smaller toasts

* CSS animation for offcanvas

* faster animations and toast from the bottom

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
ekzyis 2024-09-24 20:43:15 +02:00 committed by GitHub
parent d7667f7820
commit 1641b58e55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/nav/mobile/offcanvas.js
View File

@ -5,6 +5,7 @@ import Link from 'next/link'
import { LoginButtons, LogoutDropdownItem, NavWalletSummary } from '../common'
import AnonIcon from '@/svgs/spy-fill.svg'
import styles from './footer.module.css'
import canvasStyles from './offcanvas.module.css'
import classNames from 'classnames'
export default function OffCanvas ({ me, dropNavKey }) {
@ -28,7 +29,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
<>
<MeImage onClick={handleShow} />
<Offcanvas style={{ maxWidth: '250px', zIndex: '10000' }} show={show} onHide={handleClose} placement='end'>
<Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
<Offcanvas.Header closeButton>
<Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
</Offcanvas.Header>

15
components/nav/mobile/offcanvas.module.css Normal file
View File

@ -0,0 +1,15 @@
.offcanvas {
max-width: 250px;
z-index: 10000;
right: -100%;
animation: slide ease-out 0.2s;
}
@keyframes slide {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%)
}
}

22
components/toast.module.css
View File

@ -1,13 +1,27 @@
.toastContainer {
transform: translate3d(0, 0, 0);
display: grid;
}
.toast {
width: auto;
font-size: small;
width: fit-content;
justify-self: right;
color: #fff;
bottom: -100%;
border-width: 1px;
border-style: solid;
text-overflow: ellipsis;
animation: slide ease-out 0.2s;
}
@keyframes slide {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%)
}
}
.success {
@ -70,9 +84,3 @@
.toastClose:hover {
opacity: 0.7;
}
@media screen and (min-width: 400px) {
.toast {
width: var(--bs-toast-max-width);
}
}