mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 15:14:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Limit lightbox size (#923)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-08 09:36:19 +01:00 • committed by GitHub
parent d50e364071
commit a6996d9414
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/markdown-renderer/replace-components/image/lightbox.scss Normal file
View file

@ -0,0 +1,11 @@
/*!
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.lightbox img {
max-width: calc(100vw - 3.5rem);
max-height: calc(100vh - 3.5rem - 75px);
object-fit: contain;
}

3
src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx
View file

@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import React, { Fragment, useState } from 'react' import React, { Fragment, useState } from 'react'
import { Modal } from 'react-bootstrap' import { Modal } from 'react-bootstrap'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import "./lightbox.scss"
export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => { export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
const [showFullscreenImage, setShowFullscreenImage] = useState(false) const [showFullscreenImage, setShowFullscreenImage] = useState(false)
@ -17,7 +18,7 @@ export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageEle
<Modal <Modal
animation={true} animation={true}
centered={true} centered={true}
dialogClassName={'text-dark'} dialogClassName={'text-dark lightbox'}
show={showFullscreenImage} show={showFullscreenImage}
onHide={() => setShowFullscreenImage(false)} onHide={() => setShowFullscreenImage(false)}
size={'xl'}> size={'xl'}>