From 65b16b1190e323970dad3e8a814c54cefd566c19 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 18 Oct 2022 20:05:14 -0400
Subject: [PATCH] Added styled copy-to-clipboard field to package detail page

---
 src/layouts/page/package-detail.html | 145 ++++++++++++++++++++++-----
 1 file changed, 118 insertions(+), 27 deletions(-)

diff --git a/src/layouts/page/package-detail.html b/src/layouts/page/package-detail.html
index 1a14d9c..be51025 100644
--- a/src/layouts/page/package-detail.html
+++ b/src/layouts/page/package-detail.html
@@ -21,42 +21,133 @@
   </div>
 </section>
 
+<!-- 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>
+  </div>
 <hr>
 
-<!-- The text field -->
-<code class="one-liner" data-lang="sh">$ sh <(curl tea.xyz) install</code>
-
-<!-- The button used to copy the text -->
-<button class="clipboard-copy" onclick="myFunction()"><i class="icon-download-arrow"></i></button>
+{{- partial "clipboard-modal.html" -}}
 
 <style>
 
-  .one-liner{
-    width: 85%;
-    height: 8.371vw;
-    border-radius: 0px;
-    border: none;
-    background-color: #1a1a1a !important;
-    font-family: "pp-neue-machina";
-    color:#4d4d4d;
-    font-size: 2.1vw;
-    padding-left: 8.371vw;
+  @media only screen and (min-width: 768px) {
+
+    .one-liner{
+      width: 85%;
+      padding: 2.455vw 4.185vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#4d4d4d;
+      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;
+      font-size: 2.1vw;
+      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;
+    }
+
   }
 
-  .clipboard-copy{
-    height: 8.371vw;
-    width: 14%;
-    font-family: "pp-neue-machina";
-    color:#4d4d4d;
-    font-size: 2.1vw;
-    float:right;
-    background-color: #1a1a1a !important;
-    border: none;
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .one-liner{
+      width: 85%;
+      padding: 5vw 4vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#4d4d4d;
+      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;
+      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;
+    }
+
   }
 
-  .clipboard-copy:hover{
-    background-color: #00ffd0 !important;
-    color: #1a1a1a !important;
+  @media only screen and (max-width: 576px) {
+
+    .one-liner{
+      width: 100%;
+      padding: 7.5vw 7.5vw !important;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#4d4d4d;
+      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>