From b0425cd847be577d6ad0822a1f3cde0021ba4b7a Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Wed, 29 Jan 2020 11:27:09 +0100
Subject: [PATCH] cleanup
---
src/components/Header.js | 123 +++++++++++++++++--------------
src/components/pages/News.js | 2 +-
src/components/pages/Schedule.js | 53 ++++++++-----
3 files changed, 101 insertions(+), 77 deletions(-)
diff --git a/src/components/Header.js b/src/components/Header.js
index 5cdc710..b609a5a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,15 +6,16 @@ import {
Button,
Segment,
Image,
- Grid,
Popup,
Icon,
Responsive,
} from 'semantic-ui-react';
+
import { connect } from 'react-redux';
import { getUserData } from '../actions';
import KSZKlogo from './images/kszk_logo.svg';
+// Objects that will be converted to menu items in the render method
const menuItems = [
{
text: 'FĹoldal',
@@ -67,89 +68,100 @@ class Header extends Component {
isOpen: false,
};
}
+ // Fetch the userData-s
componentWillMount() {
this.props.getUserData();
}
+ // Hide the menu after clicking an item on mobile
handleOpen = () => {
this.setState({ isOpen: true });
}
-
handleClose = () => {
this.setState({ isOpen: false });
}
render() {
- const { visible } = this.state;
return (
<div>
- <Responsive minWidth={600}>
+ {/* Tablet, Computer, ... view */}
+ <Responsive minWidth={600} >
<Segment inverted textAlign='center' vertical>
<Container>
- <Menu inverted secondary size='large'>
- {menuItems.map((item, i) =>
- (item.permissionLevel === 0 ?
- <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
+ <Menu inverted secondary size='large'>
+ {/* Menu items */}
+ {menuItems.map((item, i) =>
+ (item.permissionLevel === 0 ?
+ <Menu.Item key={i} as={Link} to={item.to}>
+ {item.prefix}{item.text}
+ </Menu.Item>
: null
- ))
- }
- { this.props.user.id ?
- <Popup trigger={
- <Menu.Item>
- <Icon name='angle down' size='large' />
- </Menu.Item>
+ ))
}
- position='center'
- flowing hoverable inverted>
- <Menu inverted secondary size='large'>
+ {/* Arrow menu */}
+ { this.props.user.id ?
+ <Popup flowing hoverable inverted
+ trigger={
+ <Menu.Item>
+ <Icon name='angle down' size='large' />
+ </Menu.Item>
+ }
+ position='center'
+ >
+ <Menu inverted secondary size='large'>
{menuItems.map((item, i) =>
(this.props.user.permission >= item.permissionLevel
- && item.permissionLevel > 0?
- <Menu.Item
- key={i} as={Link} to={item.to}>
+ && item.permissionLevel > 0 ?
+ <Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
</Menu.Item>
: null
))
}
- </Menu>
- </Popup>
- : null
- }
- <Menu.Item position='right' width={5}>
- {
- this.props.user.id ?
+ </Menu>
+ </Popup>
+ : null
+ }
+ {/* Login Button */}
+ <Menu.Item position='right'>
+ {this.props.user.id ?
<Button.Group>
<Button inverted as={Link} to='/profile'>Profilom</Button>
<Button as='a' href='/api/v1/logout/' icon='sign out' />
</Button.Group>
- :
+ :
<Button as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
- }
- </Menu.Item>
- </Menu>
+ }
+ </Menu.Item>
+ </Menu>
</Container>
</Segment>
</Responsive>
+ {/* Mobile view */}
<Responsive maxWidth={599}>
<Segment inverted textAlign='center' vertical>
<Container>
- <Menu inverted secondary size='normal'>
- <Menu.Item as={Link} to={menuItems[0].to}>{menuItems[0].prefix}{menuItems[0].text}</Menu.Item>
- <Popup trigger={
- <Menu.Item onClick={this.handleClose}
- position='right'>
- <Icon name='bars' size='large' />
- </Menu.Item>
- }
- position='center'
- flowing hoverable inverted
- open={this.state.isOpen}
- onOpen={this.handleOpen}>
- <Menu vertical inverted secondary size='normal'>
+ <Menu inverted secondary size='big'>
+ {/* kszk logo + home link */}
+ <Menu.Item as={Link} to={menuItems[0].to}>
+ {menuItems[0].prefix}{menuItems[0].text}
+ </Menu.Item>
+ {/* Sandwich menu */}
+ <Popup flowing hoverable inverted trigger={
+ <Menu.Item onClick={this.handleClose}
+ position='right'>
+ <Icon name='bars' size='large' />
+ </Menu.Item>
+ }
+ position='center'
+ open={this.state.isOpen}
+ onOpen={this.handleOpen}
+ size='huge'
+ >
+ <Menu vertical inverted secondary size='big'>
{menuItems.map((item, i) =>
- ( (this.props.user.permission >= item.permissionLevel ||
- item.permissionLevel === 0) && i>0?
+ ((this.props.user.permission >= item.permissionLevel
+ ||item.permissionLevel === 0) && i>0?
<Menu.Item onClick={this.handleClose}
key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
@@ -158,19 +170,18 @@ class Header extends Component {
))
}
<Menu.Item>
- {
- this.props.user.id ?
- <Button.Group>
- <Button onClick={this.handleClose} inverted as={Link} to='/profile'>Profilom</Button>
- <Button onClick={this.handleClose} as='a' href='/api/v1/logout/' icon='sign out' />
- </Button.Group>
+ {this.props.user.id ?
+ <Button.Group>
+ <Button onClick={this.handleClose} inverted as={Link} to='/profile'>Profilom</Button>
+ <Button onClick={this.handleClose} as='a' href='/api/v1/logout/' icon='sign out' />
+ </Button.Group>
:
- <Button onClick={this.handleClose} as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
+ <Button onClick={this.handleClose} as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
}
</Menu.Item>
</Menu>
- </Popup>
- </Menu>
+ </Popup>
+ </Menu>
</Container>
</Segment>
</Responsive>
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index 807a914..525c827 100644
--- a/src/components/pages/News.js
+++ b/src/components/pages/News.js
@@ -76,7 +76,7 @@ class News extends Component {
render() {
return (
<div>
- <Segment style={{ padding: '3em 3em' }} vertical>
+ <Segment vertical>
{/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
<Container text textAlign='center'>
{this.props.user.role === 'Staff' ?
diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js
index 60fae4d..112e766 100644
--- a/src/components/pages/Schedule.js
+++ b/src/components/pages/Schedule.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Container, Accordion, Icon, Grid } from 'semantic-ui-react';
+import { Container, Accordion, Icon, Grid, Header } from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
import 'moment/locale/hu';
@@ -25,7 +25,7 @@ class Schedule extends Component {
const events = this.props.events;
const panels = events.map(event => (
- <>
+ <Accordion>
<Accordion.Title
active={activeIndex === event.id}
index={event.id}
@@ -47,27 +47,40 @@ class Schedule extends Component {
{event.description}
</p>
</Accordion.Content>
- </>
+ </Accordion>
));
return (
- <Container
- textAlign='center'
- style={{
- padding: '60px'
- }}
- >
- <h2>KĂŠpzĂŠs alkalmak:</h2>
- <Accordion
- fluid
- styled
- defaultActiveIndex={-1}
- panels={panels}
- >
- {panels}
- </Accordion>
- <h2>TĂĄbor:</h2>
- </Container>
+ <div>
+ <Container textAlign='center'>
+ <Header
+ as='h1'
+ content='KĂŠpzĂŠs alkalmak'
+ style={{
+ fontSize: '2em',
+ fontWeight: 'bold',
+ marginBottom: '0.5em',
+ marginTop: '0.5em',
+ }}
+ />
+ <Accordion fluid styled
+ defaultActiveIndex={-1}
+ panels={panels}
+ >
+ {panels}
+ </Accordion>
+ <Header
+ as='h1'
+ content='TĂĄbor'
+ style={{
+ fontSize: '2em',
+ fontWeight: 'bold',
+ marginBottom: '0.5em',
+ marginTop: '1.5em',
+ }}
+ />
+ </Container>
+ </div>
);
}
}
--
GitLab