Skip to content

Commit

Permalink
add other gender (successful: thank ChatGPT mentor)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hugolpz
hugolpz committed Jun 4, 2023
1 parent 2766e4a commit eb07d7f
Showing 1 changed file with 33 additions and 29 deletions.
62 changes: 33 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -589,9 +589,9 @@
--gradient-pink: #f89096;
--gradient-purple: #b1b4e5;
--link-color: var(--dark-blue);
--progress-default: #517FC1; /* humaniki : */
--progress-females:#F19359; /* humaniki : */
--progress-others:var(--light-purple); /* humaniki : #FAD965 */
--progress-default: #517FC1; /* humaniki : males */
--progress-females: #F19359; /* humaniki : females */
--progress-others: #FAD965; /* humaniki : others */
--override-z-index: 4;
--header-z-index: 3;
--top-z-index: 2;
Expand Down Expand Up @@ -1133,27 +1133,26 @@
/* ************************************** */
/* Progress bars */
.progress--Te4aM {
z-index:1;
background: var(--blue);
height: .5rem;
width: 100%;
position:relative;
}

.progress--Te4aM > *,
.progressBar--u2kfl {
z-index: 2;
height: 100%;
max-width: 100%;
display: inline-block;
position: relative;
top:0;
font-size: none !important;
}
.progressBar--u2kfl {
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

.progress-default { z-index:1; background: var(--progress-default);}
.progress-others { z-index:2; background: var(--progress-others); }
.progress-females { z-index:3; background: var(--progress-females); }
.progress-words { z-index:2; background: var(--light-purple);}

.progress-words { background: var(--light-purple);}
.progress-default { background: var(--progress-default);}
.progress-females { background: var(--progress-females); }
.progress-others { background: var(--progress-others); }

/* ************************************** */
/* Stickyness */ /* NO REALLY USED : */

Expand Down Expand Up @@ -1272,12 +1271,13 @@ <h4 class="DataItemHeading--QFQyU">
</p>
<div class="progress--Te4aM">
<!-- SPAN TRIAL -->
<!-- <span class="visually-hidden">{{ percent(language.speakersFemales,language.speakers) }}%</span> -->
<span class="progressBar--u2kfl progress-females" :style="{ width: percent(+language.speakersFemales,language.speakers)+'%'}"></span>
<!-- <span class="visually-hidden">{{ percent(language.speakersOthers,language.speakers) }}%</span> -->
<span class="progressBar--u2kfl progress-others" :style="{
width: percent(language.speakersOthers,language.speakers)+'%'
}"></span>
<div class="visually-hidden">{{ percent(language.speakersFemales,language.speakers) }}%</div>
<div class="progressBar--u2kfl progress-females" :style="{ width: percent(+language.speakersFemales,language.speakers)+'%'}"></div>
<div class="visually-hidden">{{ percent(language.speakersOthers,language.speakers) }}%</div>
<div class="progressBar--u2kfl progress-others" :style="{
width: percent(language.speakersOthers,language.speakers)+'%',
left: percent(+language.speakersFemales,language.speakers)+'%'
}"></div>
</div>
</div>
<!-- DATA ITEM 3 -->
Expand All @@ -1297,9 +1297,8 @@ <h4 class="DataItemHeading--QFQyU">
</p>
<div class="progress--Te4aM">
<!-- DIV TRIAL -->
<!-- <div class="visually-hidden">{{ percent(language.words,language.records) }}%</div> -->
<div class="visually-hidden">{{ percent(language.words,language.records) }}%</div>
<div class="progressBar--u2kfl progress-words" :style="{ width: percent(language.words,language.records)+'%'}"></div>
<div class="progressBar--u2kfl progress-females" :style="{ width: 5+'%'}"></div>
</div>
</div>

Expand All @@ -1316,12 +1315,16 @@ <h4 class="DataItemHeading--QFQyU">
<!-- Value -->
<p data-testid="clip-recorded-hour" class="DataItemValue--G3soc">
<span>{{ meaningfulNumber(language.recordsFemale,"short",0) }}</span>
<span>{{ meaningfulNumber(language.recordsOthers,"short",'') }}</span>
<span>{{ meaningfulNumber(language.recordsOthers,"shorter",'') }}</span>
<span>{{ meaningfulNumber(language.recordsMale,"short",0) }}</span>
</p>
<div class="progress--Te4aM">
<div class="visually-hidden">{{ percent(language.recordsFemale,language.records) || 0 }}%</div>
<div class="progressBar--u2kfl progress-females" :style="{ width: percent(language.recordsFemale,language.records) +'%'}"></div>
<div class="progressBar--u2kfl progress-others" :style="{
width: percent(language.recordsOthers,language.records)+'%',
left: percent(language.recordsFemale,language.records)+'%'
}"></div>
</div>
</div>

Expand Down Expand Up @@ -1444,6 +1447,7 @@ <h4 class="DataItemHeading--QFQyU">
methods: {
meaningfulNumber: function(num,suffixType='short',zero=null) {
var na,k,M; // pretty suffixes
suffixType=='shorter' ||
suffixType == 'short'?(na='n.a.',k='k', M='M')
:suffixType == 'long'?(na='Undocumented',k=' thousands', M=' millions')
:(na='',k=',000',M =',000,000');
Expand All @@ -1452,8 +1456,8 @@ <h4 class="DataItemHeading--QFQyU">
var numStr =
num == undefined ? ''+na
: num == 0? 0
: num < 10000? num
: (num < 10000 && suffixType=='shorter') ? (Math.round(num / 100)/10) +k
: num < 1000? num
: num < 10000 && !suffixType=='shorter'? num
: num < 100000? (Math.round(num / 100)/10) +k
: num < 1000000? (Math.round(num / 1000)) +k
: num < 20000000? (Math.round(num / 100000)/10) +M
Expand Down

0 comments on commit eb07d7f

Please sign in to comment.