From 9a8dfc4f1c93cf1f3ba344551c1cd186ea39c9ca Mon Sep 17 00:00:00 2001
From: Damien <damien.armillon@gmail.com>
Date: Sun, 19 May 2019 11:39:58 +0200
Subject: [PATCH] Better view for phones
---
front/public/index.html | 1 +
front/public/manifest.json | 8 +++++++-
front/src/App.css | 13 +++++++++++++
front/src/App.js | 26 ++++++++------------------
front/src/view/PageHeader.js | 30 ++++++++++++++++++++++++++++++
5 files changed, 59 insertions(+), 19 deletions(-)
create mode 100644 front/src/view/PageHeader.js
diff --git a/front/public/index.html b/front/public/index.html
index 517bf40..a279663 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -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.
diff --git a/front/public/manifest.json b/front/public/manifest.json
index f9051fe..a179b2a 100644
--- a/front/public/manifest.json
+++ b/front/public/manifest.json
@@ -4,5 +4,11 @@
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
- "background_color": "#ffffff"
+ "background_color": "#ffffff",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "48x48"
+ }
+ ]
}
diff --git a/front/src/App.css b/front/src/App.css
index ef47db1..6375f40 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -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
diff --git a/front/src/App.js b/front/src/App.js
index 35618d8..080821a 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,31 +1,21 @@
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>
);
}
diff --git a/front/src/view/PageHeader.js b/front/src/view/PageHeader.js
new file mode 100644
index 0000000..6e5c4d0
--- /dev/null
+++ b/front/src/view/PageHeader.js
@@ -0,0 +1,30 @@
+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;
--
GitLab