Skip to content

Commit

Permalink
fix: a11y & dom
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellodeloo
hellodeloo committed Sep 22, 2023
1 parent fe89360 commit 9bdc233
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 128 deletions.
109 changes: 47 additions & 62 deletions lacommunaute/static/stylesheets/itou_communaute.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
border-radius: 50%;
overflow: hidden;

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


.btn-poster {
padding: 0 !important;
background-color: transparent !important;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 9bdc233

Please sign in to comment.