Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[STATS] un entonnoir adaptatif #418

Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix: a11y & dom
hellodeloo committed Sep 22, 2023
commit 9bdc233d1ebddea52166961dc707248e50f4af0e
109 changes: 47 additions & 62 deletions lacommunaute/static/stylesheets/itou_communaute.scss
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@
border-radius: 50%;
overflow: hidden;

>img {
> img {
width: 100%;
height: auto;
object-fit: cover;
@@ -74,7 +74,6 @@
border-color: #b3b4c3 !important;
}


.btn-poster {
padding: 0 !important;
background-color: transparent !important;
@@ -102,7 +101,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;
}
@@ -115,91 +114,77 @@ span.highlighted {
}

.funnel {
position: relative;
overflow: hidden;
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 {
&:before,
&:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
height: 0;
border-bottom: 110px solid #fff;
width: 0;
border-left: 0;
border-right: 0;
border-bottom: 450px solid white;
}

li:before {
&:before {
left: 0;
border-right: 27px solid transparent;
border-left: 0;
border-right: 50px solid transparent;

@media (min-width: 992px) {
border-right: 100px solid transparent;
}
}

li:after {
&:after {
right: 0;
border-left: 27px solid transparent;
border-right: 0;
}
border-left: 50px solid transparent;

li:nth-child(1) {
color: #000638;
background-color: #d8ede3;
@media (min-width: 992px) {
border-left: 100px solid transparent;
}
}

li:nth-child(1):before,
li:nth-child(1):after {
width: 25px;
}
> div {
padding: 16px 8px;
margin: 0;
margin-bottom: 8px;
min-height: 140px;

li:nth-child(2) {
background-color: #60a47c;
}
> span {
display: block;
}

li:nth-child(2):before,
li:nth-child(2):after {
width: 55px;
}
&:nth-child(1) {
color: #000638;
background-color: #d8ede3;
}

li:nth-child(3) {
background-color: #3e7152;
}
&:nth-child(2) {
background-color: #60a47c;
}

li:nth-child(3):before,
li:nth-child(3):after {
width: 84px;
&:nth-child(3) {
background-color: #3e7152;
}
}
}

.legend {
list-style-type: none;
margin: 0;
padding: 0;
.definition {
> div {
padding: 16px 8px 0 16px;
margin-bottom: 8px;

li {
padding: 10px 5px;
margin: 0;
margin-bottom: 5px;
position: relative;
overflow: hidden;
height: 110px;
@media (min-width: 992px) {
min-height: 140px;
}
}
}
129 changes: 63 additions & 66 deletions lacommunaute/templates/pages/statistiques.html
Original file line number Diff line number Diff line change
@@ -21,79 +21,76 @@ <h1 class="s-title-01__title h1"><strong>Statistiques</strong></h1>
<div class="s-section__container container">
<div class="s-section__row row">
<div class="s-section__col col-12">
<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-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-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 class="c-box mb-3 mb-md-5">
<h2>Acquisition</h2>
<div class="row">
<div class="col-12 col-lg-6">
<figure class="funnel">
<div>
<span class="display-3">Utilisateurs</span>
<span class="h2 mb-0">3192</span>
<span class="fs-sm">-16%/mois précédent</span>
</div>
<div>
<span class="display-3 text-white">Utilisateurs actifs</span>
<span class="h2 mb-0 text-white">3067</span>
<ul class="list-unstyled fs-sm mb-0">
<li>
96% des Utilisateurs
</li>
<li>
+1,4%/mois précédent
</li>
</ul>
</div>
<div>
<span class="display-3 text-white">Utilisateurs engagés</span>
<span class="h2 mb-0 text-white">1539</span>
<ul class="list-unstyled fs-sm mb-0">
<li>
50.2% des Util. Actifs
</li>
<li>
+3%/mois préc.
</li>
</ul>
</div>
<figcaption class="fs-sm text-muted">
Période : Août 2023
</figcaption>
</figure>
</div>
<div class="col-12 col-lg-6">
<dl class="definition">
<div>
<dt class="h4 mb-0">Utilisateurs</dt>
<dd class="mb-0">
Visiteurs uniques ayant au moins accédé à la page d'accueil
</dd>
</div>
<div>
<dt class="h4 mb-0">Utilisateurs Actifs</dt>
<dd class="mb-0">
Visiteurs uniques ayant au moins parcouru le fil d'actualités d'une communauté
</dd>
</div>
<div>
<dt class="h4 mb-0">Utilisateurs Engagés</dt>
<dd class="mb-0">
Visiteurs uniques ayant posé une question, cherché ou posté une réponse
</dd>
</div>
</dl>
</div>
</div>
<div class="card-footer">
<small class="text-muted">
Période : Août 2023
</small>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="s-section">
<div class="s-section__container container">
<div class="s-section__row row">
<div class="s-section__col col-12">
<div class="card c-card mb-3 mb-md-5">
<div class="card-header">
<h2>Vue quotidienne</h2>
</div>
<div class="card-body">
<canvas id="statChart"></canvas>
</div>
<div class="card-footer">
<small class="text-muted">
<ul>
<li>Utilisateurs : visiteurs uniques ayant au moins accédé à la page d'accueil</li>
<li>Utilisateurs actifs : visiteurs uniques ayant au moins parcouru le fil d'actualités d'une communauté</li>
<li>Utilisateurs engagés : visiteurs uniques ayant posé une question, cherché ou posté une réponse</li>
</ul>
</small>
</div>
<div class="c-box mb-3 mb-md-5">
<h2>Vue quotidienne</h2>
<canvas id="statChart"></canvas>
</div>
</div>
</div>