scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Redo heatmap styling, transitions

Browse source
This commit is contained in:
Ben Grant 2021-06-05 17:44:18 +10:00
parent 2b5c41af41
commit 7f1236693e
6 changed files with 39 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
crabfit-frontend/public/i18n/en/event.json
View file

@ -1,5 +1,6 @@
{
"available": "available",
"greyed_times": "This area is greyed out because it's not part of the event. You may be looking at this event in a different timezone from where it was created.",
"nav": {
"title": "Click to copy",

2
crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
View file

@ -119,7 +119,7 @@ const AvailabilityEditor = ({
if (!timeLabel.time) return null;
if (!times.includes(`${timeLabel.time}-${date}`)) {
return (
<TimeSpace key={x+y} />
<TimeSpace key={x+y} className='timespace' title={t('event:greyed_times')} />
);
}
const time = `${timeLabel.time}-${date}`;

8
crabfit-frontend/src/components/AvailabilityEditor/availabilityEditorStyle.ts
View file

@ -2,16 +2,16 @@ import styled from '@emotion/styled';
export const Time = styled.div`
height: 10px;
margin: 1px;
background-color: ${props => props.theme.background};
touch-action: none;
transition: background-color .1s;
${props => props.time.slice(2, 4) === '00' && `
border-top: 2px solid ${props.theme.text};
`}
${props => props.time.slice(2, 4) !== '00' && `
margin-top: -1px;
border-top: 2px solid transparent;
`}
${props => props.time.slice(2, 4) === '30' && `
margin-top: -1px;
border-top: 2px dotted ${props.theme.text};
`}

2
crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
View file

@ -91,7 +91,7 @@ const AvailabilityViewer = ({
if (!timeLabel.time) return null;
if (!times.includes(`${timeLabel.time}-${date}`)) {
return (
<TimeSpace key={i} />
<TimeSpace className='timespace' key={i} title={t('event:greyed_times')} />
);
}
const time = `${timeLabel.time}-${date}`;

50
crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
View file

@ -35,20 +35,25 @@ export const Date = styled.div`
export const Times = styled.div`
display: flex;
flex-direction: column;
background-color: ${props => props.theme.text};
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-bottom: 2px solid ${props => props.theme.text};
border-left: 1px solid ${props => props.theme.text};
border-right: 1px solid ${props => props.theme.text};
${props => props.borderLeft && `
border-left: 1px solid transparent;
border-left: 2px solid ${props.theme.text};
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
`}
${props => props.borderRight && `
border-right: 1px solid transparent;
border-right: 2px solid ${props.theme.text};
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
`}
& .time + .timespace, & .timespace:first-of-type {
border-top: 2px solid ${props => props.theme.text};
}
`;
export const DateLabel = styled.label`
@ -67,32 +72,29 @@ export const DayLabel = styled.label`
export const Time = styled.div`
height: 10px;
margin: 1px;
background-color: ${props => props.theme.background};
background-origin: border-box;
transition: background-color .1s;
${props => props.time.slice(2, 4) === '00' && `
border-top: 2px solid ${props.theme.text};
`}
${props => props.time.slice(2, 4) !== '00' && `
margin-top: -1px;
border-top: 2px solid transparent;
`}
${props => props.time.slice(2, 4) === '30' && `
margin-top: -1px;
border-top: 2px dotted ${props.theme.text};
`}
${props => props.highlight && props.peopleCount === props.maxPeople && props.peopleCount > 0 ? `
background-color: ${props => `${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`};
${props => props.highlight && props.peopleCount === props.maxPeople && props.peopleCount > 0 && `
background-image: repeating-linear-gradient(
45deg,
${props.theme.primary},
${props.theme.primary} 4.3px,
transparent,
transparent 4.3px,
${props.theme.primaryDark} 4.3px,
${props.theme.primaryDark} 8.6px
);
` : `
background-image: linear-gradient(
${`${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`},
${`${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`}
);
`}
`;
@ -159,7 +161,17 @@ export const TimeSpace = styled.div`
height: 10px;
position: relative;
border-top: 2px solid transparent;
background: ${props => props.theme.background};
&.timespace {
background-origin: border-box;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 4.3px,
${props => props.theme.loading} 4.3px,
${props => props.theme.loading} 8.6px
);
}
`;
export const TimeLabel = styled.label`
@ -190,7 +202,7 @@ export const Person = styled.button`
font: inherit;
font-size: 15px;
border-radius: 3px;
border: 1px solid ${props => props.theme.text};
border: 2px solid ${props => props.theme.text};
color: ${props => props.theme.text};
font-weight: 500;
background: transparent;

2
crabfit-frontend/src/components/Legend/legendStyle.ts
View file

@ -28,7 +28,7 @@ export const Bar = styled.div`
border-radius: 3px;
overflow: hidden;
margin: 0 8px;
border: 1px solid ${props => props.theme.text};
border: 2px solid ${props => props.theme.text};
@media (max-width: 400px) {
width: 100%;