Packages images clickable + scale() on hover

This commit is contained in:
Thomas Smith 2023-01-11 11:35:22 -05:00
parent 9cb60155c2
commit 7615bf6c1f

View file

@ -1,34 +1,37 @@
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
<figure class="card-img-top" > <div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;"> <a href="/+{{- lower .full_name -}}/">
<article class="card-thumb-label"> <figure class="card-img-top" >
<i class="icon-tea-logo-iconasset-1"></i> <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<h3>{{- .name -}}</h3> <article class="card-thumb-label">
{{ if not (eq .maintainer "") }} <i class="icon-tea-logo-iconasset-1"></i>
<h4>&#x2022;&nbsp;{{- .maintainer -}}</h4> <h3>{{- .name -}}</h3>
{{end}} {{ if not (eq .maintainer "") }}
</article> <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
</figure> {{end}}
<div class="card-body thumbnail-body"> </article>
<div class="card-text-container"> </figure>
<p class="card-text"> </a>
<span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span> <div class="card-body thumbnail-body">
<!-- <div class="card-text-container">
TODO: uncomment once install counts improve <p class="card-text">
<br> <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
<span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> --> <!--
</p> TODO: uncomment once install counts improve
<br>
<span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
</p>
</div>
<a href="/+{{- lower .full_name -}}/">
{{- partial "detail-btn.html" . -}}
</a>
</div>
<div class="card-body thumbnail-body-mobile">
<a href="/+{{- lower .full_name -}}/">
<button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
</a>
</div> </div>
<a href="/+{{- lower .full_name -}}/">
{{- partial "detail-btn.html" . -}}
</a>
</div> </div>
<div class="card-body thumbnail-body-mobile">
<a href="/+{{- lower .full_name -}}/">
<button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
</a>
</div>
</div>
<style> <style>
@ -53,6 +56,14 @@ div.card.card-thumbnail{
box-shadow: 0px 0px 12px #0c0c0c !important; box-shadow: 0px 0px 12px #0c0c0c !important;
} }
figure{
transition: 0.2s ease-in-out;
}
figure:hover{
transform: scale(1.02);
}
} }