stepus53/photos
1
0
Fork 0
mirror of https://github.com/usatiuk/photos.git synced 2025-10-28 23:37:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

pagination

Browse Source
This commit is contained in:
Stepan Usatiuk
2020-10-16 18:44:01 +00:00
committed by Stepan Usatiuk
parent 3bbb23dceb
commit 5bfd40426a
12 changed files with 172 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/Photos/Overview.scss
View File

@@ -26,52 +26,71 @@
opacity: 0;
}
#overviewContainer {
padding-top: 2rem;
width: 100%;
height: 100%;
overflow: auto;
#overview {
display: flex;
flex-direction: column;
#overview {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
#actionbar {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.list {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-wrap: wrap;
// 400px is the minimal width for 2 cards to fit
@media (max-width: 400px) {
.photosLoader {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 5rem;
padding-bottom: 5rem;
}
.photoCard {
#actionbar {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
align-items: center;
transition: 0.3s;
user-select: none;
height: 15rem;
width: 20rem;
margin: 1rem;
padding: 0rem;
overflow: hidden;
width: 100%;
}
img {
min-height: 100%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
.list {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-wrap: wrap;
// 400px is the minimal width for 2 cards to fit
@media (max-width: 400px) {
justify-content: center;
}
.photoCard {
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
user-select: none;
height: 15rem;
width: 20rem;
margin: 1rem;
padding: 0rem;
overflow: hidden;
img {
min-height: 100%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
}
}
}
}
}
.bp3-dark {