chore: resize writing area, add name to navbar

This commit is contained in:
Kyle Gill
2019-03-29 10:08:02 -06:00
parent faf5473d5d
commit eee11f9437
34 changed files with 386 additions and 369 deletions

View File

@@ -1,18 +1,18 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import styled from "@emotion/styled";
import { addYears, subYears, format, isThisYear, getMonth } from "date-fns";
import { withTheme } from "emotion-theming";
import React, { Component } from "react"
import { Link } from "react-router-dom"
import styled from "@emotion/styled"
import { addYears, subYears, format, isThisYear, getMonth } from "date-fns"
import { withTheme } from "emotion-theming"
import { months } from "../../../utils/date";
import Seek from "../../Seek";
import { months } from "../../../utils/date"
import Seek from "../../Seek"
const MonthCardGrid = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 20px;
margin-top: 20px;
`;
`
const MonthCard = styled.div`
color: ${props =>
props.disabled
@@ -27,21 +27,21 @@ const MonthCard = styled.div`
&:hover {
border-color: ${props => !props.disabled && props.theme.colors.tertiary};
}
`;
`
class Year extends Component {
render() {
const {
match: {
params: { year }
}
} = this.props;
const currentDate = new Date(year, 0, 1);
params: { year },
},
} = this.props
const currentDate = new Date(year, 0, 1)
// include all months unless it's this year
let monthIndexesToInclude = 11;
let monthIndexesToInclude = 11
if (isThisYear(currentDate)) {
monthIndexesToInclude = getMonth(new Date());
monthIndexesToInclude = getMonth(new Date())
}
return (
<div>
@@ -53,7 +53,7 @@ class Year extends Component {
/>
<MonthCardGrid>
{months.long.map((month, index) => {
const isDisabled = monthIndexesToInclude < index;
const isDisabled = monthIndexesToInclude < index
return isDisabled ? (
<MonthCard key={index} disabled={isDisabled}>
{month}
@@ -66,12 +66,12 @@ class Year extends Component {
>
<MonthCard>{month}</MonthCard>
</Link>
);
)
})}
</MonthCardGrid>
</div>
);
)
}
}
export default withTheme(Year);
export default withTheme(Year)