third-party-mirrors/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2025-06-20 08:43:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Made the album showcase prettier

Browse Source
This commit is contained in:
krateng 2023-03-30 01:26:37 +02:00
parent db2b4760a0
commit 12b5eb0b74
2 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,41 @@
{% set ownalbums = info.own_albums %} {% set ownalbums = info.own_albums %}
{% set otheralbums = info.appears_on %} {% set otheralbums = info.appears_on %}
<div id="showcase_scroll_container"> <div id="showcase_container">
{% for album in ownalbums %}
<table class="album">
<tr><td>&nbsp</td></tr>
<tr><td>
<a href="{{ links.url(album) }}">
<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'></div>
</a>
</td></tr>
<tr><td>
<span class="album_artists">{{ links.links(album.artists) }}</span><br/>
<span class="album_title">{{ links.link(album) }}</span>
</td></tr>
</table>
{% endfor %}
{% for album in otheralbums %}
<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>
</a>
</td></tr>
<tr><td>
<span class="album_artists">{{ links.links(album.artists) }}</span><br/>
<span class="album_title">{{ links.link(album) }}</span>
</td></tr>
</table>
{% endfor %}
<!--
<table class="album_showcase"> <table class="album_showcase">
<tr> <tr>
{% for album in ownalbums %}<td></td>{% endfor %} {% for album in ownalbums %}<td></td>{% endfor %}
@ -40,4 +74,5 @@
{% endfor %} {% endfor %}
</tr> </tr>
</table> </table>
-->
</div> </div>

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

@ -898,37 +898,54 @@ table.tiles_sub a span {
} }
div#showcase_scroll_container { div#showcase_container {
overflow-x: scroll; display: flex;
overflow-y: show;
margin-top: -15px; margin-top: -15px;
padding-bottom: 20px;
align-items: flex-start;
flex-wrap: wrap;
} }
table.album_showcase { div#showcase_container table.album {
text-align: center; width: 180px;
} }
table.album_showcase tr:nth-child(1) {
div#showcase_container table.album tr td {
padding-left: 15px;
padding-right: 15px;
}
div#showcase_container table.album tr:nth-child(1) td {
height:8px;
opacity: 0.3; opacity: 0.3;
text-align: center;
} }
table.album_showcase td { div#showcase_container table.album tr:nth-child(2) td {
padding: 20px; height:150px;
padding-bottom:3px; padding-top:2px;
padding-top:0px; padding-bottom:2px;
width: 150px;
} }
table.album_showcase td.album_separator_column { div#showcase_container table.album tr:nth-child(3) td {
width: 40px; height:15px;
} }
div#showcase_container div {
table.album_showcase td div {
height: 150px; height: 150px;
width: 150px; width: 150px;
background-size: cover; background-size: cover;
background-position: top; background-position: top;
box-shadow: 0px 0px 10px 10px rgba(3,3,3,0.5); box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}
div#showcase_container table:hover div {
box-shadow: 0px 0px 10px 10px var(--ctrl-element-color-main);
}
div#showcase_container span.album_artists {
font-size: 80%;
}
div#showcase_container span.album_title {
font-weight: bold;
} }