Commit1a91511

committed

refactor(meetup): make DateSelector responsive

1 parenta2c2142 commit1a91511Copy full SHA for 1a91511

File tree

+14

-5

lines changed

+14

-5

lines changed

Lines changed: 6 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -15,9 +15,13 @@ import {`
`15`	`15`	`constweekends=[5,6,18,19,27,28]`
`16`	`16`	`constactivitiesDates=[3,4,19,23,24]`
`17`	`17`
`18`		`-constCell=({ item})=>{`
	`18`	`+constCell=({ item, isLeapMonth})=>{`
`19`	`19`	`return(`
`20`		`-<Wrapperkey={item.id}active={contains(item.id,activitiesDates)}>`
	`20`	`+<Wrapper`
	`21`	`+key={item.id}`
	`22`	`+active={contains(item.id,activitiesDates)}`
	`23`	`+isLeapMonth={isLeapMonth}`
	`24`	`+>`
`21`	`25`	`<Head>`
`22`	`26`	`<DateTextactive={item.id===9}>{item.date}</DateText>`
`23`	`27`	`{contains(item.id,weekends)&&<WeekendHint>六</WeekendHint>}`

Lines changed: 3 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ const fillItems = () => {`
`26`	`26`	`constDateSelector=()=>{`
`27`	`27`	`fillItems()`
`28`	`28`	`constitems=dates`
	`29`	`+constisLeapMonth=!!items[30]`
`29`	`30`
`30`	`31`	`return(`
`31`	`32`	`<Wrapper>`
`@@ -34,12 +35,12 @@ const DateSelector = () => {`
`34`	`35`	`<CellsWrapper>`
`35`	`36`	`<DatesWrapper>`
`36`	`37`	`{items.slice(0,15).map(item=>(`
`37`		`-<Cellkey={item.id}item={item}/>`
	`38`	`+<Cellkey={item.id}item={item}isLeapMonth={isLeapMonth}/>`
`38`	`39`	`))}`
`39`	`40`	`</DatesWrapper>`
`40`	`41`	`<DatesWrapper>`
`41`	`42`	`{items.slice(15).map(item=>(`
`42`		`-<Cellkey={item.id}item={item}/>`
	`43`	`+<Cellkey={item.id}item={item}isLeapMonth={isLeapMonth}/>`
`43`	`44`	`))}`
`44`	`45`	`</DatesWrapper>`
`45`	`46`	`</CellsWrapper>`

Lines changed: 4 additions & 1 deletion

Original file line number	Diff line number	Diff line change
@@ -7,11 +7,14 @@ export const Wrapper = styled.div`
`7`	`7`	`${cs.flexColumn('justify-between')};`
`8`	`8`	`border: 1px solid;`
`9`	`9`	`border-color: #004354;`
`10`		`- width: 55px;`
	`10`	`+ width:${({ isLeapMonth})=>(isLeapMonth ?'50px' :'55px')};`
`11`	`11`	`height: 45px;`
`12`	`12`	`padding-left: 3px;`
`13`	`13`	`background:${({ active})=>(active ?'#003b4c' :'#04303c')};`
`14`	`14`	`border-top-color:${({ active})=>(active ?'#3680AD' :'#004354')};`
	`15`	`+ @media (max-width: 1255px) {`
	`16`	`+ width: 50px;`
	`17`	`+ }`
`15`	`18`	`
`16`	`19`	exportconstWeekName=styled.div`
`17`	`20`	`${cs.flex('align-both')};`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -16,6 +16,7 @@ export const CellsWrapper = styled.div`
`16`	`16`	`margin-left: 15px;`
`17`	`17`	`
`18`	`18`	exportconstDatesWrapper=styled.div`
	`19`	`+ position: relative;`
`19`	`20`	`${cs.flex()}`
`20`	`21`	`flex-wrap: wrap;`
`21`	`22`	`width: 100%;`

Comments

(0)