mirror of
https://github.com/ivabus/www
synced 2024-11-22 19:15:05 +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>
|
</div>
|
||||||
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
|
<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 }}
|
{{ 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 "#")}}
|
{{ if not (eq .package_yml_url "#")}}
|
||||||
<a target="_blank" href="{{- .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>
|
</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||||
{{ if not (eq .homepage "") }}
|
{{ if not (eq .homepage "") }}
|
||||||
<a target="_blank" href="{{- .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>
|
</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -42,27 +56,15 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{{ range where $.Site.Data.packages "name" .Title }}
|
|
||||||
{{- partial "clipboard-copy-package-detail.html" . -}}
|
|
||||||
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.package-thumbnail{
|
.package-thumbnail{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
background-color: gray;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover{
|
a:hover{
|
||||||
|
|
|
||||||
|
|
@ -1,181 +1,42 @@
|
||||||
<hr>
|
<div class="row mt-3 mb-3" onclick="myFunction()">
|
||||||
<div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
|
<div class="col">
|
||||||
<input class="one-liner" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
|
<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 -->
|
<!-- 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>
|
</div>
|
||||||
<hr>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.one-liner{
|
||||||
.button-container{
|
width:75%;
|
||||||
|
height:100%;
|
||||||
background-color:#1a1a1a;
|
background-color:#1a1a1a;
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 992px) {
|
|
||||||
|
|
||||||
.one-liner{
|
|
||||||
width: 80%;
|
|
||||||
padding: 2.455vw 4.185vw;
|
|
||||||
border-radius: 0px;
|
|
||||||
border:none;
|
border:none;
|
||||||
background-color: #1a1a1a !important;
|
color: #fff;
|
||||||
font-family: "pp-neue-machina";
|
|
||||||
color:#ffffff;
|
|
||||||
font-size: 2vw;
|
|
||||||
border-left: 2px solid #949494;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.one-liner:focus{
|
.one-liner:focus{
|
||||||
border:none;
|
box-shadow:none!important;
|
||||||
outline:none;
|
outline:none;
|
||||||
border-left: 2px solid #949494;
|
border:none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clipboard-copy{
|
.clipboard-copy{
|
||||||
height: 8.371vw;
|
width:25%;
|
||||||
width: 18%;
|
height:100%;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
.input-container{
|
||||||
.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{
|
|
||||||
width:100%;
|
width:100%;
|
||||||
padding: 7.5vw 7.5vw !important;
|
border: 2px solid gray;
|
||||||
border-radius: 0px;
|
border-radius: 7px;
|
||||||
border: none;
|
height:60px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
function changeCopied() {
|
function changeCopied() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue