bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started search router view

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-08-13 20:18:11 +02:00
parent 0fc1cd12dd
commit 749ffd3867
8 changed files with 218 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/MapConcernements.vue
View File

@@ -1023,49 +1023,49 @@ export default {
<ul>
<li>
<a
href="#terraindevie" @click="setMapMode('terraindevie')"
title="terrain de vie" href="#terraindevie" @click="setMapMode('terraindevie')"
>
<span class="icon terraindevie"></span> terrain de vie
<span class="icon terraindevie"></span> <span class="label"> terrain de vie</span>
</a>
</li>
<li>
<a
href="#proximite" @click="setMapMode('proximite')"
title="proximite" href="#proximite" @click="setMapMode('proximite')"
:class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
>
<span class="icon proximite"></span> proximité
<span class="icon proximite"></span> <span class="label"> proximité</span>
</a>
</li>
<li>
<a
href="#superposition" @click="setMapMode('superposition')"
title="superposition" href="#superposition" @click="setMapMode('superposition')"
:class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
>
<span class="icon superposition"></span> superposition
<span class="icon superposition"></span> <span class="label"> superposition</span>
</a>
</li>
<li>
<a
href="#puissancedagir" @click="setMapMode('puissancedagir')"
title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
:class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
>
<span class="icon puissancedagir"></span> puissance d'agir
<span class="icon puissancedagir"></span> <span class="label"> puissance d'agir</span>
</a>
</li>
<li>
<a
href="#action" @click="setMapMode('action')"
title="action" href="#action" @click="setMapMode('action')"
:class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
>
<span class="icon action"></span> action
<span class="icon action"></span> <span class="label"> action</span>
</a>
</li>
<li>
<a
href="#doleancer" @click="setMapMode('doleancer')"
title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
:class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
>
<span class="icon doleancer"></span> cercle politique
<span class="icon doleancer"></span> <span class="label"> cercle politique</span>
</a>
</li>
</ul>

85
src/components/block/SearchBlock.vue
View File

@@ -1,7 +1,7 @@
<script>
import { mapActions, mapState } from 'pinia'
import { StaticsStore } from '@/stores/statics'
// import { SearchStore } from '@/stores/search'
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
@@ -14,17 +14,14 @@ export default {
}
},
computed: {
...mapState(StaticsStore,['statics'])
// ...mapState(SearchStore,['statics'])
},
created () {
console.log("search created");
// this.loadStatics()
},
methods: {
...mapActions(StaticsStore,['loadStatics']),
onSubmitSearch (event) {
console.log("onSubmitSearch", event);
}
// ...mapActions(SearchStore,['loadStatics']),
},
components: {
SvgIcon
@@ -35,52 +32,48 @@ export default {
<template>
<div id="search-block">
<label for="">
<router-link :to="{ name: 'search' }">
<svg-icon type="mdi" :path="magnify_path"></svg-icon>
<span>recherche</span>
</label>
<form action="" @submit.prevent="onSubmitSearch">
<input type="text">
<input type="submit" value="rechercher">
</form>
</router-link>
</div>
</template>
<style lang="scss" scoped>
$pad: 0.75em;
#search-block{
position: relative;
// $pad: 0.75em;
// #search-block{
// position: relative;
span{
display: inline-block;
@include btn();
}
form{
background-color: #fff;
border-radius: 5px;
padding: 0 $pad;
position: absolute;
bottom: 110%;
left: -$pad;
>*{
margin: 0 0 0.5em 0;
}
overflow: hidden;
max-height:1px;
opacity: 0;
$delay: 0.5s;
transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
}
&:hover{
form{
box-shadow: 0 0 5px $btns_back;
padding: $pad;
max-height: 100px;
opacity: 1;
transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
}
}
}
// span{
// display: inline-block;
// @include btn();
// }
// form{
// background-color: #fff;
// border-radius: 5px;
// padding: 0 $pad;
// position: absolute;
// bottom: 110%;
// left: -$pad;
// >*{
// margin: 0 0 0.5em 0;
// }
// overflow: hidden;
// max-height:1px;
// opacity: 0;
// $delay: 0.5s;
// transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
// }
// &:hover{
// form{
// box-shadow: 0 0 5px $btns_back;
// padding: $pad;
// max-height: 100px;
// opacity: 1;
// transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
// }
// }
// }
</style>