sheldonmlee/photo-viewer-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make grid

Browse Source
This commit is contained in:
edwardbrodski 2023-11-13 20:45:24 +00:00
parent 098777bb02
commit 1a7786b458
2 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.css
View File

@ -1,7 +1,7 @@
body { body {
min-height: 100vh; min-height: 100vh;
background-color: #282c34; background-color: #282c34;
color: #B9B8D6; color: #b9b8d6;
} }
.Header { .Header {
@ -24,7 +24,7 @@ body {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
background-color: #3B3E49; background-color: #3b3e49;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
margin: 0 0 1em 0; margin: 0 0 1em 0;
@ -35,17 +35,18 @@ body {
.GalleryItem > a { .GalleryItem > a {
color: inherit; color: inherit;
margin: 0.5em; margin: 0;
overflow: clip; overflow: clip;
} }
.GalleryItem > img, video { .GalleryItem > img,
video {
max-height: 80vh; max-height: 80vh;
} }
.DirectoryItem > button { .DirectoryItem > button {
background-color: #44655D; background-color: #44655d;
color: #B9B8D6; color: #b9b8d6;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
text-align: center; text-align: center;
@ -63,6 +64,34 @@ body {
} }
.ParentDirectoryItem > button { .ParentDirectoryItem > button {
background-color: #4D4F5D; background-color: #4d4f5d;
} }
@media (min-width: 62em) {
.GalleryItem {
margin: 1em;
border-radius: 1em;
overflow: hidden;
}
.Contents {
display: flex;
flex-direction: row;
align-items: start;
align-content: center;
flex-wrap: wrap;
}
.GalleryImg {
object-fit: cover;
width: 12em;
height: 9em;
}
.GalleryVid {
object-fit: cover;
width: 12em;
height: 9em;
}
}

8
src/App.tsx
View File

@ -115,9 +115,8 @@ function ImageItem({ thumbnail_url, url }: galleryItem) {
return ( return (
<div className="GalleryItem"> <div className="GalleryItem">
<a href={url} target="_blank"> <a href={url} target="_blank">
{getFileName(url)} <img className="GalleryImg" src={thumbnail_url} loading="lazy" />
</a> </a>
<img src={thumbnail_url} loading="lazy" />
</div> </div>
); );
} }
@ -126,11 +125,10 @@ function VideoItem({ url }: galleryItem) {
return ( return (
<div className="GalleryItem"> <div className="GalleryItem">
<a href={url} target="_blank"> <a href={url} target="_blank">
{getFileName(url)}
</a>
<video controls> <video controls>
<source src={url} type="video/mp4" /> <source className="GalleryVid" src={url} type="video/mp4" />
</video> </video>
</a>
</div> </div>
); );
} }