From 17b6c4257bfc52bebde3f4fd749c73d5b6a7ce3c Mon Sep 17 00:00:00 2001
From: vincent porte <vincent@neuralia.co>
Date: Thu, 21 Sep 2023 16:46:12 +0200
Subject: [PATCH] =?UTF-8?q?feat(stats):=C2=A0get=20responsive=20funnel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lacommunaute/static/images/funnel.png         | Bin 15423 -> 0 bytes
 .../static/stylesheets/itou_communaute.scss   | 146 +++++++++++-------
 .../templates/pages/statistiques.html         |  48 ++++--
 3 files changed, 124 insertions(+), 70 deletions(-)
 delete mode 100644 lacommunaute/static/images/funnel.png

diff --git a/lacommunaute/static/images/funnel.png b/lacommunaute/static/images/funnel.png
deleted file mode 100644
index 160811f5123fd92749018b3cbe9a16ce4ebd8dad..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15423
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

diff --git a/lacommunaute/static/stylesheets/itou_communaute.scss b/lacommunaute/static/stylesheets/itou_communaute.scss
index 434e094fe..57cf0b614 100644
--- a/lacommunaute/static/stylesheets/itou_communaute.scss
+++ b/lacommunaute/static/stylesheets/itou_communaute.scss
@@ -40,7 +40,7 @@
     border-radius: 50%;
     overflow: hidden;
 
-    > img {
+    >img {
       width: 100%;
       height: auto;
       object-fit: cover;
@@ -74,58 +74,6 @@
   border-color: #b3b4c3 !important;
 }
 
-.funnel-container {
-  position: relative;
-}
-
-.number-overlay {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.target {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-  font-weight: 300;
-  margin-top: 30px;
-}
-
-.number-overlay-top {
-  top: 15%;
-}
-
-.number-overlay-middle {
-  top: 45%;
-  color: #fff;
-}
-
-.number-overlay-bottom {
-  top: 80%;
-  color: #fff;
-}
-
-.text-overlay {
-  position: absolute;
-  font-size: 12px;
-  font-weight: 300;
-}
-
-.text-overlay-top {
-  top: 10%;
-}
-
-.text-overlay-middle {
-  top: 45%;
-}
-
-.text-overlay-bottom {
-  top: 75%;
-}
 
 .btn-poster {
   padding: 0 !important;
@@ -154,7 +102,7 @@ span.highlighted {
 .input-group-rounded-pill {
   border-radius: 50rem !important;
 
-  > input {
+  >input {
     border-top-left-radius: 50rem !important;
     border-bottom-left-radius: 50rem !important;
   }
@@ -165,3 +113,93 @@ span.highlighted {
     border-bottom-right-radius: 50rem !important;
   }
 }
+
+.funnel {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: #fff;
+
+  .number {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .comment {
+    font-size: 10px;
+  }
+
+  li {
+    padding: 10px 5px;
+    margin: 0;
+    margin-bottom: 5px;
+    position: relative;
+    overflow: hidden;
+    height: 110px;
+  }
+
+  li:before,
+  li:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 0;
+    border-bottom: 110px solid #fff;
+  }
+
+  li:before {
+    left: 0;
+    border-right: 27px solid transparent;
+    border-left: 0;
+  }
+
+  li:after {
+    right: 0;
+    border-left: 27px solid transparent;
+    border-right: 0;
+  }
+
+  li:nth-child(1) {
+    color: #000638;
+    background-color: #d8ede3;
+  }
+
+  li:nth-child(1):before,
+  li:nth-child(1):after {
+    width: 25px;
+  }
+
+  li:nth-child(2) {
+    background-color: #60a47c;
+  }
+
+  li:nth-child(2):before,
+  li:nth-child(2):after {
+    width: 55px;
+  }
+
+  li:nth-child(3) {
+    background-color: #3e7152;
+  }
+
+  li:nth-child(3):before,
+  li:nth-child(3):after {
+    width: 84px;
+  }
+}
+
+.legend {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    padding: 10px 5px;
+    margin: 0;
+    margin-bottom: 5px;
+    position: relative;
+    overflow: hidden;
+    height: 110px;
+  }
+}
diff --git a/lacommunaute/templates/pages/statistiques.html b/lacommunaute/templates/pages/statistiques.html
index 3158a82c6..a8f11431c 100644
--- a/lacommunaute/templates/pages/statistiques.html
+++ b/lacommunaute/templates/pages/statistiques.html
@@ -24,25 +24,42 @@ <h1 class="s-title-01__title h1"><strong>Statistiques</strong></h1>
                     <div class="card c-card mb-3 mb-md-5">
                         <div class="card-header">
                             <h2>Acquisition</h2>
-
                         </div>
                         <div class="card-body">
                             <div class="row">
-                                <div class="col funnel-container">
-                                    <img src="{% static 'images/funnel.png' %}" alt="Entonnoir d'aquisition des utilisateurs">
-                                    <span class="number-overlay number-overlay-top">3192</span>
-                                    <span class="number-overlay number-overlay-top target">-16%/mois précédent</span>
-                                    <span class="number-overlay number-overlay-middle">3067</span>
-                                    <span class="number-overlay number-overlay-middle target">96% des Utilisateurs<br>+1,4%/mois précédent</span>
-                                    <span class="number-overlay number-overlay-bottom">1539</span>
-                                    <span class="number-overlay number-overlay-bottom target text-center">50.2% des Util. Actifs<br>+3%/mois préc.</span>
+                                <div class="col-12 col-lg-6">
+                                    <ul class="funnel">
+                                        <li>
+                                            <div>Utilisateurs</div>
+                                            <div class="number">3192</div>
+                                            <div class="comment">-16%/mois précédent</div>
+                                        </li>
+                                        <li>
+                                            <div>Utilisateurs actifs</div>
+                                            <div class="number">3067</div>
+                                            <div class="comment">96% des Utilisateurs</div>
+                                            <div class="comment">+1,4%/mois précédent</div>
+                                        </li>
+                                        <li>
+                                            <div>Utilisateurs engagés</div>
+                                            <div class="number">1539</div>
+                                            <div class="comment">50.2% des Util. Actifs</div>
+                                            <div class="comment">+3%/mois préc.</div>
+                                        </li>
+                                    </ul>
                                 </div>
-                                <div class="col ">
-                                    <span class="text-overlay text-overlay-top">
-                                        <h3 class="mb-1">Utilisateurs</h3>visiteurs uniques ayant au moins accédé à la page d'accueil
-                                    </span>
-                                    <span class="text-overlay text-overlay-middle"><h3 class="mb-1">Utilisateurs Actifs</h3>visiteurs uniques ayant au moins parcouru le fil d'actualités d'une communauté</span>
-                                    <span class="text-overlay text-overlay-bottom"><h3 class="mb-1">Utilisateurs Engagés</h3>visiteurs uniques ayant posé une question, cherché ou posté une réponse</span>
+                                <div class="col-12 col-lg-6">
+                                    <ul class="legend">
+                                        <li>
+                                            <h3 class="mt-1">Utilisateurs</h3>visiteurs uniques ayant au moins accédé à la page d'accueil
+                                        </li>
+                                        <li>
+                                            <h3 class="mt-1">Utilisateurs Actifs</h3>visiteurs uniques ayant au moins parcouru le fil d'actualités d'une communauté
+                                        </li>
+                                        <li>
+                                            <h3 class="mt-1">Utilisateurs Engagés</h3>visiteurs uniques ayant posé une question, cherché ou posté une réponse
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
                         </div>
@@ -57,7 +74,6 @@ <h3 class="mb-1">Utilisateurs</h3>visiteurs uniques ayant au moins accédé à l
         </div>
     </section>
 
-
     <section class="s-section">
         <div class="s-section__container container">
             <div class="s-section__row row">