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

highlighted icons on mapnav active item #2244

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-10-06 11:15:21 +02:00
parent 5e5cf061c5
commit 7fb5244d1c
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/common.scss
View File

@ -11,12 +11,13 @@ $pad_btn: 0.5em;
span.icon{
background-repeat: no-repeat;
background-position: middle center;
background-size: contain;
background-position: center;
background-size: 85%;
display: inline-block;
vertical-align:bottom;
width: 1.5em;
height:1.5em;
border-radius: 0.75em;
&.terraindevie{
background-image: url('./icons/terraindevie.svg');
}

10
src/assets/main.scss
View File

@ -100,7 +100,14 @@ body{
a{
@include btn();
display: block;
line-height: 2.1;
// line-height: 2.1;
line-height: 1.7;
&.active{
// color: red;
span.icon{
background-color: rgba(255, 255, 255, 0.6);
}
}
&.disabled{
pointer-events: none;
opacity: 0.4;
@ -123,6 +130,7 @@ body{
}
}
}
$cartouch_width : 450px;
#content{
display: flex;

23
src/components/MapConcernements.vue
View File

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