From 1faa7339e3547b48764d62a1806c67aebd3fa986 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sun, 26 Jan 2020 15:41:34 +0100
Subject: [PATCH] #63 Groups in cards
---
src/components/extra/GroupCard.js | 16 ++++++++++++++++
src/components/pages/Groups.js | 9 +++------
2 files changed, 19 insertions(+), 6 deletions(-)
create mode 100644 src/components/extra/GroupCard.js
diff --git a/src/components/extra/GroupCard.js b/src/components/extra/GroupCard.js
new file mode 100644
index 0000000..b3e7f3a
--- /dev/null
+++ b/src/components/extra/GroupCard.js
@@ -0,0 +1,16 @@
+import React, {Component} from 'react'
+import { Segment, Header, Divider } from 'semantic-ui-react';
+
+class HiddenForm extends Component {
+ render(){
+ return (
+ <Segment style={{ marginTop: 0 }}>
+ <Divider style={{ fontSize: '2em'}} horizontal><Header as='h3' style={{ fontSize: '1.2em'}}>{this.props.label}</Header></Divider>
+ <div className='paragraph' dangerouslySetInnerHTML={{__html: this.props.value}}>
+ </div>
+ </Segment>
+ )
+ }
+}
+
+export default HiddenForm
\ No newline at end of file
diff --git a/src/components/pages/Groups.js b/src/components/pages/Groups.js
index 7e725cb..e9e3f6c 100644
--- a/src/components/pages/Groups.js
+++ b/src/components/pages/Groups.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { Container, Header, Segment, Divider } from 'semantic-ui-react';
import './Groups.css';
+import GrouCard from '../extra/GroupCard'
import { connect } from 'react-redux';
import { getGroups } from '../../actions/groups';
@@ -30,14 +31,10 @@ class Groups extends Component {
</Container>
</Segment>
- <Segment style={{ padding: '8em 0em' }} vertical>
+ <Segment style={{ padding: '1em 0em 5em' }} vertical>
<Container text>
{ this.props.groups.map(item => {
- return <div key={item.id}>
- <Header as='h3' style={{ fontSize: '2em' }}>{item.name}</Header>
- <div className='paragraph' dangerouslySetInnerHTML={{__html: item.description}}>
- </div>
- </div>
+ return <GrouCard key={item.id} label={item.name} value={item.description}/>
})}
</Container>
</Segment>
--
GitLab