🎨 ☎️ Bandeau beta compatible mobile

pull/97/head
mama 2017-10-13 16:15:07 +02:00
parent 6d6bb216ba
commit 499faa89b6
3 changed files with 67 additions and 35 deletions

View File

@ -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;
}

View File

@ -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="/">

View File

@ -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);
}
}