responsive event detail

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>

src/components/pages/Schedule.js

 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>
        ));

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'