Merge pull request #242 from teaxyz/view-source-link

Add view source link to main click-to-copy field
This commit is contained in:
Thomas Smith 2022-12-27 14:18:47 -05:00 committed by GitHub
commit f6b7fbc47f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -5,6 +5,9 @@
<!-- 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" id="liveToastBtn" onclick="changeCopied()">copy</button>
<a href="https://github.com/teaxyz/setup/blob/main/install.sh" class="src-link">
<button type="button" class="clipboard-copy source-btn" id="source-btn">view source</button>
</a>
</div> </div>
<hr> <hr>
@ -17,7 +20,7 @@
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.one-liner{ .one-liner{
width: 80%; width: 60%;
padding: 2.455vw 4.185vw; padding: 2.455vw 4.185vw;
border-radius: 0px; border-radius: 0px;
border: none; border: none;
@ -34,9 +37,18 @@
border-left: 2px solid #949494; border-left: 2px solid #949494;
} }
.source-btn{
width: 100% !important;
}
.src-link{
width: 20% !important;
padding: 0px !important;
}
.clipboard-copy{ .clipboard-copy{
height: 8.371vw; height: 8.371vw;
width: 18%; width: 20%;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#ffffff; color:#ffffff;
font-size: 2.1vw; font-size: 2.1vw;
@ -53,6 +65,10 @@
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
} }
#liveToastBtn{
border-left: 2px solid #949494;
}
} }
@media only screen and (min-width: 768px) and (max-width: 992px) { @media only screen and (min-width: 768px) and (max-width: 992px) {
@ -62,7 +78,7 @@
} }
.one-liner{ .one-liner{
width: 80%; width: 60%;
padding: 2.455vw 5.040vw !important; padding: 2.455vw 5.040vw !important;
border-radius: 0px; border-radius: 0px;
border: none; border: none;
@ -79,9 +95,18 @@
border-left: 2px solid #949494; border-left: 2px solid #949494;
} }
.source-btn{
width: 100% !important;
}
.src-link{
width: 20% !important;
padding: 0px !important;
}
.clipboard-copy{ .clipboard-copy{
height: 8.371vw; height: 8.371vw;
width: 18%; width: 20%;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#ffffff; color:#ffffff;
font-size: 2.1vw; font-size: 2.1vw;
@ -98,6 +123,10 @@
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
} }
#liveToastBtn{
border-left: 2px solid #949494;
}
} }
@media only screen and (min-width: 576px) and (max-width: 768px) { @media only screen and (min-width: 576px) and (max-width: 768px) {
@ -107,10 +136,13 @@
} }
.one-liner{ .one-liner{
width: 77%; width: 100%;
padding: 5vw 4vw; padding: 5vw 4vw;
border-radius: 0px; border-radius: 0px;
border: none; border: none;
border-bottom: 2px solid #949494;
border-right: 2px solid #949494;
text-align: center;
background-color: #1a1a1a !important; background-color: #1a1a1a !important;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#ffffff; color:#ffffff;
@ -124,9 +156,18 @@
border-left: 2px solid #949494; border-left: 2px solid #949494;
} }
.source-btn{
width: 100% !important;
}
.src-link{
width: 50% !important;
padding: 0px !important;
}
.clipboard-copy{ .clipboard-copy{
padding: 5vw 4vw; padding: 5vw 4vw;
width: 20%; width: 50%;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#ffffff; color:#ffffff;
font-size: 3.5vw; font-size: 3.5vw;
@ -143,6 +184,10 @@
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
} }
#liveToastBtn{
border-left: 2px solid #949494;
}
} }
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
@ -153,6 +198,7 @@
border-radius: 0px; border-radius: 0px;
border: none; border: none;
background-color: #1a1a1a !important; background-color: #1a1a1a !important;
border-bottom: 2px solid #949494;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#ffffff; color:#ffffff;
text-align: center !important; text-align: center !important;
@ -168,8 +214,36 @@
border-right: 2px solid #949494; border-right: 2px solid #949494;
} }
.source-btn{
width: 100% !important;
}
.src-link{
width: 50% !important;
padding: 0px !important;
}
.clipboard-copy{ .clipboard-copy{
display: none; padding: 5vw 4vw;
width: 50%;
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;
}
#liveToastBtn{
border-left: 2px solid #949494;
} }
} }