From 50ffeb8cde68b8fdbf3b22c9fd70b30e93643385 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Tue, 28 Jan 2020 13:53:29 +0100
Subject: [PATCH] popover menu
---
public/index.html | 2 +-
src/components/App.js | 1 +
src/components/Header.js | 72 ++++++++++++++++++++++++------------
src/components/pages/Home.js | 3 +-
4 files changed, 53 insertions(+), 25 deletions(-)
diff --git a/public/index.html b/public/index.html
index 0f7dc38..e1b4c45 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 5f20307..0661e3e 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/Header.js b/src/components/Header.js
index c27945d..b0b7649 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -7,6 +7,9 @@ import {
Segment,
Visibility,
Image,
+ Grid,
+ Popup,
+ Icon,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getUserData } from '../actions';
@@ -58,7 +61,7 @@ const menuItems = [
];
const FixedMenu = ({ user }) => (
- <Menu fixed='top' size='large' pointing>
+ <Menu vertical fixed='top' size='medium' pointing>
<Container>
{menuItems.map((item, i) =>
(user.permission >= item.permissionLevel ||
@@ -107,8 +110,7 @@ class Header extends Component {
render() {
const { visible } = this.state;
-
- return (
+ return (
<div>
{visible ? <FixedMenu user={this.props.user} /> : null}
<Visibility
@@ -117,30 +119,54 @@ class Header extends Component {
once={false}
>
<Segment inverted textAlign='center' vertical>
- <Container>
+ <Grid verticalAlign='middle' columns={5} centered>
+ <Grid.Row>
<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.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>
+ (item.permissionLevel === 0 ?
+ <Grid.Column>
+ <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
+ </Grid.Column>
+ : null
+ ))
+ }
+ <Popup trigger={
+ <Menu.Item>
+ <Icon name='angle down' size='large' />
+ </Menu.Item>
}
- </Menu.Item>
-
+ position='center'
+ flowing hoverable inverted>
+ <Menu inverted secondary size='large'>
+ <Grid.Row>
+ {menuItems.map((item, i) =>
+ (this.props.user.permission >= item.permissionLevel
+ && item.permissionLevel > 0?
+ <Grid.Column>
+ <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
+ </Grid.Column>
+ : null
+ ))
+ }
+ </Grid.Row>
+ </Menu>
+ </Popup>
+ <Grid.Column>
+ <Menu.Item floated='right' width={5}>
+ {
+ 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>
+ </Grid.Column>
</Menu>
- </Container>
+ </Grid.Row>
+ </Grid>
</Segment>
</Visibility>
</div>
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
index 7d11c33..ea10f34 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
--
GitLab