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

better cartouch lisibility #2325

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-11-01 13:45:26 +01:00
parent fba8fcd6d7
commit 4bf9baac4d
2 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/assets/main.scss
View File

@ -165,11 +165,11 @@ body{
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
@mixin main-cartouche{ @mixin main-cartouche{
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
width:$cartouch_width; width:$cartouch_width;
height: 100%; height: 100%;
padding: 1rem 1rem 1rem; padding: 2rem 2rem 1rem;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
// //
@ -207,23 +207,42 @@ body{
} }
>footer{ >footer{
flex: 0 0 auto; flex: 0 0 auto;
padding: 1em 0 0; padding: 0.5em 0 0;
margin: 1.5em 0 0;
border-top: #01ffe2 solid 0.5px;
} }
>header{ >header{
flex: 0 0 auto; flex: 0 0 auto;
} }
// contents // contents
$gradpad: 20px;
>header{ >header{
display: flex; display: flex;
// height: 8rem; // height: 8rem;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
// gradiaent over scroll
position: relative;
&:before{
content: ' ';
display: block;
position:absolute;
width: 100%; height:$gradpad;
z-index: 500;
bottom: 0; left: 0; margin-bottom: - $gradpad;
// background-color: #01ffe2;
background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
}
div.entite{ div.entite{
// min-height: 10em; // min-height: 10em;
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column;
// justify-content: flex-end; // justify-content: flex-end;
padding-bottom: 0.5em;
label, h3{ label, h3{
// height: 70px; // height: 70px;
box-sizing: border-box; box-sizing: border-box;
@ -247,7 +266,7 @@ body{
display: block; display: block;
font-weight: 100; font-weight: 100;
font-size: 0.882em; font-size: 0.882em;
padding: 0.5em 0; padding: 1em 0;
} }
} }
div.concernement-cartouche-icons{ div.concernement-cartouche-icons{
@ -284,10 +303,11 @@ body{
>main{ >main{
overflow-y: auto; overflow-y: auto;
padding-top: $gradpad;
>section:not(:last-of-type), >section:not(:last-of-type),
.multiple >section:not(:last-of-type){ .multiple >section:not(:last-of-type){
padding-bottom: 1em; padding-bottom: 2em;
} }
figure{ figure{
margin:0.5em 0; margin:0.5em 0;
@ -297,6 +317,10 @@ body{
} }
section.entite{ section.entite{
>section{
padding-bottom: 2em;
}
.sources{ .sources{
padding-top: 1em; padding-top: 1em;
.source{ .source{
@ -533,7 +557,7 @@ body{
display: block; display: block;
font-weight: 100; font-weight: 100;
font-size: 0.882em; font-size: 0.882em;
padding: 0 0 0.5em 0; padding: 0 0 1em 0;
} }
ul, li{ ul, li{
padding:0; margin:0; padding:0; margin:0;

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

@ -161,7 +161,7 @@ export default {
<!-- TODO update entite with revisions --> <!-- TODO update entite with revisions -->
<span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span> <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
<span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span> <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
<h3 v-if="entite">{{ entite.title }}</h3> <h3 v-if="entite">hello {{ entite.title }}</h3>
</div> </div>
</template> </template>