diff --git a/public/index.html b/public/index.html
index 0f7dc3872cd76a952517552bb127bd0c03ba543c..e1b4c45a8f295fe8277db48c22c83ad4e6299089 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
diff --git a/src/components/App.js b/src/components/App.js
index 5f2030756636d673c6834b9f6ea3114df880c629..0661e3e54fa3522980f2f6d9e9999e01cfed24ec 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,7 @@ import Header from './Header';
import Main from './Main';
import Footer from './Footer';
+
const App = () => (
<div style={{ minHeight: '100%', position: 'relative' }}>
<header id='header' >
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 095cb765c54c478c5df39d6abb2bd8c6c996d41f..aa62a0f05163a9029708a50622bce5e0ddabbb2c 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -5,7 +5,7 @@ import { Container, Segment } from 'semantic-ui-react';
const Footer = () => (
<Segment inverted vertical textAlign='center' >
<Container>
- <p textalign='center' >Created by DevTeam © 2018-2019.</p>
+ <p textalign='center' >Created by DevTeam © 2018-2020.</p>
</Container>
</Segment>
diff --git a/src/components/Header.js b/src/components/Header.js
index c27945d8c282f067cf1535d76aa49b54437864eb..b609a5a69979d45e9c3b3dbc5d49b8901af444c7 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -5,13 +5,17 @@ import {
Container,
Button,
Segment,
- Visibility,
Image,
+ 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',
@@ -57,92 +61,130 @@ const menuItems = [
},
];
-const FixedMenu = ({ user }) => (
- <Menu fixed='top' size='large' pointing>
- <Container>
- {menuItems.map((item, i) =>
- (user.permission >= item.permissionLevel ||
- (item.permissionLevel === 0)
- ?
- <Menu.Item key={i} as={Link} to={item.to}>{item.text}</Menu.Item>
- :
- null))}
-
- <Menu.Menu position='right'>
- <Menu.Item className='item'>
- {
- user.id ?
- <Button.Group>
- <Button primary 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/' >BejelentkezĂŠs</Button>
- }
- </Menu.Item>
- </Menu.Menu>
- </Container>
- </Menu>
-);
-
class Header extends Component {
constructor(props) {
super(props);
this.state = {
- visible: false,
+ isOpen: false,
};
}
+ // Fetch the userData-s
componentWillMount() {
this.props.getUserData();
}
- hideFixedMenu() {
- this.setState({ visible: false });
+ // Hide the menu after clicking an item on mobile
+ handleOpen = () => {
+ this.setState({ isOpen: true });
}
-
- showFixedMenu() {
- this.setState({ visible: true });
+ handleClose = () => {
+ this.setState({ isOpen: false });
}
-
render() {
- const { visible } = this.state;
-
return (
<div>
- {visible ? <FixedMenu user={this.props.user} /> : null}
- <Visibility
- onBottomPassed={() => this.showFixedMenu()}
- onBottomVisible={() => this.hideFixedMenu()}
- once={false}
- >
+ {/* Tablet, Computer, ... view */}
+ <Responsive minWidth={600} >
<Segment inverted textAlign='center' vertical>
<Container>
<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.prefix}{item.text}</Menu.Item>
- :
- null))}
-
+ {/* 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
+ ))
+ }
+ {/* 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.prefix}{item.text}
+ </Menu.Item>
+ : null
+ ))
+ }
+ </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>
+ {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>
+ <Button as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
}
</Menu.Item>
-
</Menu>
</Container>
</Segment>
- </Visibility>
+ </Responsive>
+ {/* Mobile view */}
+ <Responsive maxWidth={599}>
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <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?
+ <Menu.Item onClick={this.handleClose}
+ key={i} as={Link} to={item.to}>
+ {item.prefix}{item.text}
+ </Menu.Item>
+ : null
+ ))
+ }
+ <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>
+ :
+ <Button onClick={this.handleClose} as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
+ }
+ </Menu.Item>
+ </Menu>
+ </Popup>
+ </Menu>
+ </Container>
+ </Segment>
+ </Responsive>
</div>
);
}
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
index 7d11c33aebbcf51f5da365f23958224c288a162a..ea10f34d85164a5bd5e57c4049d64494118665fc 100644
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
@@ -39,6 +39,7 @@ const range = (count) => {
class Home extends Component {
render() {
+ const kszk_age = new Date().getFullYear() - 1976
return (
<div>
<div className='car-image-kszk'>
@@ -146,7 +147,7 @@ class Home extends Component {
<p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}>
A KolleĚgiumi SzaĚmiĚtaĚstechnikai KoĚr az Egyetem legreĚgebben muĚkoĚdoĚ
eĚs legnagyobb aktiĚv, informatikaĚval foglalkozoĚ oĚnteveĚkeny
- csoportosulaĚsa, idĂŠn ĂźnnepeljĂźk 42. szuĚleteĚsnapunkat. A patinaĚs
+ csoportosulaĚsa, idĂŠn ĂźnnepeljĂźk {kszk_age}. szuĚleteĚsnapunkat. A patinaĚs
neĚv moĚgoĚtt vidaĚm hangulatuĚ, alkotoĚ kedvuĚ csapat rejlik, mely a Kar
joĚ szakmai keĚpesseĚguĚ, szaĚmiĚtaĚstechnika iraĚnt kiemelten eĚrdekloĚdoĚ
tagjaiboĚl verbuvaĚloĚdott, eĚs boĚvuĚl eĚvente uĚj tehetseĚgekkel, lelkes
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index 807a91442463d5198df3a9996012e6b5880d515f..525c8273110f11a3179bb96ef16e17738be2f8e7 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 60fae4d92d0a00d905ba09e777ab240f575dcbd3..112e766d6fdc2d6a488de4651eb0361df8f2d22d 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>
);
}
}