(even) better gif loader, scss support

This commit is contained in:
Pablo Ferreiro 2022-01-07 00:13:51 +01:00
parent ca926c4dfb
commit 5888e2cdfb
No known key found for this signature in database
GPG key ID: 41FBCE65B779FA24
16 changed files with 267 additions and 45 deletions

View file

@ -2,8 +2,8 @@
<section class="section">
<div class="columns is-multiline is-vcentered">
{foreach $feed->items as $item}
<div class="column is-one-quarter clickable-img">
<a id="{$item->id}" href="#{$item->id}"
<div class="column is-one-quarter">
<a class="clickable-img" id="{$item->id}" href="#{$item->id}"
data-video_url="{path('stream?url=' . urlencode($item->video->playAddr))}"
data-video_download="{path('stream?url=' . urlencode($item->video->playAddr) . '&download=1')}"
data-desc="{$item->desc}"
@ -11,10 +11,8 @@
data-video_height="{$item->video->height}"
data-music_title="{$item->music->title}"
data-music_url="{path('stream?url=' . urlencode($item->music->playUrl))}">
<figure>
<img class="img-main" loading="lazy" src="{path('stream?url=' . urlencode($item->video->originCover))}" />
<img class="img-background" loading="lazy" data-src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
</figure>
<img loading="lazy" src="{path('stream?url=' . urlencode($item->video->originCover))}" />
<img class="hidden" loading="lazy" data-src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
</a>
</div>
{/foreach}

View file

@ -2,6 +2,6 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/bulmaswatch/superhero/bulmaswatch.min.css">
<link rel="stylesheet" href="{assets('bulma.min.css', 'styles')}">
<title>{$title} - Tiktok Alt-Frontend</title>
</head>

View file

@ -9,10 +9,10 @@
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="add">Add
<input type="radio" name="mode" value="add">Add
</label>
<label class="radio">
<input type="radio" name="remove">Remove
<input type="radio" name="mode" value="remove">Remove
</label>
</div>
</div>