extern/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-02-16 18:30:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

some changes

Browse Source
This commit is contained in:
aleensd 2024-11-18 17:57:31 +02:00
parent 12e16cf12a
commit fc268380da
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -557,53 +557,56 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 90%; width: auto;
max-width: 900px; max-width: 90%;
} }
.slideshow-image img { .slideshow-image img {
width: 100%; display: block;
max-height: 100vh; width: auto;
height: auto;
max-width: 100%; /* Ensure image doesn't exceed container width */
max-height: 90vh;
border-radius: 0; border-radius: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
.arrow { .arrow {
background: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(255, 255, 255, 0.6);
border: none; border: none;
color: black; color: rgb(48, 47, 47);
font-size: 2rem; font-size: 2rem;
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
z-index: 1010; z-index: 1000;
transition: 0.2s ease; transition: 0.2s ease;
} }
.arrow:hover { // .arrow:hover {
background: rgba(255, 255, 255, 0.9); // background: #292928
} // }
.arrow.left { .arrow.left {
left: -50px; left: 10px;
} }
.arrow.right { .arrow.right {
right: -50px; right: 10px;
} }
.dots { .dots {
position: fixed; /* Make the dots container fixed to always be under the image */ position: fixed; /* Make the dots container fixed to always be under the image */
bottom: 20%; /* Adjust this to control the vertical spacing */ bottom: 10%;
left: 50%; /* Center the dots horizontally */ left: 50%;
transform: translateX(-50%); /* Center the dots container */ transform: translateX(-50%);
display: flex; display: flex;
gap: 10px; gap: 10px;
justify-content: center; justify-content: center;
z-index: 1000; /* Ensure it stays above the background */ z-index: 1000;
} }
.dot { .dot {

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

@ -64,9 +64,11 @@ export default function ImageViewer() {
setCurrentIndex(index); setCurrentIndex(index);
}; };
console.log(slideshowItems[currentIndex]?.original_media_url)
return !image ? null : ( return !image ? null : (
<div className={`viewer-image-container ${isModalOpen ? 'dimmed-background' : ''}`}> <div className="viewer-image-container">
<img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} /> <img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} />
{/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */} {/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */}
{isModalOpen && ( {isModalOpen && (
@ -80,11 +82,11 @@ export default function ImageViewer() {
onClick={handlePrevious} onClick={handlePrevious}
aria-label="Previous slide" aria-label="Previous slide"
> >
&lt; &#8249;
</button> </button>
<div className="slideshow-image"> <div className="slideshow-image">
<img <img
src={site.url + '/' + slideshowItems[currentIndex]?.poster_url} src={site.url + '/' + slideshowItems[currentIndex]?.original_media_url}
alt={`Slide ${currentIndex + 1}`} alt={`Slide ${currentIndex + 1}`}
/> />
</div> </div>
@ -93,7 +95,7 @@ export default function ImageViewer() {
onClick={handleNext} onClick={handleNext}
aria-label="Next slide" aria-label="Next slide"
> >
&gt; &#8250;
</button> </button>
<div className="dots"> <div className="dots">
{slideshowItems.map((_, index) => ( {slideshowItems.map((_, index) => (