add close button reader
This commit is contained in:
@@ -4,6 +4,8 @@ import {useEffect} from "react";
|
|||||||
import {AnimateFade, AnimateTemplate} from "../animations";
|
import {AnimateFade, AnimateTemplate} from "../animations";
|
||||||
import "./reader.sass";
|
import "./reader.sass";
|
||||||
import {ExternalLink} from "../router/Link";
|
import {ExternalLink} from "../router/Link";
|
||||||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
|
import {faClose} from "@fortawesome/free-solid-svg-icons/faClose";
|
||||||
|
|
||||||
const READER : AnimateTemplate = AnimateFade();
|
const READER : AnimateTemplate = AnimateFade();
|
||||||
|
|
||||||
@@ -21,7 +23,7 @@ export function Reader() {
|
|||||||
|
|
||||||
function handleClose() {
|
function handleClose() {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
animate(".reader", READER.initial),
|
animate(".reader", READER.initial)
|
||||||
]
|
]
|
||||||
).then(() => setPost(undefined));
|
).then(() => setPost(undefined));
|
||||||
}
|
}
|
||||||
@@ -34,6 +36,9 @@ export function Reader() {
|
|||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
className="reader link">
|
className="reader link">
|
||||||
<article onClick={e => e.stopPropagation()}>
|
<article onClick={e => e.stopPropagation()}>
|
||||||
|
<button onClick={handleClose} className="link reader-close">
|
||||||
|
<FontAwesomeIcon icon={faClose} />
|
||||||
|
</button>
|
||||||
<post.article components={{
|
<post.article components={{
|
||||||
'a': ExternalLink
|
'a': ExternalLink
|
||||||
}}/>
|
}}/>
|
||||||
|
|||||||
@@ -41,3 +41,12 @@
|
|||||||
|
|
||||||
.row>*
|
.row>*
|
||||||
width: 50%
|
width: 50%
|
||||||
|
|
||||||
|
.reader-close
|
||||||
|
position: absolute
|
||||||
|
align-self: flex-end
|
||||||
|
font-size: large
|
||||||
|
font-weight: bold
|
||||||
|
color: red !important
|
||||||
|
background: white
|
||||||
|
border-radius: 15px
|
||||||
Reference in New Issue
Block a user