Add links to meetings on Dashboard

This commit is contained in:
rui hildt 2020-09-04 19:00:52 +02:00
parent 962b30edf0
commit 353ee05414
3 changed files with 48 additions and 66 deletions

View File

@ -8,10 +8,14 @@ export default function MeetingList({ meetings, status }) {
<List hover> <List hover>
{meetings.map((meeting) => ( {meetings.map((meeting) => (
<a href={`/meetings/${meeting.id}`}>
<List.Item key={meeting.id} bordered> <List.Item key={meeting.id} bordered>
<FlexboxGrid> <FlexboxGrid>
{/* Icon */} {/* Icon */}
<FlexboxGrid.Item colspan={2} style={styleCenter}> <FlexboxGrid.Item
colspan={2}
style={styleCenter}
>
<Icon <Icon
icon={ icon={
meeting.start_time !== null meeting.start_time !== null
@ -25,7 +29,7 @@ export default function MeetingList({ meetings, status }) {
/> />
</FlexboxGrid.Item> </FlexboxGrid.Item>
{/*base info*/} {/*Meeting info*/}
<FlexboxGrid.Item <FlexboxGrid.Item
colspan={6} colspan={6}
style={{ style={{
@ -35,24 +39,16 @@ export default function MeetingList({ meetings, status }) {
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
<div style={titleStyle}>{meeting.title}</div> <div style={titleStyle}>
{meeting.title}
</div>
{meeting.start_time !== null && ( {meeting.start_time !== null && (
<>{meeting.start_time}</> <>{meeting.start_time}</>
)} )}
</FlexboxGrid.Item> </FlexboxGrid.Item>
<FlexboxGrid.Item
colspan={4}
style={{
...alignRight,
}}
>
<a href='#'>View</a>
<span style={{ padding: 5 }}>|</span>
<a href='#'>Edit</a>
</FlexboxGrid.Item>
</FlexboxGrid> </FlexboxGrid>
</List.Item> </List.Item>
</a>
))} ))}
</List> </List>
</> </>
@ -67,28 +63,8 @@ const styleCenter = {
height: '60px', height: '60px',
}; };
const alignRight = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '60px',
marginLeft: 'auto'
};
const slimText = {
fontSize: '0.666em',
color: '#97969B',
fontWeight: 'lighter',
paddingBottom: 5,
};
const titleStyle = { const titleStyle = {
paddingBottom: 5, paddingBottom: 5,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
fontWeight: 500, fontWeight: 500,
}; };
const dataStyle = {
fontSize: '1.2em',
fontWeight: 500,
};

View File

@ -39,7 +39,7 @@ export default function Dashboard({ currentUser }) {
<> <>
<NavBar title='Dashboard' /> <NavBar title='Dashboard' />
{loading ? ( {loading ? (
<Panel className={'app-container'}> <Panel className={'app-container-small'}>
<h2>Invitations</h2> <h2>Invitations</h2>
<h4>Confirmed</h4> <h4>Confirmed</h4>
<Paragraph style={{ marginTop: 30 }} graph='square'> <Paragraph style={{ marginTop: 30 }} graph='square'>
@ -51,7 +51,7 @@ export default function Dashboard({ currentUser }) {
</Paragraph> </Paragraph>
</Panel> </Panel>
) : ( ) : (
<Panel className={'app-container'}> <Panel className={'app-container-small'}>
<h2>Invitations</h2> <h2>Invitations</h2>
{confirmed && ( {confirmed && (
<MeetingList <MeetingList

View File

@ -4,6 +4,12 @@
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
} }
.app-container-small {
max-width: 760px;
margin: 30px auto;
background-color: rgba(255, 255, 255, 0.6);
}
.form-container { .form-container {
max-width: 373px; max-width: 373px;
margin: 0 auto; margin: 0 auto;