cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: track list styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-25 20:53:55 -07:00
parent 845426d96a
commit 192874548d
No known key found for this signature in database
6 changed files with 47 additions and 34 deletions
package-lock.jsonpackage.json
src
_includes/partials/media/music
chart.liquid
assets/styles
base
index.css
components
menu.cssmusic-chart.css

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "19.6.2",
"version": "19.6.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "19.6.2",
"version": "19.6.3",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.4.0",
@ -1149,9 +1149,9 @@
"license": "MIT"
},
"node_modules/electron-to-chromium": {
"version": "1.4.811",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.811.tgz",
"integrity": "sha512-CDyzcJ5XW78SHzsIOdn27z8J4ist8eaFLhdto2hSMSJQgsiwvbv2fbizcKUICryw1Wii1TI/FEkvzvJsR3awrA==",
"version": "1.4.812",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.812.tgz",
"integrity": "sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg==",
"dev": true,
"license": "ISC"
},

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "19.6.2",
"version": "19.6.3",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {

47
src/_includes/partials/media/music/chart.liquid
View file

@ -1,29 +1,32 @@
<div class="music-chart">
{% assign items = data.items | default: data %}
{% for item in items limit: count | default: items.size %}
{%- assign playTotal = playTotal | default: mostPlayed -%}
{%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
<div class="item">
<div class="presentation">
<div class="count">{{ item.rank | formatNumber }}.</div>
<div class="info">
<div class="title">
<a href="{{ item.url }}">{{ item.title }}</a>
<ol type="1">
{% for item in items limit: count | default: items.size %}
{%- assign playTotal = playTotal | default: mostPlayed -%}
{%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
<li value="{{ item.rank }}">
<div class="item">
<div class="presentation">
<div class="info">
<div class="title">
<a href="{{ item.url }}">{{ item.title }}</a>
</div>
{% capture playsLabel %}
{% if item.plays > 1 %}
plays
{% else %}
play
{% endif %}
{% endcapture %}
<div class="subtext">{{ item.artist }}</div>
<div class="subtext">{{ item.plays }} {{ playsLabel }}</div>
</div>
</div>
{% capture playsLabel %}
{% if item.plays > 1 %}
plays
{% else %}
play
{% endif %}
{% endcapture %}
<div class="subtext">{{ item.artist }}</div>
<div class="subtext">{{ item.plays }} {{ playsLabel }}</div>
{% render "partials/media/progress-bar.liquid", percentage:percentage %}
</div>
</div>
{% render "partials/media/progress-bar.liquid", percentage:percentage %}
</div>
{% endfor %}
</li>
{% endfor %}
</ol>
</div>
{% unless count %}
{% render "partials/widgets/paginator.liquid", pagination:data %}

3
src/assets/styles/base/index.css
View file

@ -139,7 +139,8 @@ a {
flex-direction: row;
align-items: center;
& + .page-header {
& + .page-header,
& + .music-chart {
margin-top: var(--sizing-base);
}
}

2
src/assets/styles/components/menu.css
View file

@ -1,7 +1,7 @@
.menu-primary {
display: flex;
flex-direction: row;
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--sizing-md);

17
src/assets/styles/components/music-chart.css
View file

@ -1,6 +1,15 @@
.music-chart {
margin-bottom: var(--sizing-base);
& ol {
padding-left: 0;
margin-top: 0;
& li:first-of-type {
margin-top: 0;
}
}
& .item {
display: flex;
flex-direction: row;
@ -76,10 +85,6 @@
white-space: nowrap;
}
& .count {
margin-right: var(--sizing-sm);
}
& .info {
max-width: calc(75% - var(--sizing-lg));
}
@ -110,6 +115,10 @@
@media screen and (min-width: 768px) {
.music-chart {
& ol {
list-style-position: outside;
}
& .meta,
& .presentation {
width: calc(80% - var(--sizing-lg));