mirror/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2023-08-10 21:12:55 +03:00
Code Issues 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 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">
<tr>
{% for album in ownalbums %}<td></td>{% endfor %}
@ -40,4 +74,5 @@
{% endfor %}
</tr>
</table>
-->
</div>

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

@ -898,37 +898,54 @@ table.tiles_sub a span {
}
div#showcase_scroll_container {
overflow-x: scroll;
overflow-y: show;
div#showcase_container {
display: flex;
margin-top: -15px;
padding-bottom: 20px;
align-items: flex-start;
flex-wrap: wrap;
}
table.album_showcase {
text-align: center;
div#showcase_container table.album {
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;
text-align: center;
}
table.album_showcase td {
padding: 20px;
padding-bottom:3px;
padding-top:0px;
width: 150px;
div#showcase_container table.album tr:nth-child(2) td {
height:150px;
padding-top:2px;
padding-bottom:2px;
}
table.album_showcase td.album_separator_column {
width: 40px;
div#showcase_container table.album tr:nth-child(3) td {
height:15px;
}
table.album_showcase td div {
div#showcase_container div {
height: 150px;
width: 150px;
background-size: cover;
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;
}