Commit 9096780b authored by Anthony ANGELOT's avatar Anthony ANGELOT Committed by Jérémy GAILLARD
Browse files

New header

parent a234cf88
......@@ -55,7 +55,7 @@ h1 {
font-weight: 900;
font-size: 1.8vw;
color : black;
margin: 3% 0;
margin: 1% 0;
}
h2 {
......
<template>
<header>
<a href="https://www.toodego.com/connect/" target="_blank"><img class="logo_left" src="../static/toodego.svg" alt="Logo_Toodego" ></a>
<p> <b>Facilitez vous la ville</b> pendant le confinement ! </p>
<div class="text">
<p> <b>Facilitez vous la ville</b> </p>
<p> pendant le confinement ! </p>
</div>
<div class="right">
<a href="https://www.grandlyon.com/" target="_blank"><img class="logo_right" src="../static/logo_GL.svg" alt="Logo_GrandLyon" ></a>
<div class="radio-toolbar">
<input type="radio" id="Accueil" value="Accueil" @change="page = $emit('changePageHome')" name="menu" v-model="menu_filter">
<label for="Accueil">
<p>Accueil</p>
</label>
</div>
<div class="radio-toolbar">
<input type="radio" id="Rechercher" value="Rechercher" @change="page = $emit('changePageList')" name="menu" v-model="menu_filter">
<label for="Rechercher">
<p>Rechercher</p>
</label>
</div>
<div class="radio-toolbar">
<input type="radio" id="Proposer" value="Proposer" @change="page = $emit('changePageForm')" name="menu" v-model="menu_filter">
<label for="Proposer">
<p>Proposer</p>
</label>
</div>
</div>
</header>
</template>
<script>
export default {
data: function() {
return {
menu_filter: "Accueil"
}
}
}
</script>
<style scoped>
header {
display: flex;
......@@ -17,26 +48,59 @@ header {
p {
float:left;
padding-left: 2%;
font-size: 1.1vw;
font-size: 0.9vw;
margin: 1% 3%;
}
.logo_left{
max-width: 100%;
float: left;
}
.right {
display: inline-block;
position: absolute;
display: flex;
right: 10%;
width: 30%;
position: absolute;
justify-content: flex-end;
}
.logo_right {
float: right;
max-width: 100%;
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
label {
background-color: var(--very-light-grey);
}
.right p {
cursor:pointer;
font-weight: bold;
}
.radio-toolbar{
margin: 25%;
}
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar:hover label{
color: var(--medium-red);
}
.radio-toolbar input[type="radio"]:checked+label {
color: var(--medium-red);
}
.radio-toolbar input[type="radio"]:checked+label p{
border-bottom: 2px solid var(--medium-red);
}
/* mobile */
@media (max-width: 600px) {
......
<template>
<div>
<Header></Header>
<Header @changePageHome="pageChange('home')" @changePageList="pageChange('list')" @changePageForm="pageChange('form')"></Header>
<News v-if="news !== null" :news="news"></News>
<Title v-if='page === "list" || page === "home"'></Title>
<transition name="fade">
<div v-if='page === "list"'>
<div class="initiative">
<div class="initiative_title">
<h1>Retrouvez et proposez des initiatives </h1>
<h1>dans la Métropole de Lyon </h1>
<h1><span class="underline_title"> pour vous aider et pour aider </span></h1>
<h1>pendant le confinement</h1>
</div>
<div class="addoffer">
<button @click='page = "form"; stats("Add_Initiative")'>
<img src="../static/Union.svg" alt="+">
<p> proposer une initiative </p>
</button>
</div>
</div>
<div v-if='page === "home"'>
</div>
</transition>
......@@ -134,6 +121,7 @@ import CGU from './CGU.vue'
import Charte from './Charte.vue'
import Header from './Header.vue'
import News from './News.vue'
import Title from './Title.vue'
import Stayathome from './Stayathome.vue'
export default {
name: 'MainPage',
......@@ -146,6 +134,7 @@ export default {
Charte,
Header,
News,
Title,
Stayathome,
},
props: {
......@@ -158,7 +147,7 @@ export default {
return {
services: null,
metadata: null,
page: "list",
page: "home",
news: null
}
},
......@@ -201,53 +190,6 @@ var _paq = window._paq || [];
opacity: 0;
}
.initiative {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #DCDCDC 100%), #EDEDED;
padding: 0.5% 10%;
text-align: left;
display: flex;
align-items: center;
}
.underline_title {
color: white;
background: red;
padding: 0 1%;
}
.addoffer{
display: inline-block;
position: absolute;
right: 10%;
width: 30%;
justify-content: flex-end;
}
.addoffer button{
background-color: var(--medium-red);
border: none;
color: white;
border-radius: 30px;
font-size: 1.2vw;
font-weight: bold;
font-family: Raleway;
height: 10%;
display: flex;
align-items: center;
width: 60%;
justify-content: center;
float: right;
}
.addoffer img{
height: 50%;
padding-right: 4%;
}
.addoffer p{
margin: 4%;
}
.notice_header{
background-color: var(--medium-grey);
padding: 1.5% 0;
......@@ -309,36 +251,6 @@ footer a{
}
@media (max-width: 600px) {
.initiative {
padding: 1% 2% 1% 2%;
text-align: center;
display: block;
}
.addoffer{
display: flex;
position: relative;
margin: 4% 20%;
width: 60%;
justify-content: center;
right: 0;
}
.addoffer button{
font-size: 3.5vw;
height: 10%;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
float: center;
height: 10vw;
}
.addoffer img{
width: 8%;
padding-right: 4%;
}
.bottom {
padding: 1% 10% 1% 10%;
......
<template>
<div class="initiative">
<h1>Retrouvez et proposez des initiatives dans la Métropole de Lyon</h1>
<h1><span class="underline_title">pour vous aider et pour aider</span> pendant le confinement</h1>
</div>
</template>
<style scoped>
.initiative {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #DCDCDC 100%), #EDEDED;
padding: 0.5% 10%;
text-align: center;
display: block;
align-items: center;
}
.underline_title {
color: white;
background: red;
padding: 0 1%;
}
/* mobile */
@media (max-width: 600px) {
.initiative {
padding: 1% 2% 1% 2%;
text-align: center;
display: block;
}
}
</style>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment