mirror of
https://github.com/krateng/maloja.git
synced 2025-04-16 16:52:18 +03:00
Turned tiles from table into grid
This commit is contained in:
krateng
parent
99c295b0e4
commit
03f3952d1a
@ -1,7 +1,7 @@
|
||||
<td style="opacity:0.5;text-align:center;">
|
||||
<div class="tile" style="opacity:0.5;text-align:center;">
|
||||
<svg height="96px" viewBox="0 0 24 24" width="96px">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73L19.73 21 21 19.73 4.27 3zM14 7h4V3h-6v5.18l2 2z"/>
|
||||
</svg>
|
||||
<br/>No scrobbles yet!
|
||||
</td>
|
||||
</div>
|
||||
|
||||
@ -6,40 +6,26 @@
|
||||
{% endif %}
|
||||
|
||||
{% set charts_14 = charts | fixlength(14) %}
|
||||
{% set charts_cycler = cycler(*charts_14) %}
|
||||
|
||||
|
||||
|
||||
<table class="tiles_top"><tr>
|
||||
{% for segment in range(3) %}
|
||||
{% if charts_14[0] is none and loop.first %}
|
||||
{% include 'icons/nodata.jinja' %}
|
||||
{% else %}
|
||||
<td>
|
||||
{% set segmentsize = segment+1 %}
|
||||
<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
|
||||
{% for row in range(segmentsize) -%}
|
||||
<tr>
|
||||
{% for col in range(segmentsize) %}
|
||||
{% set entry = charts_cycler.next() %}
|
||||
{% if entry is not none %}
|
||||
{% set album = entry.album %}
|
||||
{% set rank = entry.rank %}
|
||||
<td>
|
||||
<a href="{{ links.url(album) }}">
|
||||
<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'>
|
||||
<span class='stats'>#{{ rank }}</span> <span>{{ album.albumtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</td>
|
||||
{% else -%}
|
||||
<td></td>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</table>
|
||||
</td>
|
||||
<div class="tiles">
|
||||
{% if charts_14[0] is none %}
|
||||
{% include 'icons/nodata.jinja' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tr></table>
|
||||
{% for entry in charts_14 %}
|
||||
{% if entry is not none %}
|
||||
{% set album = entry.album %}
|
||||
{% set rank = entry.rank %}
|
||||
<div class="tile">
|
||||
<a href="{{ links.url(album) }}">
|
||||
<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'>
|
||||
<span class='stats'>#{{ rank }}</span> <span>{{ album.albumtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -6,40 +6,26 @@
|
||||
{% endif %}
|
||||
|
||||
{% set charts_14 = charts | fixlength(14) %}
|
||||
{% set charts_cycler = cycler(*charts_14) %}
|
||||
|
||||
|
||||
|
||||
<table class="tiles_top"><tr>
|
||||
{% for segment in range(3) %}
|
||||
{% if charts_14[0] is none and loop.first %}
|
||||
{% include 'icons/nodata.jinja' %}
|
||||
{% else %}
|
||||
<td>
|
||||
{% set segmentsize = segment+1 %}
|
||||
<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
|
||||
{% for row in range(segmentsize) -%}
|
||||
<tr>
|
||||
{% for col in range(segmentsize) %}
|
||||
{% set entry = charts_cycler.next() %}
|
||||
{% if entry is not none %}
|
||||
{% set artist = entry.artist %}
|
||||
{% set rank = entry.rank %}
|
||||
<td>
|
||||
<a href="{{ links.url(artist) }}">
|
||||
<div class="lazy" data-bg="{{ images.get_artist_image(artist) }}"'>
|
||||
<span class='stats'>#{{ rank }}</span> <span>{{ artist }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</td>
|
||||
{% else -%}
|
||||
<td></td>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</table>
|
||||
</td>
|
||||
<div class="tiles">
|
||||
{% if charts_14[0] is none %}
|
||||
{% include 'icons/nodata.jinja' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tr></table>
|
||||
{% for entry in charts_14 %}
|
||||
{% if entry is not none %}
|
||||
{% set artist = entry.artist %}
|
||||
{% set rank = entry.rank %}
|
||||
<div class="tile">
|
||||
<a href="{{ links.url(artist) }}">
|
||||
<div class="lazy" data-bg="{{ images.get_artist_image(artist) }}"'>
|
||||
<span class='stats'>#{{ rank }}</span> <span>{{ artist }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -6,39 +6,26 @@
|
||||
{% endif %}
|
||||
|
||||
{% set charts_14 = charts | fixlength(14) %}
|
||||
{% set charts_cycler = cycler(*charts_14) %}
|
||||
|
||||
|
||||
<table class="tiles_top"><tr>
|
||||
{% for segment in range(3) %}
|
||||
{% if charts_14[0] is none and loop.first %}
|
||||
{% include 'icons/nodata.jinja' %}
|
||||
{% else %}
|
||||
<td>
|
||||
{% set segmentsize = segment+1 %}
|
||||
<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
|
||||
{% for row in range(segmentsize) -%}
|
||||
<tr>
|
||||
{% for col in range(segmentsize) %}
|
||||
{% set entry = charts_cycler.next() %}
|
||||
{% if entry is not none %}
|
||||
{% set track = entry.track %}
|
||||
{% set rank = entry.rank %}
|
||||
<td>
|
||||
<a href="{{ links.url(track) }}">
|
||||
<div class="lazy" data-bg="{{ images.get_track_image(track) }}")'>
|
||||
<span class='stats'>#{{ rank }}</span> <span>{{ track.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</td>
|
||||
{% else -%}
|
||||
<td></td>
|
||||
{%- endif %}
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
</td>
|
||||
<div class="tiles">
|
||||
{% if charts_14[0] is none %}
|
||||
{% include 'icons/nodata.jinja' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tr></table>
|
||||
{% for entry in charts_14 %}
|
||||
{% if entry is not none %}
|
||||
{% set track = entry.track %}
|
||||
{% set rank = entry.rank %}
|
||||
<div class="tile">
|
||||
<a href="{{ links.url(track) }}">
|
||||
<div class="lazy" data-bg="{{ images.get_track_image(track) }}"'>
|
||||
<span class='stats'>#{{ rank }}</span> <span>{{ track.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -800,53 +800,76 @@ table.misc td {
|
||||
|
||||
|
||||
|
||||
div.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(18, 50px);
|
||||
grid-template-rows: repeat(6, 50px);
|
||||
grid-auto-flow: row dense;
|
||||
|
||||
|
||||
|
||||
|
||||
table.tiles_top td {
|
||||
padding:0px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
table.tiles_top:hover td td {
|
||||
div.tiles div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position:top center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.tiles:hover div {
|
||||
opacity:0.5;
|
||||
filter: grayscale(80%);
|
||||
}
|
||||
table.tiles_top:hover td td:hover {
|
||||
div.tiles:hover div:hover {
|
||||
opacity:1;
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
table.tiles_top, table.tiles_sub {
|
||||
border-collapse: collapse;
|
||||
div.tiles div.tile:nth-child(1) {
|
||||
grid-column: span 6;
|
||||
grid-row: span 6;
|
||||
|
||||
font-size:100%
|
||||
}
|
||||
|
||||
div.tiles div.tile:nth-child(2),
|
||||
div.tiles div.tile:nth-child(3),
|
||||
div.tiles div.tile:nth-child(4),
|
||||
div.tiles div.tile:nth-child(5) {
|
||||
grid-column: span 3;
|
||||
grid-row: span 3;
|
||||
|
||||
font-size:80%
|
||||
}
|
||||
|
||||
div.tiles div.tile:nth-child(2),
|
||||
div.tiles div.tile:nth-child(4) {
|
||||
grid-column-start: 7;
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
div.tiles div.tile:nth-child(3),
|
||||
div.tiles div.tile:nth-child(5) {
|
||||
grid-column-start: 10;
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
div.tiles div.tile:nth-child(6),
|
||||
div.tiles div.tile:nth-child(7),
|
||||
div.tiles div.tile:nth-child(8),
|
||||
div.tiles div.tile:nth-child(9),
|
||||
div.tiles div.tile:nth-child(10),
|
||||
div.tiles div.tile:nth-child(11),
|
||||
div.tiles div.tile:nth-child(12),
|
||||
div.tiles div.tile:nth-child(13),
|
||||
div.tiles div.tile:nth-child(14) {
|
||||
grid-column: span 2;
|
||||
grid-row: span 2;
|
||||
|
||||
font-size:60%
|
||||
}
|
||||
|
||||
|
||||
|
||||
table.tiles_top>tbody>tr>td {
|
||||
height:300px;
|
||||
width:300px;
|
||||
}
|
||||
|
||||
|
||||
table.tiles_sub {
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
table.tiles_sub div {
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
table.tiles_top td div {
|
||||
background-size:cover;
|
||||
background-position:top center;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
|
||||
table.tiles_top td span {
|
||||
div.tiles span {
|
||||
background-color:rgba(0,0,0,0.7);
|
||||
display: inline-block;
|
||||
margin-top:2%;
|
||||
@ -854,48 +877,21 @@ table.tiles_top td span {
|
||||
max-width: 67%;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
table.tiles_top td a:hover {
|
||||
div.tiles span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
div.tiles a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.tiles_1x1 td {
|
||||
height:100%;
|
||||
width:100%;
|
||||
font-size:100%
|
||||
}
|
||||
table.tiles_2x2 td {
|
||||
height:50%;
|
||||
width:50%;
|
||||
font-size:80%
|
||||
}
|
||||
table.tiles_3x3 td {
|
||||
height:33.333%;
|
||||
width:33.333%;
|
||||
font-size:60%
|
||||
}
|
||||
table.tiles_4x4 td {
|
||||
font-size:50%
|
||||
}
|
||||
table.tiles_5x5 td {
|
||||
font-size:40%
|
||||
}
|
||||
|
||||
/* Safari fix */
|
||||
table.tiles_sub.tiles_3x3 td div {
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
table.tiles_sub.tiles_2x2 td div {
|
||||
min-height: 150px;
|
||||
min-width: 150px;
|
||||
}
|
||||
table.tiles_sub.tiles_1x1 td div {
|
||||
min-height: 300px;
|
||||
min-width: 300px;
|
||||
}
|
||||
table.tiles_sub a span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
div#showcase_container {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user