Style news header. Make text display multi lines if separated by \n

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>
         }
       >

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'
           >

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

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>