From cec265ec7db9525813fa5db085eb6575988c19ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Fri, 21 Dec 2018 20:09:55 +0100
Subject: [PATCH] Style news header. Make text display multi lines if separated
by \n
---
src/components/forms/AddNewsForm.js | 3 +-
src/components/forms/EditNewsForm.js | 2 +-
src/components/pages/News.css | 7 +++++
src/components/pages/News.js | 46 ++++++++++++++++------------
4 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/src/components/forms/AddNewsForm.js b/src/components/forms/AddNewsForm.js
index 176f677..0a11032 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 1b28142..7107e8d 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 c389aba..9a6297b 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 ceac848..d1d7bff 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>
--
GitLab