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{ span.icon{
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: middle center; background-position: center;
background-size: contain; background-size: 85%;
display: inline-block; display: inline-block;
vertical-align:bottom; vertical-align:bottom;
width: 1.5em; width: 1.5em;
height:1.5em; height:1.5em;
border-radius: 0.75em;
&.terraindevie{ &.terraindevie{
background-image: url('./icons/terraindevie.svg'); background-image: url('./icons/terraindevie.svg');
} }

10
src/assets/main.scss
View File

@ -100,7 +100,14 @@ body{
a{ a{
@include btn(); @include btn();
display: block; 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{ &.disabled{
pointer-events: none; pointer-events: none;
opacity: 0.4; opacity: 0.4;
@ -123,6 +130,7 @@ body{
} }
} }
} }
$cartouch_width : 450px; $cartouch_width : 450px;
#content{ #content{
display: flex; display: flex;

23
src/components/MapConcernements.vue
View File

@ -1308,48 +1308,49 @@ export default {
<li> <li>
<a <a
title="terrain de vie" href="#terraindevie" @click="setMapMode('terraindevie')" 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> </a>
</li> </li>
<li> <li>
<a <a
title="proximite" href="#proximite" @click="setMapMode('proximite')" 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> </a>
</li> </li>
<li> <li>
<a <a
title="superposition" href="#superposition" @click="setMapMode('superposition')" 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> </a>
</li> </li>
<li> <li>
<a <a
title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')" 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> </a>
</li> </li>
<li> <li>
<a <a
title="action" href="#action" @click="setMapMode('action')" 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> </a>
</li> </li>
<li> <li>
<a <a
title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')" 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> </a>
</li> </li>
</ul> </ul>