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

better cartouch css

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2025-06-03 16:08:37 +02:00
parent bab0204ed7
commit f35493ea90
5 changed files with 85 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/assets/main.scss
View File

@ -224,7 +224,7 @@ div.loading{
box-sizing: border-box;
width:$cartouch_width_full;
height: 100%;
padding: 2rem 2rem 1rem;
padding: 1rem 1rem 1rem;
overflow-y: auto;
overflow-x: hidden;
//
@ -263,7 +263,7 @@ div.loading{
// layout
>header{
flex: 0 0 auto;
padding: 0 0 1em 0;
// padding: 0 0 1em 0;
}
>main{
flex: 1 1 auto;
@ -305,7 +305,7 @@ div.loading{
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
padding-bottom: 0.5em;
// padding-bottom: 0.5em;
label, h3{
// height: 70px;
box-sizing: border-box;
@ -325,15 +325,22 @@ div.loading{
font-weight: bold;
}
}
// span.menacemaintient{
// display: block;
// font-weight: 100;
// font-size: 0.882em;
// padding: 1em 0;
// }
section.entite-params{
padding:0.5em 0;
display: flex;
flex-direction: row;
gap:0.5em;
align-items: center;
>section.editable{
// margin: 0.3em;
flex: 1 0 auto;
}
}
}
div.concernement-cartouche-icons{
margin-bottom: 1em;
h2{
font-weight: 400;
font-size: 1.512em;
@ -341,6 +348,7 @@ div.loading{
// font-weight: 100;
// }
padding-bottom: 0.5em;
margin-top: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
@ -379,13 +387,23 @@ div.loading{
transition: max-height 0.5s ease-in-out,padding 0.5s ease-in-out;
max-height: 100px;
overflow: hidden;
&.hidden{
max-height: 0;
padding-bottom: 0;
// &.hidden{
// max-height: 0;
// padding-bottom: 0;
// }
}
}
&.entity-opened{
>header{
div.concernement-cartouche-icons{
label{
max-height: 0;
padding-bottom: 0;
}
}
}
}
>main{
overflow-y: auto;
padding-top: $gradpad;
@ -699,7 +717,7 @@ div.loading{
span.date{
@include font_questions();
display: block;
padding: 0 0 1em 0;
padding: 0 0 0.3em 0;
}
ul, li{
padding:0; margin:0;
@ -1065,7 +1083,7 @@ div.dp__main{
border-radius: 5px;
$p:0.3em;
padding:$p;
margin:0.5em 0 0 -$p;
margin:0 0 0 -$p;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
box-shadow: 2px 2px 4px #bbb;

2
src/components/ConcernementMapItem.vue
View File

@ -2625,7 +2625,7 @@ export default {
if (group_to_hit) {
let result = group_to_hit.hitTest(event.point);
console.log('click result', result);
if (result) {
if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
switch (this.map_mode) {
case "terraindevie":
case "superposition":

72
src/components/contents/TerrainDeVie.vue
View File

@ -594,44 +594,44 @@ export default {
</div>
</section>
<!-- active -->
<CheckboxEditable
v-if="entite && entite.can_update"
:checked="this.parag_entite.active"
label="Active"
:data="{
entitytype: 'paragraph',
bundle: 'entite_concernement',
id: this.parag_entite.id,
field: 'field_active'}"
v-on:updated="reloadConcernementEntites(cid)"/>
<section class="entite-params" v-if="entite && entite.can_update">
<!-- active -->
<CheckboxEditable
:checked="this.parag_entite.active"
label="Active"
:data="{
entitytype: 'paragraph',
bundle: 'entite_concernement',
id: this.parag_entite.id,
field: 'field_active'}"
v-on:updated="reloadConcernementEntites(cid)"/>
<!-- agissante -->
<CheckboxEditable
v-if="entite && entite.can_update"
:checked="entite.agissante"
label="Entité action"
:data="{
entitytype: 'node',
bundle: 'entite',
id: this.entite.id,
field: 'field_entite_agissante'}"
v-on:updated="reloadConcernementEntites(cid)"/>
<!-- agissante -->
<CheckboxEditable
:checked="entite.agissante"
label="Entité action"
:data="{
entitytype: 'node',
bundle: 'entite',
id: this.entite.id,
field: 'field_entite_agissante'}"
v-on:updated="reloadConcernementEntites(cid)"/>
<SelectEditable
v-if="entite && entite.can_update"
label="Confidentialité"
:value="entite.confidentialite"
:options="{
'confidentialite_prive': 'privé',
'confidentialite_interne': 'interne',
'confidentialite_public': 'public'}"
:data="{
entitytype: 'node',
bundle: 'entite',
nid: this.entite.id,
field: 'field_confidentialite'}"
v-on:updated="reloadConcernementEntites(cid)"/>
<!-- confidentialité -->
<SelectEditable
label="Confidentialité"
:value="entite.confidentialite"
:options="{
'confidentialite_prive': 'privé',
'confidentialite_interne': 'interne',
'confidentialite_public': 'public'}"
:data="{
entitytype: 'node',
bundle: 'entite',
nid: this.entite.id,
field: 'field_confidentialite'}"
v-on:updated="reloadConcernementEntites(cid)"/>
</section>
</div>

28
src/components/layout/CartoucheLayout.vue
View File

@ -25,18 +25,18 @@ export default {
},
mounted () {
// console.log('cartouche layout mounted', this);
this.$refs.cartouche_main.addEventListener('scroll', (event) => {
// console.log('main is scrolling', event);
let $main = event.target;
let scrolled = $main.scrollTop > 0;
this.$emit('main_scrolled', scrolled);
// TODO how to make this failsafe limit responsive ?
if(scrolled && $main.scrollHeight > 900){
this.headerreduced = true;
} else {
this.headerreduced = false;
}
})
// this.$refs.cartouche_main.addEventListener('scroll', (event) => {
// console.log('main is scrolling', event);
// let $main = event.target;
// let scrolled = $main.scrollTop > 0;
// this.$emit('main_scrolled', scrolled);
// // TODO how to make this failsafe limit responsive ?
// if(scrolled && $main.scrollHeight > 900){
// this.headerreduced = true;
// } else {
// this.headerreduced = false;
// }
// })
},
computed: {
...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
@ -74,8 +74,8 @@ export default {
<template>
<header ref="cartouche_header">
<div class="concernement-cartouche-icons">
<label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
<label class="concernement-label">{{ ct_concernement.title.description }}</label>
<!-- :class="{ hidden: headerreduced }" -->
<ContentEditable
tag="h2"
:value="concernement.title"

2
src/views/Concernement.vue
View File

@ -230,7 +230,7 @@ export default {
</script>
<template>
<section v-if="opened_concernement" class="concernement">
<section v-if="opened_concernement" class="concernement" :class="{ 'entity-opened': main_cid_eid.eid }">
<TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action' || map_mode === 'superposition' || map_mode === 'proximite'" :cid="main_cid_eid.cid" :eid="main_cid_eid.eid"/>
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :cid="cid"/>
<Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/>