0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix gallary gird.

Browse source
This commit is contained in:
Pushkar Anand 2020-12-19 21:53:35 +05:30
parent d74b5cdea6
commit 5674a4d6f0
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/pages/gallery/components/PreviewCard.tsx
View file

@ -12,10 +12,10 @@ interface IProps {
const Cont = styled.div<{ disabled: boolean }>`
background: #555 url(/image.svg) no-repeat center;
margin: 0 4px;
display: inline-block;
width: 192px;
display: block;
width: fit-content;
height: 192px;
min-width: 100%;
overflow: hidden;
position: relative;
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};

16
src/pages/gallery/index.tsx
View file

@ -54,8 +54,11 @@ const DeadCenter = styled.div`
flex-direction: column;
`;
const ListContainer = styled.div`
display: flex;
const ListContainer = styled.div<{columns: number}>`
display: grid;
grid-template-columns: repeat(${props => props.columns}, 1fr);
grid-column-gap: 8px;
padding: 0 8px;
max-width: 100%;
color: #fff;
@ -72,10 +75,6 @@ const ListContainer = styled.div`
}
`;
const DateContainer = styled.div`
padding: 0 4px;
`;
const PAGE_SIZE = 12;
const COLUMNS = 3;
@ -322,10 +321,11 @@ export default function Gallery() {
>
{({ index, style }) => {
return (<ListItem style={style}>
<ListContainer>
<ListContainer columns={timeStampList[index].itemType === ITEM_TYPE.TIME
? 1 : columns}>
{
timeStampList[index].itemType === ITEM_TYPE.TIME
? <DateContainer>{timeStampList[index].date}</DateContainer>
? timeStampList[index].date
: timeStampList[index].items.map((item, idx) =>{
return getThumbnail(filteredData, timeStampList[index].itemStartIndex + idx);
})