muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 05:16:41 +07:00
Code Packages Activity Actions

tried grid

Browse source
This commit is contained in:
muerwre 2019-08-08 17:21:59 +07:00
parent 10b013f9a8
commit 125a120c85
6 changed files with 25 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/editors/ImageGrid/index.tsx
View file

@ -17,7 +17,7 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
<div className={styles.grid}>
{
items.map((file, index) => (
<SortableItem key={file.id} index={index}>
<SortableItem key={file.id} index={index} collection={0}>
<ImageUpload
id={file.id}
thumb={file.url}
@ -25,6 +25,17 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
</SortableItem>
))
}
{
locked.map((item, index) => (
<SortableItem key={item.temp_id} index={index} collection={1} disabled>
<ImageUpload
thumb={item.preview}
progress={item.progress}
is_uploading
/>
</SortableItem>
))
}
<div style={{ clear: 'both' }} />
</div>
);

18
src/components/editors/ImageGrid/styles.scss
View file

@ -3,22 +3,22 @@
padding-bottom: 60px;
box-sizing: border-box;
// display: grid;
// grid-column-gap: $gap;
// grid-row-gap: $gap;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
display: grid;
grid-column-gap: $gap;
grid-row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// display: flex;
// flex-wrap: wrap;
// @media (max-width: 600px) {
// grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
// }
@media (max-width: 600px) {
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
}
}
.item {
// flex: 0 4 25%;
width: 25%;
float: left;
// width: 25%;
// float: left;
// padding: $gap / 2;
z-index: 100;
box-sizing: border-box;