Updated click to copy on package detail

This commit is contained in:
Thomas Smith 2022-10-19 17:17:47 -04:00
parent c91a85c2ef
commit 19880c4c3e

View file

@ -21,18 +21,16 @@
</div>
</section>
<!-- Copy to clipboard field -->
<!-- Copy to clipboard field -->
<hr>
<div class="row button-container">
<input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
<button class="clipboard-copy" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="icon-clipboard"></i></button>
<button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
</div>
<hr>
{{- partial "clipboard-modal.html" -}}
<style>
@media only screen and (min-width: 768px) {
@ -44,24 +42,22 @@
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#4d4d4d;
color:#ffffff;
font-size: 2vw;
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{
height: 8.371vw;
width: 14%;
font-family: "pp-neue-machina";
color:#4d4d4d;
color:#ffffff;
font-size: 2.1vw;
float:right;
background-color: #1a1a1a !important;
@ -87,24 +83,22 @@
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#4d4d4d;
color:#ffffff;
font-size: 3.5vw;
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{
padding: 5vw 4vw;
width: 14%;
font-family: "pp-neue-machina";
color:#4d4d4d;
color:#ffffff;
font-size: 3.5vw;
float:right;
background-color: #1a1a1a !important;
@ -130,18 +124,16 @@
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#4d4d4d;
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{
@ -164,8 +156,8 @@
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Copied " + copyText.value + " to clipboard");
//Change button text to 'copied'
document.getElementById("copy-icon").innerHTML = "copied!";
}
</script>