From 8d23fe783478ab673f8a4a3b0eac3f8f2a3aa938 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Wed, 19 Oct 2022 16:07:48 -0400
Subject: [PATCH] Converted clipboard copy cta to partial

---
 src/layouts/index.html                   |   2 +-
 src/layouts/page/tea-cli.html            | 169 +----------------------
 src/layouts/partials/clipboard-copy.html | 155 ++++++++++++++++-----
 3 files changed, 119 insertions(+), 207 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 4ca713d..af105d3 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -41,7 +41,7 @@
   </div>
 </section>
   <div class="full-width-cta-container">
-   {{- partial "full-width-cta.html" . -}}
+   {{- partial "clipboard-copy.html" . -}}
   </div>
   <div class="hero-bottom">
 
diff --git a/src/layouts/page/tea-cli.html b/src/layouts/page/tea-cli.html
index c991b7e..120eebd 100644
--- a/src/layouts/page/tea-cli.html
+++ b/src/layouts/page/tea-cli.html
@@ -24,174 +24,7 @@
 
 </style>
 
-<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) install&nbsp;{{- .Title -}}" id="myInput" readonly>
-
-    <!-- The button used to copy the text -->
-    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal"><u>copy</u></button>
-  </div>
-<hr>
-
-<section class="animated-25" id="reveal" style="display:none;">
-  <div class="container">
-    <div class="row">
-      <div class="col">
-        <p class="text-center">Have you <a href="#">authenticated with tea</a>?</p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<style>
-
-  #reveal{
-    transition: 0.2s linear;
-  }
-
-  @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:#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: 14%;
-      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) {
-
-    .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;
-    }
-
-  }
-
-  @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>
-
-<script>
-
-    function myFunction() {
-    // Get the text field
-    var copyText = document.getElementById("myInput");
-
-    // Select the text field
-    copyText.select();
-    copyText.setSelectionRange(0, 99999); // For mobile devices
-
-     // 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!";
-
-    // Reveal Auth text
-    if (document.getElementById("reveal").style.display = "none") {
-      document.getElementById("reveal").style.display = "block";
-    } else {
-      document.getElementById("reveal").style.display = "none";
-    }
-  }
-
-</script>
+{{- partial "clipboard-copy.html" -}}
 
 <section class="teal-bg two-boxes">
   <div class="container">
diff --git a/src/layouts/partials/clipboard-copy.html b/src/layouts/partials/clipboard-copy.html
index 9ffd692..174359b 100644
--- a/src/layouts/partials/clipboard-copy.html
+++ b/src/layouts/partials/clipboard-copy.html
@@ -1,52 +1,130 @@
 <hr>
-  <div class="row button-container">
-    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
+  <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)" id="myInput" readonly>
 
     <!-- The button used to copy the text -->
-    <button class="clipboard-copy" onclick="myFunction()" id="copy-icon"><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>
 
-
 <style>
 
-  .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: 2.1vw;
-    border-left: 2px solid #949494;
-    border-right: 2px solid #949494;
+  .button-container{
+    background-color: #1a1a1a;
   }
 
-  .one-liner:focus{
-    border:none;
-    outline: none;
-    border-left: 2px solid #949494;
-    border-right: 2px solid #949494;
+  @media only screen and (min-width: 768px) {
+
+    .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;
+    }
+
+    .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;
+    }
+
   }
 
-  .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;
+  @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;
-    box-shadow: inset 0vw 0vw 0vw 0.558vw #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>
@@ -64,11 +142,12 @@
      // Copy the text inside the text field
     navigator.clipboard.writeText(copyText.value);
 
-    // Alert the copied text
-    alert("Copied " + copyText.value + " to clipboard");
+    /* Alert the copied text
+    alert("Copied " + copyText.value + " to clipboard");*/
 
-    // Copy icon
+    //Change button text to 'copied'
     document.getElementById("copy-icon").innerHTML = "copied!";
+
   }
 
 </script>