Skip to content
Snippets Groups Projects
Commit a4e35934 authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

Merge branch 'responsive' into dev

parents 61097e67 b0425cd8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 1
− 1
View file @ a4e35934
......@@ -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
......
src/components/App.js
+ 1
− 0
View file @ a4e35934
......@@ -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' >
......
src/components/Footer.js
+ 1
− 1
View file @ a4e35934
......@@ -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 &copy; 2018-2019.</p>
<p textalign='center' >Created by DevTeam &copy; 2018-2020.</p>
</Container>
</Segment>
......
src/components/Header.js
+ 103
− 61
View file @ a4e35934
......@@ -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>
);
}
......
src/components/pages/Home.js
+ 2
− 1
View file @ a4e35934
......@@ -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 Kollégiumi Számítástechnikai Kör az Egyetem legrégebben működő
és legnagyobb aktív, informatikával foglalkozó öntevékeny
csoportosulása, idén ünnepeljük 42. születésnapunkat. A patinás
csoportosulása, idén ünnepeljük {kszk_age}. születésnapunkat. A patinás
név mögött vidám hangulatú, alkotó kedvű csapat rejlik, mely a Kar
jó szakmai képességű, számítástechnika iránt kiemelten érdeklődő
tagjaiból verbuválódott, és bővül évente új tehetségekkel, lelkes
......
src/components/pages/News.js
+ 1
− 1
View file @ a4e35934
......@@ -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' ?
......
src/components/pages/Schedule.js
+ 33
− 20
View file @ a4e35934
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>
);
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Hosted with :heart: by KSZK