hq/setto.basspistol.com
hq/setto.basspistol.com
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

make track page noscript friendly

Browse source
This commit is contained in:
sakrecoer 2020-07-27 08:45:50 +02:00
parent bce9861e31
commit d2950cc11c
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
_layouts/track.html
View file

@ -7,7 +7,7 @@ layout: default
<section <section
class="banner onload-image-fade-in onload-content-fade-right style3 fullscreen content-align-center image-position-center" style="background-image:url('{{ site.mediaurl }}/{{ page.slug }}.jpeg');background-size: cover; background-repeat: no-repeat;"> class="banner onload-image-fade-in onload-content-fade-right style3 fullscreen content-align-center image-position-center" style="background-image:url('{{ site.mediaurl }}/{{ page.slug }}.jpeg');background-size: cover; background-repeat: no-repeat;">
<div style="z-index:0;position:absolute; top:0; left:0; width:100%;min-height:100%;background-color: rgba(13, 13 ,13, 0.5);"></div> <div style="z-index:0;position:absolute; top:0; left:0; width:100%;min-height:100%;background-color: rgba(13, 13 ,13, 0.5);"></div>
<div class="content" style="z-index:1"> <div id="mainwrap" class="content" style="z-index:1">
<h1 style="margin-top:80px">{{ page.common.title }}</h1> <h1 style="margin-top:80px">{{ page.common.title }}</h1>
<p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong> <p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
<br />{{ page.common.year }} <br />{{ page.common.year }}
@ -15,7 +15,6 @@ layout: default
<p><strong><span id="tracktime"></span></strong><span id="{{ page.common.title | slugify | remove: '-' }}"></span></strong></p> <p><strong><span id="tracktime"></span></strong><span id="{{ page.common.title | slugify | remove: '-' }}"></span></strong></p>
<script type="text/javascript"> <script type="text/javascript">
var {{ page.common.title | slugify | remove: '-' }}timestamp = {{ page.format.duration | round }}; var {{ page.common.title | slugify | remove: '-' }}timestamp = {{ page.format.duration | round }};
var {{ page.common.title | slugify | remove: '-' }}hours = Math.floor({{ page.common.title | slugify | remove: '-' }}timestamp / 60 / 60); var {{ page.common.title | slugify | remove: '-' }}hours = Math.floor({{ page.common.title | slugify | remove: '-' }}timestamp / 60 / 60);
@ -26,11 +25,22 @@ layout: default
theSpan.innerHTML = {{ page.common.title | slugify | remove: '-' }}formatted; theSpan.innerHTML = {{ page.common.title | slugify | remove: '-' }}formatted;
</script> </script>
<ul class="actions stacked"> <ul class="actions stacked">
<li><button id="mu_pause" class="button icon solid fa-play">Play dat!</button></li> <li><button id="mu_pause" class="button icon solid fa-play">Play dat!</button></li>
</ul> </ul>
</div> </div>
<div id="noJSalbum" class="content" style="z-index:1">
<h1 style="margin-top:80px">{{ page.common.title }}</h1>
<p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
<br />{{ page.common.year }}
</p>
<p><strong>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p>
<ul class="actions stacked">
<li><a class="button icon solid fa-play" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3">Play dat!</a></li>
</ul>
</div>
<div class="image"> <div class="image">
<img src="{{ site.mediaurl }}/{{ page.slug }}.jpeg" alt="{{ page.title }} logo" id="coverart" /> <img src="{{ site.mediaurl }}/{{ page.slug }}.jpeg" alt="{{ page.title }} logo" id="coverart" />