Cutlery/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2025-07-09 03:04:07 -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>
<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>
</td></tr>
<tr><td>
@ -23,11 +23,12 @@
{% endfor %}
{% for album in otheralbums %}
{% set info = dbc.album_info({'album':album}) %}
<table class="album">
<tr><td>Appears on</td></tr>
<tr><td>
<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>
</td></tr>
<tr><td>

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

@ -4,17 +4,17 @@
<!-- MEDALS -->
{% 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>
</a>
{%- endfor %}
{% 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>
</a>
{%- endfor %}
{% 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>
</a>
{%- endfor %}

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

@ -5,17 +5,17 @@
<!-- MEDALS -->
{% 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>
</a>
{%- endfor %}
{% 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>
</a>
{%- endfor %}
{% 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>
</a>
{%- endfor %}

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

@ -2,17 +2,17 @@
<!-- MEDALS -->
{% 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>
</a>
{%- endfor %}
{% 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>
</a>
{%- endfor %}
{% 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>
</a>
{%- endfor %}

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

@ -11,12 +11,12 @@
<td class="image">
{% if adminmode %}
<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) }}');"
title="Drag & Drop to upload new image"
></div>
{% 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>
{% endif %}
</td>

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

@ -22,12 +22,12 @@
<td class="image">
{% if adminmode %}
<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) }}');"
title="Drag & Drop to upload new image"
></div>
{% 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>
{% endif %}
</td>

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

@ -12,12 +12,12 @@
<td class="image">
{% if adminmode %}
<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) }}');"
title="Drag & Drop to upload new image"
></div>
{% 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>
{% endif %}
</td>

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

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