Better view for phones

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.

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"
+    }
+  ]
 }

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

front/src/App.js

 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>
+      <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>
-      </div>
   );
 }
 

front/src/view/PageHeader.js

+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;