Commit 9a8dfc4f authored by Damien's avatar Damien
Browse files

Better view for phones

parent 791f7ae8
......@@ -13,6 +13,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......
......@@ -4,5 +4,11 @@
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"background_color": "#ffffff",
"icons": [
{
"src": "favicon.ico",
"sizes": "48x48"
}
]
}
......@@ -10,3 +10,16 @@
justify-content: center;
font-size: calc(10px + 2vmin);
}
@media (max-aspect-ratio:1/1) {
.desktopItem {
display: none !important
}
}
@media (min-aspect-ratio:1/1) {
.phoneItem {
display: none !important
}
}
\ No newline at end of file
import React from 'react';
import {Image, Button} from 'semantic-ui-react'
import { BrowserRouter as Router, Route,Link } from 'react-router-dom';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import './App.css';
import AdminPage from './view/AdminPage/AdminPage';
import AllToucanPage from './view/AllToucanPage/AllToucanPage';
import PageHeader from './view/PageHeader'
import Login from './view/Login';
import env from './.env';
import isLogged from './utils/Oauth';
import logo from './image/logo.png'
function App() {
return (
<div >
<div style={{textAlign:"center"}}>
<Image src={logo} alt="Logo" href="/" style={{ width:'40%'}} />
</div>
<Router >
<div style={{textAlign:"right"}}>
<Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
<Button icon="male" content="Espace admin"/>
</Link>
</div>
<Route exact path='/' component={AllToucanPage} />
<Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
<Route exact path='/login/:token' component={Login} />
</Router>
</div>
<Router >
<PageHeader />
<Route exact path='/' component={AllToucanPage} />
<Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
<Route exact path='/login/:token' component={Login} />
</Router>
);
}
......
import React from 'react';
import {Image, Button} from 'semantic-ui-react'
import {Link} from 'react-router-dom'
import logo from '../image/logo.png'
const PageHeader = () => {
return (
[
// Si le format est celui d'un Pc
<div class="desktopItem" style={{textAlign:"center"}}>
<Image src={logo} alt="Logo" href="/" style={{ width:'40%'}} />
<Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
<Button icon="male" content="Espace admin"/>
</Link>
</div>,
// Si le format est celui d'un téléphone
<div class="phoneItem" style={{textAlign:"center"}}>
<Image src={logo} alt="Logo" href="/" style={{ margin: "2em"}} />
<br/>
<Link to="/admin" >
<Button icon="male" content="Espace admin" style={{margin:"1em"}}/>
</Link>
</div>
]
)
}
export default PageHeader;
Markdown is supported
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