mirror of
https://github.com/ivabus/www
synced 2024-11-22 13:05:06 +03:00
Cleaner package detail page
This commit is contained in:
Thomas Smith
parent
93e6a1b723
commit
b7f957289a
2 changed files with 50 additions and 187 deletions
|
|
@ -11,22 +11,36 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
|
||||
<h3 class="display-4 mt-5">{{- .Title -}}</h3>
|
||||
<h3 class="display-4" style="margin-top:-10px;">{{- .Title -}}</h3>
|
||||
{{ range where $.Site.Data.packages "name" .Title }}
|
||||
<p class="one-box-down lead">{{- .desc -}}</p>
|
||||
<p class="mb-5">{{- .desc -}}</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||
{{ if not (eq .package_yml_url "#")}}
|
||||
<a target="_blank" href="{{- .package_yml_url -}}">
|
||||
<button class="detail-btn-large me-3 mb-3" id="purple-bg-btn"><i class="icon-enter-arrow"></i>View on GitHub</button>
|
||||
<button class="hbtn hb-fill-right mb-3" style="width:100% !important;">VIEW ON GITHUB</button>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||
{{ if not (eq .homepage "") }}
|
||||
<a target="_blank" href="{{- .homepage -}}">
|
||||
<button class="detail-btn-large" id="standard-detail-btn"><i class="icon-enter-arrow"></i>Visit package home</button>
|
||||
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;">VISIT PACKAGE HOME</button>
|
||||
</a>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ range where $.Site.Data.packages "name" .Title }}
|
||||
{{- partial "clipboard-copy-package-detail.html" . -}}
|
||||
{{ end }}
|
||||
<p class="small grid-gray">Copy the tea one-liner above into your terminal to install  {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -42,27 +56,15 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col grid-gray mb-5">
|
||||
Copy the tea one-liner below into your terminal to install  {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ range where $.Site.Data.packages "name" .Title }}
|
||||
{{- partial "clipboard-copy-package-detail.html" . -}}
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.package-thumbnail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
|
|
|
|||
|
|
@ -1,181 +1,42 @@
|
|||
<hr>
|
||||
<div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
|
||||
<input class="one-liner" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
|
||||
<div class="row mt-3 mb-3" onclick="myFunction()">
|
||||
<div class="col">
|
||||
<div class="input-container p-1" style="display:flex; justify-content:space-between;">
|
||||
<input class="one-liner ms-3" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
|
||||
|
||||
<!-- The button used to copy the text -->
|
||||
|
||||
<button type="button" class="clipboard-copy" id="liveToastBtn" onclick="changeCopied()">copy</button>
|
||||
<button type="button" class="clipboard-copy hbtn hb-fill-right" id="liveToastBtn" onclick="changeCopied()">copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<style>
|
||||
|
||||
.button-container{
|
||||
.one-liner{
|
||||
width:75%;
|
||||
height:100%;
|
||||
background-color:#1a1a1a;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
|
||||
.one-liner{
|
||||
width: 80%;
|
||||
padding: 2.455vw 4.185vw;
|
||||
border-radius: 0px;
|
||||
border:none;
|
||||
background-color: #1a1a1a !important;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
font-size: 2vw;
|
||||
border-left: 2px solid #949494;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.one-liner:focus{
|
||||
border:none;
|
||||
box-shadow:none!important;
|
||||
outline:none;
|
||||
border-left: 2px solid #949494;
|
||||
border:none !important;
|
||||
}
|
||||
|
||||
.clipboard-copy{
|
||||
height: 8.371vw;
|
||||
width: 18%;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
font-size: 2.1vw;
|
||||
float:right !important;
|
||||
background-color: #1a1a1a !important;
|
||||
border: none;
|
||||
border-right: 2px solid #949494;
|
||||
transition: 0.2s linear;
|
||||
width:25%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.clipboard-copy:hover{
|
||||
background-color: #00ffd0 !important;
|
||||
color: #1a1a1a !important;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
||||
|
||||
.button-container{
|
||||
padding:0px 6.1vw !important;
|
||||
}
|
||||
|
||||
.one-liner{
|
||||
width: 80%;
|
||||
padding: 2.455vw 5.040vw !important;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
background-color: #1a1a1a !important;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
font-size: 2vw;
|
||||
border-left: 2px solid #949494;
|
||||
}
|
||||
|
||||
.one-liner:focus{
|
||||
border:none;
|
||||
outline: none;
|
||||
border-left: 2px solid #949494;
|
||||
}
|
||||
|
||||
.clipboard-copy{
|
||||
height: 8.371vw;
|
||||
width: 18%;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
font-size: 2.1vw;
|
||||
float:right !important;
|
||||
background-color: #1a1a1a !important;
|
||||
border: none;
|
||||
border-right: 2px solid #949494;
|
||||
transition: 0.2s linear;
|
||||
}
|
||||
|
||||
.clipboard-copy:hover{
|
||||
background-color: #00ffd0 !important;
|
||||
color: #1a1a1a !important;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 768px) {
|
||||
|
||||
.button-container{
|
||||
padding: 0vw 8vw !important;
|
||||
}
|
||||
|
||||
.one-liner{
|
||||
width: 77%;
|
||||
padding: 5vw 4vw;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
background-color: #1a1a1a !important;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
font-size: 3.5vw;
|
||||
border-left: 2px solid #949494;
|
||||
}
|
||||
|
||||
.one-liner:focus{
|
||||
border:none;
|
||||
outline: none;
|
||||
border-left: 2px solid #949494;
|
||||
}
|
||||
|
||||
.clipboard-copy{
|
||||
padding: 5vw 4vw;
|
||||
width: 20%;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
font-size: 3.5vw;
|
||||
float:right;
|
||||
background-color: #1a1a1a !important;
|
||||
border: none;
|
||||
border-right: 2px solid #949494;
|
||||
transition: 0.2s linear;
|
||||
}
|
||||
|
||||
.clipboard-copy:hover{
|
||||
background-color: #00ffd0 !important;
|
||||
color: #1a1a1a !important;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
.one-liner{
|
||||
.input-container{
|
||||
width:100%;
|
||||
padding: 7.5vw 7.5vw !important;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
background-color: #1a1a1a !important;
|
||||
font-family: "pp-neue-machina";
|
||||
color:#ffffff;
|
||||
text-align: center !important;
|
||||
font-size: 4vw;
|
||||
border-left: 2px solid #949494;
|
||||
border-right: 2px solid #949494;
|
||||
}
|
||||
|
||||
.one-liner:focus{
|
||||
border:none;
|
||||
outline: none;
|
||||
border-left: 2px solid #949494;
|
||||
border-right: 2px solid #949494;
|
||||
}
|
||||
|
||||
.clipboard-copy{
|
||||
display: none;
|
||||
}
|
||||
border: 2px solid gray;
|
||||
border-radius: 7px;
|
||||
height:60px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function changeCopied() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue