mirror of
https://github.com/ivabus/www
synced 2024-11-25 11:05:05 +03:00
Hopefully fixed show more issue
This commit is contained in:
Thomas Smith
parent
ae109e0560
commit
0b85010136
2 changed files with 293 additions and 194 deletions
|
|
@ -1,6 +1,15 @@
|
|||
<!-- Package Grid -->
|
||||
|
||||
<section>
|
||||
<!-- Package Grid Header -->
|
||||
<hr>
|
||||
<div class="container package-grid-header two-boxes">
|
||||
<section class="flex flex-column flex-md-row">
|
||||
<h3>packages</h3>
|
||||
</section>
|
||||
<p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
{{- partial "search-menu.html" "searchTermDesktop" -}}
|
||||
<hr>
|
||||
|
|
@ -18,7 +27,7 @@
|
|||
{{- partial "no-results-found.html" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div id="loadMoreSection" class="container small">
|
||||
<div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
|
||||
</div>
|
||||
|
|
@ -33,91 +42,25 @@
|
|||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
#loadMorePackagesBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
height: 4.185vw !important;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||
#loadMorePackagesBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
height: 5vw !important;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
||||
#loadMorePackagesBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
height: 5.141vw !important;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 768px) {
|
||||
#loadMorePackagesBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
height: 6.771vw!important;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
#loadMorePackagesBtn {
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
#loadMorePackagesBtn .icon-enter-arrow {
|
||||
display: inline-block;
|
||||
position: relaitve;
|
||||
transition: all 0.2s ease-in-out;
|
||||
margin-right:20px;
|
||||
}
|
||||
#loadMorePackagesBtn:hover .icon-enter-arrow{
|
||||
display: inline-block;
|
||||
transform: rotate(90deg) !important;
|
||||
transform: rotate(-45deg) !important;
|
||||
}
|
||||
#loadMoreSection.hidden {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,93 +1,101 @@
|
|||
|
||||
<div class="card card-thumbnail p-3" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
|
||||
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
|
||||
<a href="/+{{- lower .full_name -}}/">
|
||||
<figure class="card-img-top" >
|
||||
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
|
||||
<article class="card-thumb-label">
|
||||
<i class="icon-tea-logo-iconasset-1"></i>
|
||||
<h3>{{- .name -}}</h3>
|
||||
{{ if not (eq .maintainer "") }}
|
||||
<h4>• {{- .maintainer -}}</h4>
|
||||
{{end}}
|
||||
</article>
|
||||
</figure>
|
||||
</a>
|
||||
<div class="card-body thumbnail-body">
|
||||
<div class="card-text-container">
|
||||
<p class="card-text">
|
||||
<span class="package-version-no">V {{- .version -}}</span>
|
||||
<!--
|
||||
TODO: uncomment once install counts improve
|
||||
<br>
|
||||
<span class="package-install-no">>{{- .installs -}} installs</span> -->
|
||||
</p>
|
||||
</div>
|
||||
<a href="/+{{- lower .full_name -}}/">
|
||||
<figure class="card-img-top" >
|
||||
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
|
||||
<article class="card-thumb-label p-4">
|
||||
<i class="icon-tea-logo-iconasset-1"></i>
|
||||
<h3>{{- .name -}}</h3>
|
||||
{{ if not (eq .maintainer "") }}
|
||||
<p class="small black">• {{- .maintainer -}}</p>
|
||||
{{end}}
|
||||
</article>
|
||||
</figure>
|
||||
{{- partial "detail-btn.html" . -}}
|
||||
</a>
|
||||
<div class="card-body thumbnail-body">
|
||||
<div class="card-text-container">
|
||||
<p class="card-text">
|
||||
<span class="package-version-no">V {{- .version -}}</span>
|
||||
<!--
|
||||
TODO: uncomment once install counts improve
|
||||
<br>
|
||||
<span class="package-install-no">>{{- .installs -}} 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>
|
||||
<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>
|
||||
|
||||
div.card.card-thumbnail{
|
||||
background-color: #1a1a1a;
|
||||
transition: all .3s;
|
||||
background-color: #1a1a1a;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detail-btn{
|
||||
position: relative;
|
||||
float:right!important;
|
||||
right: 0;
|
||||
position: relative;
|
||||
float:right!important;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) {
|
||||
|
||||
.package-image{
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
}
|
||||
.package-image{
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
}
|
||||
|
||||
figure{
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
figure{
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
figure:hover{
|
||||
transform: scale(1.02);
|
||||
}
|
||||
figure:hover{
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
|
||||
.card-thumb-label i{
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.card-thumb-label {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.9);
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
bottom: 0vw;
|
||||
padding: 1.116vw;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
min-height: 50%;
|
||||
height: 40;
|
||||
}
|
||||
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
font-size: 1.8vw;
|
||||
line-height: 1.8vw;
|
||||
margin: 0px 0px 0.5vw 0vw;
|
||||
padding: 0px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
font-size: .9vw;
|
||||
line-height: 1vw;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -96,6 +104,7 @@ div.card.card-thumbnail{
|
|||
background: none;
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid #949494;
|
||||
padding: 1.674vw;
|
||||
}
|
||||
|
||||
.thumbnail-body{
|
||||
|
|
@ -107,11 +116,14 @@ div.card.card-thumbnail{
|
|||
|
||||
.card-img-top{
|
||||
border-radius: 0px;
|
||||
margin-bottom: 1.674vw;
|
||||
}
|
||||
|
||||
.card-text{
|
||||
font-size: 0.781vw;
|
||||
float:left;
|
||||
position: relative;
|
||||
top:0.502vw;
|
||||
}
|
||||
|
||||
.card-text-container{
|
||||
|
|
@ -124,84 +136,228 @@ div.card.card-thumbnail{
|
|||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
||||
|
||||
.card-thumb-label i{
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.card-thumb-label {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.9);
|
||||
left: 0;
|
||||
bottom: 0vw;
|
||||
padding: 1.116vw;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
font-size: 2.8vw;
|
||||
line-height: 2.8vw;
|
||||
margin: 0px 0px 1vw 0vw;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
font-size: 1.5vw;
|
||||
line-height: 1.5vw;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumbnail{
|
||||
background: none;
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid #949494;
|
||||
padding: 1.674vw;
|
||||
}
|
||||
|
||||
.thumbnail-body{
|
||||
display: flex;
|
||||
border-radius: 0px !important;
|
||||
padding: 0vw;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-img-top{
|
||||
border-radius: 0px;
|
||||
margin-bottom: 1.674vw;
|
||||
}
|
||||
|
||||
.card-text{
|
||||
font-size: 0.781vw;
|
||||
float:left;
|
||||
position: relative;
|
||||
top:0.502vw;
|
||||
}
|
||||
|
||||
.card-text-container{
|
||||
float:left;
|
||||
position: relative;
|
||||
width:48%;
|
||||
}
|
||||
|
||||
.thumbnail-body-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 768px) {
|
||||
|
||||
.card-thumb-label i{
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.card-thumb-label {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.9);
|
||||
left: 0;
|
||||
bottom: 0vw;
|
||||
padding: 1.116vw;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
margin: 0px 0px 0.5vw 0vw;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
font-size: 1.5vw;
|
||||
line-height: 1.5vw;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumbnail{
|
||||
background: none;
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid #949494;
|
||||
padding: 1.674vw;
|
||||
}
|
||||
|
||||
.thumbnail-body{
|
||||
display: flex;
|
||||
border-radius: 0px !important;
|
||||
padding: 0vw;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-img-top{
|
||||
border-radius: 0px;
|
||||
margin-bottom: 1.674vw;
|
||||
}
|
||||
|
||||
.card-text{
|
||||
font-size: 0.781vw;
|
||||
float:left;
|
||||
position: relative;
|
||||
top:0.502vw;
|
||||
}
|
||||
|
||||
.card-text-container{
|
||||
float:left;
|
||||
position: relative;
|
||||
width:48%;
|
||||
}
|
||||
|
||||
.thumbnail-body-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
.card-thumb-label i{
|
||||
font-size: 5vw;
|
||||
}
|
||||
.card-thumb-label i{
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.card-thumb-label {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.9);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 3vw;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.card-thumb-label {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.9);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 3vw;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
font-size: 6.8vw;
|
||||
line-height: 6.8vw;
|
||||
margin: 0px 0px 1vw 0vw;
|
||||
padding: 0px;
|
||||
}
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
font-size: 6.8vw;
|
||||
line-height: 6.8vw;
|
||||
margin: 0px 0px 1vw 0vw;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumbnail{
|
||||
background: none;
|
||||
border-radius: 0px !important;
|
||||
border: none;
|
||||
}
|
||||
.card-thumbnail{
|
||||
background: none;
|
||||
border-radius: 0px !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.thumbnail-body{
|
||||
border-radius: 0px !important;
|
||||
padding: 0vw;
|
||||
display:none;
|
||||
}
|
||||
.thumbnail-body{
|
||||
border-radius: 0px !important;
|
||||
padding: 0vw;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.thumbnail-body-mobile{
|
||||
background-color: #8000ff;
|
||||
padding: 1.25vw 0vw !important;
|
||||
}
|
||||
.thumbnail-body-mobile{
|
||||
background-color: #8000ff;
|
||||
padding: 1.25vw 0vw !important;
|
||||
}
|
||||
|
||||
.card-img-top{
|
||||
border-radius: 0px;
|
||||
margin-bottom: 0vw;
|
||||
}
|
||||
.card-img-top{
|
||||
border-radius: 0px;
|
||||
margin-bottom: 0vw;
|
||||
}
|
||||
|
||||
.detail-btn-mobile{
|
||||
background:none;
|
||||
border:none;
|
||||
color: white;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
font-size: 4vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-transform: uppercase;
|
||||
padding-top: 2vw !important;
|
||||
}
|
||||
.detail-btn-mobile{
|
||||
background:none;
|
||||
border:none;
|
||||
color: white;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
font-size: 4vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-transform: uppercase;
|
||||
padding-top: 2vw !important;
|
||||
}
|
||||
|
||||
.detail-btn-mobile .icon-enter-arrow{
|
||||
display: inline-block;
|
||||
position: relaitve;
|
||||
margin-right: 2vw;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
.detail-btn-mobile .icon-enter-arrow{
|
||||
display: inline-block;
|
||||
position: relaitve;
|
||||
margin-right: 2vw;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.detail-btn-mobile:hover .icon-enter-arrow{
|
||||
display: inline-block;
|
||||
transform: rotate(-45deg) !important;
|
||||
}
|
||||
.detail-btn-mobile:hover .icon-enter-arrow{
|
||||
display: inline-block;
|
||||
transform: rotate(-45deg) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue