From e0c750079f13e50925c2565b40beeef845711c5b Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sun, 2 Feb 2020 23:08:16 +0100
Subject: [PATCH] Responsive Mentors page
---
src/components/pages/Mentors.js | 128 ++++++++++++++++++++++++++------
1 file changed, 106 insertions(+), 22 deletions(-)
diff --git a/src/components/pages/Mentors.js b/src/components/pages/Mentors.js
index 791cce7..73dcb60 100644
--- a/src/components/pages/Mentors.js
+++ b/src/components/pages/Mentors.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
- import { Container, Segment, Item, Divider, Header, Image, Card, Label, Icon } from 'semantic-ui-react'
+ import { Container, Segment, Item, Header, Card, Label, Icon, Responsive, Image } from 'semantic-ui-react'
import { connect } from 'react-redux'
import { getMentors } from '../../actions/mentors'
@@ -8,7 +8,7 @@ class Mentors extends Component {
this.props.getMentors();
}
- renderMentors() {
+ renderMentorsNormal() {
return this.props.mentors.map( (item, index) => (
<Card style={{maxWidth: '100%', minWidth: '100%'}}>
<Card.Content style={{padding: '0'}}>
@@ -36,32 +36,116 @@ class Mentors extends Component {
));
}
- renderMultiLine(text) {
- const strings = text.split('\n');
- return strings.map(string => <p key={Math.random()}>{string}</p>);
+ renderMentorsMobile() {
+ return this.props.mentors.map( (item, index) => (
+ // <Card style={{maxWidth: '100%', minWidth: '100%'}}>
+ // <Card.Content style={{padding: '0'}}>
+ // <Item.Group>
+ // <Item>
+ // <Item.Image size='medium' src={item.image} />
+ // <Item.Content style={{padding: '1rem'}}>
+ // <Item.Header>{item.name}</Item.Header>
+ // <Item.Extra>
+ // <Label><Icon name='mail'></Icon>{item.email}</Label>
+ // </Item.Extra>
+ // </Item.Content>
+ // </Item>
+ // <Item>
+ // <Item.Content style={{padding: '1rem'}}>
+ // <Item.Description>
+ // <p>{item.text}</p>
+ // </Item.Description>
+ // <Item.Extra>
+ // <Label><Icon name='mail'></Icon>{item.email}</Label>
+ // </Item.Extra>
+ // </Item.Content>
+ // </Item>
+ // </Item.Group>
+ // </Card.Content>
+ // </Card>
+ <Card key={item.id}>
+ <Image src={item.image} wrapped ui={false}/>
+ <Card.Content>
+ <Card.Header>{item.name}</Card.Header>
+ <Card.Description>
+ {item.text}
+ </Card.Description>
+ </Card.Content>
+ <Card.Content extra>
+ <Label><Icon name='mail'></Icon>{item.email}</Label>
+ </Card.Content>
+ </Card>
+ ));
}
render() {
return (
<div>
- <Segment inverted textAlign='center' vertical>
- <Container>
- <Header
- as='h1'
- content='Mentorok'
- inverted
- style={{
- fontSize: '3em',
- fontWeight: 'normal',
- marginBottom: 0,
- marginTop: '0.5em',
- }}
- />
+ <Responsive minWidth={768}>
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <Header
+ as='h1'
+ content='Mentorok'
+ inverted
+ style={{
+ fontSize: '3em',
+ fontWeight: 'normal',
+ marginBottom: 0,
+ marginTop: '0.5em',
+ }}
+ />
+ </Container>
+ </Segment>
+ <Container style={{paddingTop: '2em', paddingBottom: '5em'}}>
+ {this.renderMentorsNormal()}
+ </Container>
+ </Responsive>
+ <Responsive minWidth={551} maxWidth={767}>
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <Header
+ as='h1'
+ content='Mentorok'
+ inverted
+ style={{
+ fontSize: '3em',
+ fontWeight: 'normal',
+ marginBottom: 0,
+ marginTop: '0.5em',
+ }}
+ />
+ </Container>
+ </Segment>
+ <Container style={{paddingTop: '2em', paddingBottom: '5em'}}>
+ <Card.Group itemsPerRow={2}>
+ {this.renderMentorsMobile()}
+ </Card.Group>
+ </Container>
+ </Responsive>
+
+ <Responsive maxWidth={550}>
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <Header
+ as='h1'
+ content='Mentorok'
+ inverted
+ style={{
+ fontSize: '3em',
+ fontWeight: 'normal',
+ marginBottom: 0,
+ marginTop: '0.5em',
+ }}
+ />
+ </Container>
+ </Segment>
+ <Container style={{paddingTop: '2em', paddingBottom: '5em'}}>
+ <Card.Group itemsPerRow={1}>
+ {this.renderMentorsMobile()}
+ </Card.Group>
</Container>
- </Segment>
- <Container style={{paddingTop: '2em', paddingBottom: '5em'}}>
- {this.renderMentors()}
- </Container>
+ </Responsive>
</div>
);
}
--
GitLab