From 6e73501ef26ce638caff7258fab7a12b86f47ae5 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Wed, 29 Jan 2020 14:23:22 +0100
Subject: [PATCH] responsive event detail
---
src/components/pages/EventDetail.js | 39 +++++++++++--------
src/components/pages/Schedule.js | 6 +--
src/components/pages/TraineeTableRow.js | 50 +++++++++++++------------
3 files changed, 53 insertions(+), 42 deletions(-)
diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index ad0c766..05381b3 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -7,10 +7,12 @@ import {
Form,
Header,
Table,
+ Segment,
Icon,
Checkbox,
Popup,
Grid,
+ Divider,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
@@ -37,8 +39,8 @@ class EventDetail extends Component {
renderTrainees() {
const event = this.props.selectedEvent;
const note = this.props.actualNote;
- return this.props.trainees.map((item) => {
- const notes = this.props.eventNotes.filter(note => note.profile === item.id);
+ return this.props.trainees?.map((item) => {
+ const notes = this.props.eventNotes?.filter(note => note.profile === item.id);
return (
<TraineeTableRow
selectedEvent={event}
@@ -48,19 +50,28 @@ class EventDetail extends Component {
/>
);
});
+ return null
}
renderEvent() {
const { name, date, description } = this.props.selectedEvent;
return (
- <Item>
- <Item.Header as='h2'>{name}</Item.Header>
- <Item.Header as='h3'>DĂĄtum: {moment(date).format('LL')}</Item.Header>
- <Container textAlign='justified'>
- <Item.Header as='h3'>LeĂrĂĄs</Item.Header>
- <Item.Content>{description}</Item.Content>
- </Container>
- </Item>
+ <Segment>
+ <Item>
+ <Divider style={{ fontSize: '2em'}} horizontal>
+ <Header as='h1'>
+ {name}
+ <Item.Header as='h5'>
+ {moment(date).format('LL')}
+ </Item.Header>
+ </Header>
+ </Divider>
+ <Container textAlign='justified'>
+ <Item.Header as='h3'>LeĂrĂĄs</Item.Header>
+ <Item.Content>{description}</Item.Content>
+ </Container>
+ </Item>
+ </Segment>
);
}
@@ -89,11 +100,7 @@ class EventDetail extends Component {
const event = this.props.selectedEvent;
const note = this.props.actualNote;
return (
- <Container
- style={{
- padding: '80px'
- }}
- >
+ <Container style={{paddingTop: '1em', paddingBottom: '7em'}}>
<Container textAlign='center'>
{ this.props.selectedEvent && this.props.trainees ?
this.renderEvent()
@@ -103,7 +110,7 @@ class EventDetail extends Component {
</Container>
<Table celled centered unstackable>
<Table.Header>
- <Table.Row>
+ <Table.Row textAlign='center'>
<Table.HeaderCell>NĂŠv</Table.HeaderCell>
<Table.HeaderCell>Jelen volt</Table.HeaderCell>
<Table.HeaderCell>MegjegyzĂŠsek</Table.HeaderCell>
diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js
index 112e766..03f019c 100644
--- a/src/components/pages/Schedule.js
+++ b/src/components/pages/Schedule.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Container, Accordion, Icon, Grid, Header } from 'semantic-ui-react';
+import { Container, Accordion, Icon, Grid, Header, Segment } from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
import 'moment/locale/hu';
@@ -43,9 +43,9 @@ class Schedule extends Component {
</h2>
</Accordion.Title>
<Accordion.Content active={activeIndex === event.id}>
- <p>
+ <Segment>
{event.description}
- </p>
+ </Segment>
</Accordion.Content>
</Accordion>
));
diff --git a/src/components/pages/TraineeTableRow.js b/src/components/pages/TraineeTableRow.js
index 3a9ae4f..2fc9e68 100644
--- a/src/components/pages/TraineeTableRow.js
+++ b/src/components/pages/TraineeTableRow.js
@@ -47,7 +47,7 @@ class TraineeTableRow extends Component {
const isAbsent = selectedEvent.absent.includes(trainee.id);
return (
<Table.Row>
- <Table.Cell>
+ <Table.Cell textAlign='center'>
{trainee.full_name}
</Table.Cell>
{!this.props.edit ?
@@ -75,14 +75,14 @@ class TraineeTableRow extends Component {
<Table.Cell>
<Grid>
<Grid.Row>
- <Grid.Column floated='left' width={8} textAlign='left'>
+ <Grid.Column floated='left' width={8}>
{notes.length > 0 ?
<Comment>
<Comment.Content>
- <Comment.Author>{notes[0].created_by_name}</Comment.Author>
+ <Comment.Author><b>{notes[0].created_by_name}:</b></Comment.Author>
<Comment.Text>
- {notes[0].note.length > 50 ? notes[0].note.slice(0, 50).concat('...')
+ {notes[0].note.length > 30 ? notes[0].note.slice(0, 50).concat('...')
:
notes[0].note }
</Comment.Text>
@@ -92,25 +92,27 @@ class TraineeTableRow extends Component {
null
}
</Grid.Column>
- <Grid.Column floated='right' width={3} textAlign='right'>
+ <Grid.Column floated='right' width={6} textAlign='right'>
{notes.length > 0 ?
<Popup
basic
open={this.state.showMorePopup}
- trigger={<Button icon='comment alternate outline' onClick={this.triggerMore} />}
+ trigger={<Button icon='comment alternate outline'
+ onClick={this.triggerMore} />}
content={notes.map((note) => {
- return (
- <Comment.Content>
- <Comment.Author>{note.created_by_name}</Comment.Author>
- <Comment.Text>
- {note.note}
- </Comment.Text>
- </Comment.Content>
- );
- })}
+ return (
+ <Comment.Content>
+ <Comment.Author>{note.created_by_name}</Comment.Author>
+ <Comment.Text>
+ {note.note}
+ </Comment.Text>
+ </Comment.Content>
+ );
+ })}
/>
- :
- null}
+ :
+ null
+ }
<Popup
trigger={<Button icon='plus' onClick={this.triggerAdd}/>}
basic
@@ -123,12 +125,14 @@ class TraineeTableRow extends Component {
/>
<Button
onClick={() => {
- this.props.postEventNote({ eventid:selectedEvent.id,
- userid: trainee.id,
- note: note.note });
- this.props.clearWrite();
- }
- }
+ this.triggerAdd()
+ this.props.postEventNote({
+ eventid: selectedEvent.id,
+ userid: trainee.id,
+ note: note.note
+ })
+ this.props.clearWrite()
+ }}
content='MegjegyzĂŠs hozzĂĄadĂĄsa'
labelPosition='left'
icon='edit'
--
GitLab