Fix to click to copy, added NB-man pages to flipbook

This commit is contained in:
Thomas Smith 2022-10-28 18:05:12 -04:00
parent 1742a382c8
commit 203f699a7e
11 changed files with 14 additions and 143 deletions

View file

@ -85,12 +85,15 @@
<div class="aspect"> <div class="aspect">
<div class="aspect-inner"> <div class="aspect-inner">
<div class="flipbook" id="flipbook"> <div class="flipbook" id="flipbook">
<div class="page"><img src="/Images/placeholder/batman-2016-120-1.jpeg" draggable="false" alt="" /></div> <div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/placeholder/batman-2016-120-3.jpeg" draggable="false" alt="" /></div> <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/placeholder/batman-2016-120-4.jpeg" draggable="false" alt="" /></div> <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/placeholder/batman-2016-120-5.jpeg" draggable="false" alt="" /></div> <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/placeholder/batman-2016-120-6.jpeg" draggable="false" alt="" /></div> <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/placeholder/batman-2016-120-7.jpeg" draggable="false" alt="" /></div> <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -32,144 +32,12 @@
</div> </div>
</section> </section>
<hr> {{- partial "clipboard-copy.html" -}}
<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" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button> <script type="text/javascript">
</div>
<hr>
<style> document.getElementById("shortcodeCopy").value = "sh <curl tea.xyz) +{{- .Title -}}";
@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;
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:#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: 14%;
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%;
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;
}
}
</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);
//Change button text to 'copied'
document.getElementById("copy-icon").innerHTML = "copied!";
}
</script> </script>
<style> <style>

View file

@ -1,6 +1,6 @@
<hr> <hr>
<div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;"> <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> <input class="one-liner" type="text" value="sh <(curl tea.xyz)" id="shortcodeCopy" readonly>
<!-- The button used to copy the text --> <!-- The button used to copy the text -->
@ -180,7 +180,7 @@
function changeCopied() { function changeCopied() {
// Get the text field // Get the text field
var copyText = document.getElementById("myInput"); var copyText = document.getElementById("shortcodeCopy");
// Select the text field // Select the text field
copyText.select(); copyText.select();

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 520 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB