spencerpincott/sol-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add day of week to calendar menu

Browse Source
This commit is contained in:
Kyle Gill
2019-05-31 19:52:00 -06:00
parent 6e4616d19b
commit 9511da373c
1 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/routes/Month.js
View File

@@ -11,23 +11,24 @@ import {
startOfMonth, startOfMonth,
} from "date-fns" } from "date-fns"
import { SIZES } from "styles/constants"
import { AppLink as Link } from "components/elements" import { AppLink as Link } from "components/elements"
import Seek from "components/Seek" import Seek from "components/Seek"
const YearCardGrid = styled.div` const DayCardGrid = styled.div`
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px; grid-gap: 20px;
margin-top: 20px; margin-top: 20px;
` `
const YearCard = styled.div` const DayCard = styled.div`
color: ${props => color: ${props =>
props.disabled props.disabled
? props.theme.colors.quarternary ? props.theme.colors.quarternary
: props.theme.colors.secondary}; : props.theme.colors.secondary};
border: 1px solid; border: 1px solid;
border-color: ${props => props.theme.colors.quarternary}; border-color: ${props => props.theme.colors.quarternary};
padding: 25px;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
user-select: none; user-select: none;
@@ -35,6 +36,20 @@ const YearCard = styled.div`
border-color: ${props => !props.disabled && props.theme.colors.tertiary}; border-color: ${props => !props.disabled && props.theme.colors.tertiary};
} }
` `
const DayCardBanner = styled.div`
font-size: ${SIZES.tiny};
position: relative;
top: -0px;
background-color: ${props => props.theme.colors.headerBackground};
border-bottom: 1px solid;
border-bottom-color: ${props => props.theme.colors.quarternary};
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 5px 0px;
`
const DayCardContent = styled.div`
padding: 20px 25px;
`
class Month extends Component { class Month extends Component {
render() { render() {
@@ -47,23 +62,31 @@ class Month extends Component {
dayIndexesToInclude = new Date().getDate() dayIndexesToInclude = new Date().getDate()
} }
let yearCards = [] let dayCards = []
for (let i = 0; i < getDaysInMonth(currentDay); i++) { for (let i = 0; i < getDaysInMonth(currentDay); i++) {
const isDisabled = dayIndexesToInclude <= i && isThisMonth(currentDay) const isDisabled = dayIndexesToInclude <= i && isThisMonth(currentDay)
if (isDisabled) { if (isDisabled) {
yearCards.push( dayCards.push(
<YearCard disabled={isDisabled} key={i}> <DayCard disabled={isDisabled} key={i}>
{i + 1} <DayCardBanner>
</YearCard> {format(new Date(year, month - 1, i + 1), "dddd")}
</DayCardBanner>
<DayCardContent>{i + 1}</DayCardContent>
</DayCard>
) )
} else { } else {
yearCards.push( dayCards.push(
<Link <Link
key={i} key={i}
to={format(new Date(year, month - 1, i + 1), "/YYYY/MM/DD")} to={format(new Date(year, month - 1, i + 1), "/YYYY/MM/DD")}
style={{ textDecoration: "none" }} style={{ textDecoration: "none" }}
> >
<YearCard key={i}>{i + 1}</YearCard> <DayCard key={i}>
<DayCardBanner>
{format(new Date(year, month - 1, i + 1), "dddd")}
</DayCardBanner>
<DayCardContent>{i + 1}</DayCardContent>
</DayCard>
</Link> </Link>
) )
} }
@@ -80,7 +103,7 @@ class Month extends Component {
startOfMonth(subMonths(new Date(), 1)) startOfMonth(subMonths(new Date(), 1))
)} )}
/> />
<YearCardGrid>{yearCards}</YearCardGrid> <DayCardGrid>{dayCards}</DayCardGrid>
</> </>
) )
} }