mirror of
https://github.com/ivabus/www
synced 2024-11-25 10:05:07 +03:00
Add placeholder for package images
This commit is contained in:
parent
34bbf39dc2
commit
9900ccb48a
1 changed files with 26 additions and 2 deletions
|
@ -1,8 +1,11 @@
|
||||||
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}" data-maintainer="{{- .maintainer -}}">
|
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}" data-maintainer="{{- .maintainer -}}">
|
||||||
<a href="/+{{- lower .full_name -}}/">
|
<a href="/+{{- lower .full_name -}}/">
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
<figure class="card-img-top" >
|
<figure class="card-img-top">
|
||||||
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
|
<div class="placeholder" style="background-color: #1a1a1a; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="icon-tea-logo-iconasset-1 pulsate" style="color: #949494;"></i>
|
||||||
|
<img class="package-image" src="{{- .thumb_image_url -}}" onload="this.previousElementSibling.style.display='none';" alt="{{- .name -}}" style="width:100%; height:100%;">
|
||||||
|
</div>
|
||||||
<article class="card-thumb-label p-3">
|
<article class="card-thumb-label p-3">
|
||||||
<i class="icon-tea-logo-iconasset-1 lead" style="color:#1a1a1a;"></i>
|
<i class="icon-tea-logo-iconasset-1 lead" style="color:#1a1a1a;"></i>
|
||||||
<h3 class="package-title mb-1">{{- .name -}}</h3>
|
<h3 class="package-title mb-1">{{- .name -}}</h3>
|
||||||
|
@ -33,3 +36,24 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
@keyframes pulsate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulsate {
|
||||||
|
animation: pulsate 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue