diff --git a/src/components/forms/AddNewsForm.js b/src/components/forms/AddNewsForm.js index 176f677d26430a582564bc503695b1e5a86478d1..0a1103249b65a530a58aa6f899a60a736d7ace9a 100644 --- a/src/components/forms/AddNewsForm.js +++ b/src/components/forms/AddNewsForm.js @@ -20,8 +20,9 @@ class AddNewsForm extends Component { open={this.state.showModal} trigger={ <Button + size='big' onClick={() => { this.setState({ showModal: true }); }} - >Add news + >HĂr hozzĂĄadĂĄsa </Button> } > diff --git a/src/components/forms/EditNewsForm.js b/src/components/forms/EditNewsForm.js index 1b28142bd5e1ea88bd20615d40eaa25c34cbaed6..7107e8d947e76d4fbbbc69cf448baf3f631b2e42 100644 --- a/src/components/forms/EditNewsForm.js +++ b/src/components/forms/EditNewsForm.js @@ -21,7 +21,7 @@ class EditNewsForm extends Component { onOpen={this.props.onClick} trigger={ <Button - floated={this.props.floated} + compact onClick={() => { this.setState({ showModal: true }); }} size='mini' > diff --git a/src/components/pages/News.css b/src/components/pages/News.css index c389aba4d62e03ff4723842228f48b977da75e1a..9a6297b8f5bad5fd7a9c6c9067396eb4518ff1c3 100644 --- a/src/components/pages/News.css +++ b/src/components/pages/News.css @@ -3,4 +3,11 @@ font-size: 0.75em; font-style: italic; font-family: fantasy; + text-align: justify; +} + +.news-text { + font-size: 1.15em; + font-family: Arial, Helvetica, sans-serif; + text-align: justify; } diff --git a/src/components/pages/News.js b/src/components/pages/News.js index ceac8481f89ea0292d6ad9f19031e0cdf7a81545..d1d7bff2d388d7cf4f9791a0fc3076b10bd405fb 100644 --- a/src/components/pages/News.js +++ b/src/components/pages/News.js @@ -20,32 +20,35 @@ class News extends Component { <Item key={item.id}> <Item.Content> <Item.Header - as='h3' - style={{ fontSize: '2em' }} + style={{ fontSize: '2em', width: '100%' }} > - {item.title} - <EditNewsForm - floated='right' - onClick={() => this.props.setSelectedNews(item)} - /> - <Button - color='red' - size='mini' - floated='right' - onClick={() => this.props.deleteNews(item)} - > - Delete - </Button> + <Grid> + <Grid.Column floated='center' width={12}> + {item.title} + </Grid.Column> + <Grid.Column floated='right' width={4}> + <EditNewsForm + onClick={() => this.props.setSelectedNews(item)} + /> + <Button + compact + color='red' + size='mini' + onClick={() => this.props.deleteNews(item)} + > + Delete + </Button> + </Grid.Column> + </Grid> </Item.Header> - <Item.Description style={{ fontSize: '1.33em' }}> - <pre>{item.text}</pre> + <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> - {/* TODO get the time when was edited */} <p> Szerkesztve: {moment(item.updated_at).format('LLLL')}</p> </Grid.Column> <Grid.Column floated='right' width={5}> @@ -61,14 +64,19 @@ class News extends Component { )); } + renderMultiLine(text) { + const strings = text.split('\n'); + return strings.map(string => <p>{string}</p>); + } + render() { return ( <div> <Segment style={{ padding: '3em 3em' }} vertical> {/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */} - <AddNewsForm /> <Container text textAlign='center'> + <AddNewsForm /> <Item.Group divided> {this.renderNews()} </Item.Group>