meeting-planner/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add links to meetings on Dashboard

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/Dashboard/MeetingList.js
View File

@ -8,51 +8,47 @@ export default function MeetingList({ meetings, status }) {
<List hover>
{meetings.map((meeting) => (
<List.Item key={meeting.id} bordered>
<FlexboxGrid>
{/* Icon */}
<FlexboxGrid.Item colspan={2} style={styleCenter}>
<Icon
icon={
meeting.start_time !== null
? 'calendar-check-o'
: 'calendar-o'
}
<a href={`/meetings/${meeting.id}`}>
<List.Item key={meeting.id} bordered>
<FlexboxGrid>
{/* Icon */}
<FlexboxGrid.Item
colspan={2}
style={styleCenter}
>
<Icon
icon={
meeting.start_time !== null
? 'calendar-check-o'
: 'calendar-o'
}
style={{
color: 'darkgrey',
fontSize: '1.5em',
}}
/>
</FlexboxGrid.Item>
{/*Meeting info*/}
<FlexboxGrid.Item
colspan={6}
style={{
color: 'darkgrey',
fontSize: '1.5em',
...styleCenter,
flexDirection: 'column',
alignItems: 'flex-start',
overflow: 'hidden',
}}
/>
</FlexboxGrid.Item>
{/*base info*/}
<FlexboxGrid.Item
colspan={6}
style={{
...styleCenter,
flexDirection: 'column',
alignItems: 'flex-start',
overflow: 'hidden',
}}
>
<div style={titleStyle}>{meeting.title}</div>
{meeting.start_time !== null && (
<>{meeting.start_time}</>
)}
</FlexboxGrid.Item>
<FlexboxGrid.Item
colspan={4}
style={{
...alignRight,
}}
>
<a href='#'>View</a>
<span style={{ padding: 5 }}>|</span>
<a href='#'>Edit</a>
</FlexboxGrid.Item>
</FlexboxGrid>
</List.Item>
>
<div style={titleStyle}>
{meeting.title}
</div>
{meeting.start_time !== null && (
<>{meeting.start_time}</>
)}
</FlexboxGrid.Item>
</FlexboxGrid>
</List.Item>
</a>
))}
</List>
</>
@ -67,28 +63,8 @@ const styleCenter = {
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 = {
paddingBottom: 5,
whiteSpace: 'nowrap',
fontWeight: 500,
};
const dataStyle = {
fontSize: '1.2em',
fontWeight: 500,
};

4
src/screens/Dashboard.js
View File

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

6
src/screens/styles/layout.less
View File

@ -4,6 +4,12 @@
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 {
max-width: 373px;
margin: 0 auto;