extern/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2024-11-25 17:55:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

add title under image

Browse Source
This commit is contained in:
aleensd 2024-11-21 20:09:39 +02:00
parent 285f611721
commit 783b34e9ff
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/static/js/components/_shared/ToolTip.jsx
View File

@ -19,7 +19,7 @@ function Tooltip({ children, content, title, position = 'right', classNames = ''
};
useEffect(() => {
if (active && popUpRef.current) {
if (popUpRef.current) {
setTooltipDimensions({
height: popUpRef.current.clientHeight || 0,
width: popUpRef.current.clientWidth || 0,

10
frontend/src/static/js/components/media-page/MediaPage.scss
View File

@ -564,6 +564,16 @@
transition: transform 60s ease-in-out, opacity 60 ease-in-out;
}
.slideshow-title {
margin-top: 10px;
text-align: start;
font-size: 16px;
font-weight: bold;
color: #F0F0F0;
z-index: 1200;
}
.arrow {
position: absolute;
display: flex;

9
frontend/src/static/js/components/media-viewer/ImageViewer.js
View File

@ -67,7 +67,7 @@ export default function ImageViewer() {
if (event.key === 'Escape') onClose();
};
const onClose=()=>setIsModalOpen(false)
const onClose = () => setIsModalOpen(false);
const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % slideshowItems.length);
@ -86,11 +86,9 @@ export default function ImageViewer() {
return !image ? null : (
<div className="viewer-image-container">
<Tooltip content={"load full-image"} position='center'>
<Tooltip content={'load full-image'} position="center">
<img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} />
</Tooltip>
{/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */}
{isModalOpen && slideshowItems && (
<div className="modal-overlay" onClick={() => setIsModalOpen(false)}>
<div className="slideshow-container" onClick={(e) => e.stopPropagation()}>
@ -103,6 +101,9 @@ export default function ImageViewer() {
alt={`Slide ${currentIndex + 1}`}
onClick={() => handleImageClick(currentIndex)}
/>
<div className="slideshow-title">
{slideshowItems[currentIndex]?.title}
</div>
</div>
<button className="arrow right" onClick={handleNext} aria-label="Next slide">
&#8250;