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

2
src/components/ConcernementMapItem.vue
View File

@ -2625,7 +2625,7 @@ export default {
if (group_to_hit) { if (group_to_hit) {
let result = group_to_hit.hitTest(event.point); let result = group_to_hit.hitTest(event.point);
console.log('click result', result); 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) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
case "superposition": case "superposition":

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

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

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

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

2
src/views/Concernement.vue
View File

@ -230,7 +230,7 @@ export default {
</script> </script>
<template> <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"/> <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"/> <PuissanceAgir v-if="map_mode === 'puissancedagir'" :cid="cid"/>
<Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/> <Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/>