From cc49b939d0524aac3adeb110ede9e060d88fa86a Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Mon, 15 Jan 2024 15:18:57 +0100
Subject: [PATCH] more cartouche lisibility improvements: concernement title
 ellipsis on scroll #2325

---
 src/assets/main.scss                      | 10 ++++++++++
 src/components/layout/CartoucheLayout.vue |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 8de888e..a2474ee 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -288,6 +288,16 @@ body{
             //   font-weight: 100;
             // }
             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{
           //   ul{
diff --git a/src/components/layout/CartoucheLayout.vue b/src/components/layout/CartoucheLayout.vue
index f2d5fd8..fe4e1b2 100644
--- a/src/components/layout/CartoucheLayout.vue
+++ b/src/components/layout/CartoucheLayout.vue
@@ -54,7 +54,7 @@ export default {
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
       <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
-      <h2>{{ concernement.title }}</h2>
+      <h2 :class="{ ellipsed: mainscrolled }">{{ concernement.title }}</h2>
       <!-- <nav class="icons">
         <ul>
           <li v-if="concernement.has_recit" >