From 499faa89b66b7287137ae54cec32151c8c45c603 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Fri, 13 Oct 2017 16:15:07 +0200
Subject: [PATCH] :art: :phone: Bandeau beta compatible mobile

---
 source/containers/Layout.css | 15 ------------
 source/containers/Layout.js  | 44 ++++++++++++++++++++----------------
 source/containers/ribbon.css | 43 +++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 35 deletions(-)
 create mode 100644 source/containers/ribbon.css

diff --git a/source/containers/Layout.css b/source/containers/Layout.css
index 6e79aebc0..5a1335948 100644
--- a/source/containers/Layout.css
+++ b/source/containers/Layout.css
@@ -5,21 +5,6 @@ body {
 	font-size: calc(8px + .35vw)
 }
 
-#warning {
-	width: 400px;
-  padding: 6px;
-  position: absolute;
-  text-align: center;
-  color: white;
-	background: #333350;
-	border: 2px solid white;
-	position: fixed;
-	top: 35px;
-	left: -150px;
-	transform: rotate(-45deg);
-	font-weight: bold;
-}
-
 #content {
 	margin-top: 1.5em;
 }
diff --git a/source/containers/Layout.js b/source/containers/Layout.js
index b281a938e..c41711aa5 100644
--- a/source/containers/Layout.js
+++ b/source/containers/Layout.js
@@ -1,22 +1,25 @@
-import React, { Component } from "react"
-import "./Layout.css"
-import "./reset.css"
-import { Link, Route, Router, Switch } from "react-router-dom"
-import HomeEmbauche from "Components/HomeEmbauche"
-import HomeSyso from "Components/HomeSyso"
-import Rule from "Components/rule/Rule"
-import Route404 from "Components/Route404"
-import Contact from "Components/Contact"
-import Simulateur from "Components/Simulateur"
-import Results from "Components/Results"
+import React, { Component } from 'react'
+import './Layout.css'
+import './reset.css'
+import './ribbon.css'
+
+import {Link, Route, Router, Switch} from 'react-router-dom'
+import ReactPiwik from 'react-piwik'
+import createHistory from 'history/createBrowserHistory'
+
+import HomeEmbauche from 'Components/HomeEmbauche'
+import HomeSyso from 'Components/HomeSyso'
+import Rule from 'Components/rule/Rule'
+import Route404 from 'Components/Route404'
+import Contact from 'Components/Contact'
+import Simulateur from 'Components/Simulateur'
+import Results from 'Components/Results'
 import RulesList from "Components/RulesList"
-import ReactPiwik from "react-piwik"
-import createHistory from "history/createBrowserHistory"
 
 const piwik = new ReactPiwik({
-	url: "stats.data.gouv.fr",
+	url: 'stats.data.gouv.fr',
 	siteId: 39,
-	trackErrors: true
+	trackErrors: true,
 })
 
 export default class Layout extends Component {
@@ -35,11 +38,12 @@ export default class Layout extends Component {
 				<div id="main">
 					<div id="ninetyPercent">
 						<div id="header">
-							{displayWarning && (
-								<div id="warning">
-									<Link to="/contact">version BETA</Link>
-								</div>
-							)}
+
+							{ displayWarning &&
+								<span id="ribbon">
+									<Link to="/contact"><em>version beta</em> <i className="fa fa-flask" aria-hidden="true"></i></Link>
+								</span>
+							}
 							{
 								// this.props.location.pathname != '/' &&
 								// <Link to="/">
diff --git a/source/containers/ribbon.css b/source/containers/ribbon.css
new file mode 100644
index 000000000..7d8c4f8bd
--- /dev/null
+++ b/source/containers/ribbon.css
@@ -0,0 +1,43 @@
+
+#ribbon {
+}
+#ribbon a {
+    display: block;
+    background: #333350;
+    color: #fff;
+    text-decoration: none;
+    font-family: arial, sans-serif;
+    text-align: center;
+    font-weight: bold;
+    padding: 5px 40px;
+    font-size: .8rem;
+    line-height: .6rem;
+    position: relative;
+    transition: 0.5s;
+    box-shadow: -1px 1px 16px 3px rgba(0, 0, 0, 0.2)
+}
+#ribbon a:hover {
+    background: #4A89DC;
+    color: #fff;
+}
+@media screen and (min-width:800px) {
+    #ribbon {
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 200px;
+      overflow: hidden;
+      height: 200px;
+      z-index: 9999;
+    }
+    #ribbon a {
+      font-size: 1rem;
+      line-height: 1.6rem;
+      width: 150px;
+      position: absolute;
+      top: 35px;
+      left: -60px;
+      transform: rotate(-45deg);
+    }
+}