Cutlery/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2025-07-31 14:33:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

Made things SHINY

Browse Source
This commit is contained in:
krateng 2023-10-21 13:47:10 +02:00
parent 422a973eff
commit 59df620136
8 changed files with 66 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
maloja/web/jinja/partials/album_showcase.jinja
View File

@ -11,7 +11,7 @@
<tr><td>&nbsp</td></tr> <tr><td>&nbsp</td></tr>
<tr><td> <tr><td>
<a href="{{ links.url(album) }}"> <a href="{{ links.url(album) }}">
<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'></div> <div class="shiny alwaysshiny certified_{{ info.certification }} lazy" data-bg="{{ images.get_album_image(album) }}"'></div>
</a> </a>
</td></tr> </td></tr>
<tr><td> <tr><td>
@ -23,11 +23,12 @@
{% endfor %} {% endfor %}
{% for album in otheralbums %} {% for album in otheralbums %}
{% set info = dbc.album_info({'album':album}) %}
<table class="album"> <table class="album">
<tr><td>Appears on</td></tr> <tr><td>Appears on</td></tr>
<tr><td> <tr><td>
<a href="{{ links.url(album) }}"> <a href="{{ links.url(album) }}">
<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'></div> <div class="shiny alwaysshiny certified_{{ info.certification }} lazy" data-bg="{{ images.get_album_image(album) }}"'></div>
</a> </a>
</td></tr> </td></tr>
<tr><td> <tr><td>

6
maloja/web/jinja/partials/awards_album.jinja
View File

@ -4,17 +4,17 @@
<!-- MEDALS --> <!-- MEDALS -->
{% for year in info.medals.gold -%} {% for year in info.medals.gold -%}
<a title="Best Album in {{ year }}" class="hidelink medal shiny gold" href='/charts_albums?max=50&amp;in={{ year }}'> <a title="Best Album in {{ year }}" class="hidelink medal shiny hovershiny gold" href='/charts_albums?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}
{% for year in info.medals.silver -%} {% for year in info.medals.silver -%}
<a title="Second best Album in {{ year }}" class="hidelink medal shiny silver" href='/charts_albums?max=50&amp;in={{ year }}'> <a title="Second best Album in {{ year }}" class="hidelink medal shiny hovershiny silver" href='/charts_albums?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}
{% for year in info.medals.bronze -%} {% for year in info.medals.bronze -%}
<a title="Third best Album in {{ year }}" class="hidelink medal shiny bronze" href='/charts_albums?max=50&amp;in={{ year }}'> <a title="Third best Album in {{ year }}" class="hidelink medal shiny hovershiny bronze" href='/charts_albums?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}

6
maloja/web/jinja/partials/awards_artist.jinja
View File

@ -5,17 +5,17 @@
<!-- MEDALS --> <!-- MEDALS -->
{% for year in info.medals.gold -%} {% for year in info.medals.gold -%}
<a title="Best Artist in {{ year }}" class="hidelink medal shiny gold" href='/charts_artists?max=50&amp;in={{ year }}'> <a title="Best Artist in {{ year }}" class="hidelink medal shiny hovershiny gold" href='/charts_artists?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}
{% for year in info.medals.silver -%} {% for year in info.medals.silver -%}
<a title="Second best Artist in {{ year }}" class="hidelink medal shiny silver" href='/charts_artists?max=50&amp;in={{ year }}'> <a title="Second best Artist in {{ year }}" class="hidelink medal shiny hovershiny silver" href='/charts_artists?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}
{% for year in info.medals.bronze -%} {% for year in info.medals.bronze -%}
<a title="Third best Artist in {{ year }}" class="hidelink medal shiny bronze" href='/charts_artists?max=50&amp;in={{ year }}'> <a title="Third best Artist in {{ year }}" class="hidelink medal shiny hovershiny bronze" href='/charts_artists?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}

6
maloja/web/jinja/partials/awards_track.jinja
View File

@ -2,17 +2,17 @@
<!-- MEDALS --> <!-- MEDALS -->
{% for year in info.medals.gold -%} {% for year in info.medals.gold -%}
<a title="Best Track in {{ year }}" class="hidelink medal shiny gold" href='/charts_tracks?max=50&amp;in={{ year }}'> <a title="Best Track in {{ year }}" class="hidelink medal shiny hovershiny gold" href='/charts_tracks?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}
{% for year in info.medals.silver -%} {% for year in info.medals.silver -%}
<a title="Second best Track in {{ year }}" class="hidelink medal shiny silver" href='/charts_tracks?max=50&amp;in={{ year }}'> <a title="Second best Track in {{ year }}" class="hidelink medal shiny hovershiny silver" href='/charts_tracks?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}
{% for year in info.medals.bronze -%} {% for year in info.medals.bronze -%}
<a title="Third best Track in {{ year }}" class="hidelink medal shiny bronze" href='/charts_tracks?max=50&amp;in={{ year }}'> <a title="Third best Track in {{ year }}" class="hidelink medal shiny hovershiny bronze" href='/charts_tracks?max=50&amp;in={{ year }}'>
<span>{{ year }}</span> <span>{{ year }}</span>
</a> </a>
{%- endfor %} {%- endfor %}

4
maloja/web/jinja/partials/info_album.jinja
View File

@ -11,12 +11,12 @@
<td class="image"> <td class="image">
{% if adminmode %} {% if adminmode %}
<div <div
class="changeable-image" data-uploader="b64=>upload('{{ encodedalbum }}',b64)" class="shiny alwaysshiny changeable-image" data-uploader="b64=>upload('{{ encodedalbum }}',b64)"
style="background-image:url('{{ images.get_album_image(album) }}');" style="background-image:url('{{ images.get_album_image(album) }}');"
title="Drag & Drop to upload new image" title="Drag & Drop to upload new image"
></div> ></div>
{% else %} {% else %}
<div style="background-image:url('{{ images.get_album_image(album) }}');"> <div class="shiny alwaysshiny" style="background-image:url('{{ images.get_album_image(album) }}');">
</div> </div>
{% endif %} {% endif %}
</td> </td>

4
maloja/web/jinja/partials/info_artist.jinja
View File

@ -22,12 +22,12 @@
<td class="image"> <td class="image">
{% if adminmode %} {% if adminmode %}
<div <div
class="changeable-image" data-uploader="b64=>upload('{{ encodedartist }}',b64)" class="shiny alwaysshiny changeable-image" data-uploader="b64=>upload('{{ encodedartist }}',b64)"
style="background-image:url('{{ images.get_artist_image(artist) }}');" style="background-image:url('{{ images.get_artist_image(artist) }}');"
title="Drag & Drop to upload new image" title="Drag & Drop to upload new image"
></div> ></div>
{% else %} {% else %}
<div style="background-image:url('{{ images.get_artist_image(artist) }}');"> <div class="shiny alwaysshiny" style="background-image:url('{{ images.get_artist_image(artist) }}');">
</div> </div>
{% endif %} {% endif %}
</td> </td>

4
maloja/web/jinja/partials/info_track.jinja
View File

@ -12,12 +12,12 @@
<td class="image"> <td class="image">
{% if adminmode %} {% if adminmode %}
<div <div
class="changeable-image" data-uploader="b64=>upload('{{ encodedtrack }}',b64)" class="shiny alwaysshiny changeable-image" data-uploader="b64=>upload('{{ encodedtrack }}',b64)"
style="background-image:url('{{ images.get_track_image(track) }}');" style="background-image:url('{{ images.get_track_image(track) }}');"
title="Drag & Drop to upload new image" title="Drag & Drop to upload new image"
></div> ></div>
{% else %} {% else %}
<div style="background-image:url('{{ images.get_track_image(track) }}');"> <div class="shiny alwaysshiny" style="background-image:url('{{ images.get_track_image(track) }}');">
</div> </div>
{% endif %} {% endif %}
</td> </td>

68
maloja/web/static/css/maloja.css
View File

@ -18,21 +18,28 @@ body {
*/ */
} }
body.certified { body.certified {
background: radial-gradient(circle at top left, rgba(var(--bg_special_color),0.5) 0%, var(--current-bg-color) 20%); background: radial-gradient(circle at top left, rgba(var(--shine_color),0.2) 0%, var(--current-bg-color) 20%);
background-position: top left; background-position: 0px 0px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
height:100%; height:100%;
} }
body.certified.certified_diamond {
--bg_special_color: var(--color-diamond);
.certified_diamond {
--shine_color: var(--color-diamond);
} }
body.certified.certified_platinum{ .certified_platinum{
--bg_special_color: var(--color-platinum); --shine_color: var(--color-platinum);
} }
body.certified.certified_gold { .certified_gold {
--bg_special_color: var(--color-gold); --shine_color: var(--color-gold);
}
body.certified .top_info .image div {
position: relative;
} }
@ -498,6 +505,8 @@ h2.headerwithextra+span.afterheader {
padding:3px; padding:3px;
margin:2px; margin:2px;
border-radius:2px; border-radius:2px;
color:black;
--shine_color: 255, 255, 255;
} }
.shiny { .shiny {
overflow: hidden; overflow: hidden;
@ -518,13 +527,13 @@ h2.headerwithextra+span.afterheader {
background: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.13);
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba(255, 255, 255, 0.13) 0%, rgba(var(--shine_color), 0.0) 0%,
rgba(255, 255, 255, 0.13) 77%, rgba(var(--shine_color), 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%, rgba(var(--shine_color), 0.5) 92%,
rgba(255, 255, 255, 0.0) 100% rgba(var(--shine_color), 0.0) 100%
); );
} }
.shiny:hover:after { .shiny.hovershiny:hover:after {
opacity: 1; opacity: 1;
top: -30%; top: -30%;
left: -30%; left: -30%;
@ -532,24 +541,43 @@ h2.headerwithextra+span.afterheader {
transition-duration: 0.7s, 0.7s, 0.15s; transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease; transition-timing-function: ease;
} }
.shiny:active:after { .shiny.hovershiny:active:after {
opacity: 0; opacity: 0;
} }
.shiny.alwaysshiny:after {
animation: shiny 9s infinite linear;
}
a.gold { .shiny.gold {
background-color:gold; background-color:gold;
color:black;
} }
a.silver { .shiny.silver {
background-color:silver; background-color:silver;
color:black;
} }
a.bronze { .shiny.bronze {
background-color:#cd7f32; background-color:#cd7f32;
color:black;
} }
@keyframes shiny {
0% {
top: -110%;
left: -210%;
opacity: 0;
}
50% {
top: -30%;
left: -30%;
opacity: 1;
}
100% {
top: -30%;
left: -30%;
opacity: 0;
}
}
img.certrecord { img.certrecord {