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

more cartouche lisibility improvements: concernement title ellipsis on scroll #2325

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2024-01-15 15:18:57 +01:00
parent 8b79c2312b
commit cc49b939d0
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/main.scss
View File

@ -288,6 +288,16 @@ body{
// font-weight: 100; // font-weight: 100;
// } // }
padding-bottom: 0.5em; padding-bottom: 0.5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 20;
max-height: 20em;
transition: -webkit-line-clamp 0.5s ease-in-out, max-height 0.5s ease-in-out;
&.ellipsed{
max-height: 2em;
-webkit-line-clamp: 2;
}
} }
// nav.icons{ // nav.icons{
// ul{ // ul{

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

@ -54,7 +54,7 @@ export default {
<header ref="cartouche_header"> <header ref="cartouche_header">
<div class="concernement-cartouche-icons"> <div class="concernement-cartouche-icons">
<label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label> <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
<h2>{{ concernement.title }}</h2> <h2 :class="{ ellipsed: mainscrolled }">{{ concernement.title }}</h2>
<!-- <nav class="icons"> <!-- <nav class="icons">
<ul> <ul>
<li v-if="concernement.has_recit" > <li v-if="concernement.has_recit" >