discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

fix lightbox images layering for icons (#338)

Browse Source 
* fix lightbox images layering for icons

* refactor icon data lightbox
This commit is contained in:
Arkadzi Rakouski 2023-12-18 16:47:34 +03:00 committed by GitHub
parent c1356d77aa
commit 88d35ce2bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/Article.module.scss
View File

@ -20,7 +20,7 @@ img {
} }
.articleContent { .articleContent {
img { img:not([data-disable-lightbox='true']) {
cursor: zoom-in; cursor: zoom-in;
} }
} }

2
src/components/Article/FullArticle.tsx
View File

@ -277,7 +277,7 @@ export const FullArticle = (props: Props) => {
} }
const handleArticleBodyClick = (event) => { const handleArticleBodyClick = (event) => {
if (event.target.tagName === 'IMG') { if (event.target.tagName === 'IMG' && !event.target.dataset['disableLightbox']) {
const src = event.target.src const src = event.target.src
openLightbox(getImageUrl(src)) openLightbox(getImageUrl(src))
} }

7
src/components/_shared/Icon/Icon.tsx
View File

@ -19,7 +19,12 @@ export const Icon = (passedProps: IconProps) => {
return ( return (
<div class={clsx('icon', styles.icon, props.class)} style={props.style}> <div class={clsx('icon', styles.icon, props.class)} style={props.style}>
<img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} /> <img
src={`/icons/${props.name}.svg`}
alt={props.title ?? props.name}
class={props.iconClassName}
data-disable-lightbox="true"
/>
<Show when={props.counter}> <Show when={props.counter}>
<div class={styles.notificationsCounter}>{props.counter}</div> <div class={styles.notificationsCounter}>{props.counter}</div>
</Show> </Show>