Update lightbox (#313)

update_lightbox

src/components/Article/Article.module.scss

@@ -23,22 +23,16 @@ img {
   }
 }
 
-.shoutCover {
-  background-size: cover;
-  height: 0;
-  padding-bottom: 56.2%;
+.articleContent {
+  img {
+    cursor: zoom-in;
+  }
 }
 
 .shoutBody {
   font-size: 1.6rem;
   line-height: 1.6;
 
-  img {
-    display: block;
-    margin-bottom: 0.5em;
-    cursor: zoom-in;
-  }
-
   blockquote,
   blockquote[data-type='punchline'] {
     clear: both;

src/components/Article/FullArticle.tsx

@@ -28,6 +28,7 @@ import { AuthorBadge } from '../Author/AuthorBadge'
 import { getImageUrl } from '../../utils/getImageUrl'
 import { FeedArticlePopup } from '../Feed/FeedArticlePopup'
 import { Lightbox } from '../_shared/Lightbox'
+import { Image } from '../_shared/Image'
 
 type Props = {
   article: Shout
@@ -252,7 +253,10 @@ export const FullArticle = (props: Props) => {
       <Title>{props.article.title}</Title>
       <div class="wide-container">
         <div class="row position-relative">
-          <article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
+          <article
+            class={clsx('col-md-16 col-lg-14 col-xl-12 offset-md-5', styles.articleContent)}
+            onClick={handleArticleBodyClick}
+          >
             {/*TODO: Check styles.shoutTopic*/}
             <Show when={props.article.layout !== 'music'}>
               <div class={styles.shoutHeader}>
@@ -282,12 +286,7 @@ export const FullArticle = (props: Props) => {
                     props.article.layout !== 'image'
                   }
                 >
-                  <div
-                    class={styles.shoutCover}
-                    style={{
-                      'background-image': `url('${getImageUrl(props.article.cover, { width: 1600 })}')`
-                    }}
-                  />
+                  <Image width={1600} alt={props.article.title} src={props.article.cover} />
                 </Show>
               </div>
             </Show>
@@ -328,7 +327,7 @@ export const FullArticle = (props: Props) => {
             </Show>
 
             <Show when={body()}>
-              <div id="shoutBody" class={styles.shoutBody} onClick={handleArticleBodyClick}>
+              <div id="shoutBody" class={styles.shoutBody}>
                 <Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}>
                   <MD body={body()} />
                 </Show>

src/components/_shared/Lightbox/Lightbox.module.scss

@@ -17,7 +17,8 @@
   }
 
   .close {
-    position: absolute;
+    position: fixed;
+    z-index: 1001;
     top: 20px;
     right: 40px;
     font-size: 30px;
@@ -29,12 +30,13 @@
 
   .zoomControls {
     display: flex;
-    position: absolute;
+    position: fixed;
     bottom: 16px;
     left: 50%;
     height: 24px;
     gap: 1rem;
     transform: translateX(-50%);
+    z-index: 1001;
 
     .control {
       border-radius: 50%;

src/components/_shared/Lightbox/Lightbox.tsx

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx'
 import styles from './Lightbox.module.scss'
-import { createSignal } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 import { Icon } from '../Icon'
+import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
 
 type Props = {
   class?: string
@@ -31,6 +32,8 @@ export const Lightbox = (props: Props) => {
     transition: 'transform 0.3s ease'
   })
 
+  useEscKeyDownHandler(closeLightbox)
+
   return (
     <div class={clsx(styles.Lightbox, props.class)} onClick={closeLightbox}>
       <span class={styles.close} onClick={closeLightbox}>
@@ -40,6 +43,9 @@ export const Lightbox = (props: Props) => {
         <button class={styles.control} onClick={(event) => zoomOut(event)}>
           <b>-</b>
         </button>
+        <button class={styles.control} onClick={() => setZoomLevel(1)}>
+          <b style={{ 'font-size': '10px' }}>1:1</b>
+        </button>
         <button class={styles.control} onClick={(event) => zoomIn(event)}>
           <b>+</b>
         </button>

src/pages/profile/Settings.module.scss

@@ -234,9 +234,12 @@ h5 {
   border: 1px solid var(--black-100);
   cursor: pointer;
 
-  img {
-    width: 100%;
+  .userpicImage {
+    width: 180px;
+    height: 180px;
     border-radius: 50%;
+    background-position: center;
+    background-size: contain;
   }
 
   &.hasControls {
@@ -254,6 +257,7 @@ h5 {
   .control {
     width: 40px;
     height: 40px;
+    padding: 10px;
     border-radius: 50%;
     background: var(--background-color);
     border: 1px solid var(--black-100);

src/pages/profile/profileSettings.page.tsx

@@ -24,6 +24,7 @@ import { Icon } from '../../components/_shared/Icon'
 import { Popover } from '../../components/_shared/Popover'
 import { Image } from '../../components/_shared/Image'
 import { Loading } from '../../components/_shared/Loading'
+import { getImageUrl } from '../../utils/getImageUrl'
 
 export const ProfileSettingsPage = () => {
   const { t } = useLocalize()
@@ -150,7 +151,15 @@ export const ProfileSettingsPage = () => {
                               <Loading />
                             </Match>
                             <Match when={form.userpic}>
-                              <Image width={180} alt={form.name} src={form.userpic} />
+                              <div
+                                class={styles.userpicImage}
+                                style={{
+                                  'background-image': `url(${getImageUrl(form.userpic, {
+                                    width: 180,
+                                    height: 180
+                                  })})`
+                                }}
+                              />
                               <div class={styles.controls}>
                                 <Popover content={t('Delete userpic')}>
                                   {(triggerRef: (el) => void) => (