From e9e14e3c8ccbf1666602a7da5b7b783ddd0cc79f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com> Date: Sun, 27 Jan 2019 13:11:51 +0100 Subject: [PATCH] Remove unnecessary information from news, add some style --- src/components/forms/EditEventForm.js | 3 +- src/components/pages/News.js | 80 ++++++++++++--------------- src/components/pages/Schedule.js | 12 ++-- 3 files changed, 43 insertions(+), 52 deletions(-) diff --git a/src/components/forms/EditEventForm.js b/src/components/forms/EditEventForm.js index 59516b4..fd50446 100644 --- a/src/components/forms/EditEventForm.js +++ b/src/components/forms/EditEventForm.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { Modal, Button, Form, Input, Icon } from 'semantic-ui-react'; import { connect } from 'react-redux'; +import moment from 'moment'; import { DateTimeInput } from 'semantic-ui-calendar-react'; import { writeEditEvent, @@ -72,7 +73,7 @@ class EditEventForm extends Component { label="DĂĄtum:" dateFormat='YYYY-MM-DD' placeholder="DĂĄtum" - value={date} + value={moment(date).format('YYYY-MM-DD hh:mm')} iconPosition="left" onChange={this.handleChange} /> diff --git a/src/components/pages/News.js b/src/components/pages/News.js index 7007f15..a94b43d 100644 --- a/src/components/pages/News.js +++ b/src/components/pages/News.js @@ -20,53 +20,41 @@ class News extends Component { return this.props.news.map(item => ( <Item key={item.id}> <Item.Content> - <Item.Header - style={{ fontSize: '2em', width: '100%' }} - > - <Grid> - <Grid.Column floated='center' width={12}> - {item.title} - </Grid.Column> - { this.props.user.role === 'Staff' ? - <Grid.Column floated='right' width={4}> - <EditNewsForm - onClick={() => this.props.setSelectedNews(item)} - /> - <ConfirmModal - text={`tĂśrĂślni akarod a kĂśvetkezĹ hĂrt: ${item.title}`} - button={ - <Button - compact - color='red' - size='mini' - > - TĂśrlĂŠs - </Button> - } - onAccept={() => this.props.deleteNews(item)} - /> - </Grid.Column> - : null } - </Grid> - </Item.Header> - <Item.Description className='news-text' style={{ fontSize: '1.33em' }}> - {this.renderMultiLine(item.text)} - </Item.Description> - <Item.Extra> - <Grid> - <Grid.Row className='news-extra'> - <Grid.Column floated='left' width={10}> - <p> KĂŠszĂźlt: {moment(item.created_at).format('LLLL')} </p> - <p> Szerkesztve: {moment(item.updated_at).format('LLLL')}</p> + <Container text textAlign='left'> + <Item.Header + style={{ fontSize: '2em', width: '100%' }} + > + <Grid> + <Grid.Column floated='left' width={8}> + {item.title} </Grid.Column> - <Grid.Column floated='right' width={5}> - <p> Ărta: <strong>{item.author_name}</strong></p> - {/* TODO get the edited by name */} - <p> Szerkesztette: {item.author_name}</p> - </Grid.Column> - </Grid.Row> - </Grid> - </Item.Extra> + { this.props.user.role === 'Staff' ? + <Grid.Column floated='right' width={4}> + <EditNewsForm + onClick={() => this.props.setSelectedNews(item)} + /> + <ConfirmModal + text={`tĂśrĂślni akarod a kĂśvetkezĹ hĂrt: ${item.title}`} + button={ + <Button + compact + color='red' + size='mini' + > + TĂśrlĂŠs + </Button> + } + onAccept={() => this.props.deleteNews(item)} + /> + </Grid.Column> + : null } + </Grid> + </Item.Header> + <Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>KĂśzzĂŠtĂŠve: {moment(item.created_at).format('LLLL')}</Item.Meta> + <Item.Description className='news-text' style={{ fontSize: '1em' }}> + {this.renderMultiLine(item.text)} + </Item.Description> + </Container> </Item.Content> </Item> )); diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js index db3877f..1b7e66e 100644 --- a/src/components/pages/Schedule.js +++ b/src/components/pages/Schedule.js @@ -24,29 +24,31 @@ class Schedule extends Component { const events = this.props.events; const panels = events.map(event => ( - <> + <div> <Accordion.Title active={activeIndex === event.id} index={event.id} onClick={this.handleClick} > - <h2> + <h3> <Grid> <Grid.Column floated='left' width={5} textAlign='left'> - <Icon name='quidditch' color='blue' />{event.name} + <Icon name='angle right' color='blue' />{event.name} </Grid.Column> <Grid.Column floated='right' width={8} textAlign='right'> {moment(event.date).locale('hu').format('LLLL')} </Grid.Column> </Grid> - </h2> + </h3> </Accordion.Title> <Accordion.Content active={activeIndex === event.id}> + <Container text textAlign='left'> <p> {event.description} </p> + </Container> </Accordion.Content> - </> + </div> )); return ( -- GitLab