🎨 ☎️ Bandeau beta compatible mobile
parent
6d6bb216ba
commit
499faa89b6
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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="/">
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue