mirror of
https://github.com/usatiuk/photos.git
synced 2025-10-29 07:47:47 +01:00
better photo overview
This commit is contained in:
@@ -140,6 +140,10 @@
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
@@ -154,14 +158,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.photoCard {
|
.photoCard {
|
||||||
display: flex;
|
flex-grow: 1;
|
||||||
justify-content: center;
|
transition: all 0.3s;
|
||||||
align-items: center;
|
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
height: 15rem;
|
height: 15rem;
|
||||||
width: 20rem;
|
min-width: 10rem;
|
||||||
margin: 1rem;
|
margin: 0.25rem;
|
||||||
padding: 0rem;
|
padding: 0rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@@ -175,6 +179,10 @@
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.photoStub {
|
||||||
|
flex-grow: 100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -93,7 +93,9 @@ export const OverviewComponent: React.FunctionComponent<IOverviewComponentProps>
|
|||||||
<div id="actionbar">
|
<div id="actionbar">
|
||||||
<UploadButton />
|
<UploadButton />
|
||||||
</div>
|
</div>
|
||||||
<div className="list">{photos}</div>
|
<div className="list">
|
||||||
|
{photos} <div className="photoStub" />
|
||||||
|
</div>
|
||||||
<div className="photosLoader">
|
<div className="photosLoader">
|
||||||
{props.overviewFetching && <Spinner />}
|
{props.overviewFetching && <Spinner />}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user