Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jjhesk/d1d014ce9ee2ea6629e011a576105739 to your computer and use it in GitHub Desktop.
Save jjhesk/d1d014ce9ee2ea6629e011a576105739 to your computer and use it in GitHub Desktop.
Click and Copy to Clipboard (referral/invite links)
<div class="wrapper">
<div class="content u-flexCenter u-sizeViewHeightMin100">
<div class="shareUrl u-verticalGrid u-marginAuto u-size1040">
<header class="shareUrl-header">
<h1 class="shareUrl-headerText">Click to Copy Invite Link</h1>
<p class="shareUrl-headerSubtext">Share to your favorite friend.</p>
</header>
<div class="shareUrl-body">
<div class="container">
<!-- COPY INPUT -->
<input class="shareUrl-input js-shareUrl" type="text" readonly="readonly" />
<p class="shareUrl-subtext">Click above to copy the link.</p>
</div>
</div>
<footer class="shareUrl-footer">
<p>Works in Chrome, Firefox, IE9, Opera.</p>
</footer>
</div>
</div>
</div>
(function() {
// Create reusable copy fn
function copy(element) {
return function() {
document.execCommand('copy', false, element.select());
}
}
// Grab shareUrl element
var shareUrl = document.querySelector('.js-shareUrl');
// Create new instance of copy, passing in shareUrl element
var copyShareUrl = copy(shareUrl);
// Set value via markup or JS
shareUrl.value = "codepen.io/nicknish";
// Click listener with copyShareUrl handler
shareUrl.addEventListener('click', copyShareUrl, false);
}());
// Only necessary change from a UX perspective
.shareUrl-input {
cursor: pointer;
}
/* Stylistic Changes
=================== */
// fonts
$font-sans: -apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
$font-code: Menlo, Monaco, "Courier New", Courier, monospace;
// colors
$background: linear-gradient(to bottom right, RGBA(8,81,119,1), RGBA(118,199,196,1)), rgba(8,81,119,1);
$highlight-color: rgba(116,201,71,.8);
$transparent: rgba(0,0,0,0);
$white: #fff;
$body-color: #fff;
html {
height: 100%;
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
}
body,
.wrapper,
.content {
min-height: 100vh;
}
body {
max-width: 100%;
overflow-x: hidden;
font-family: $font-sans;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
background: $background;
color: $body-color;
::selection {
background: $highlight-color;
color: $white;
}
}
.wrapper {
background: $background;
}
p {
line-height: 1.3;
}
// Share URL Component
.shareUrl {
width: 100%;
padding: 40px 20px;
text-align: center;
}
.shareUrl-header {
margin-bottom: 40px;
}
.shareUrl-headerText {
margin-top: 0;
margin-bottom: 10px;
font-size: 22px;
}
.shareUrl-subtext {
margin-top: 10px;
font-size: 14px;
}
.shareUrl-body {
margin-bottom: 70px;
}
.shareUrl-input {
width: 100%;
padding: 10px 0;
border: 2px solid rgba(0,0,0,.09);
text-align: center;
font-size: 26px;
font-weight: bold;
color: rgba(255,255,255,0.9);
background: $transparent;
border-radius: 3px;
transition: all 300ms ease;
&:hover,
&:focus,
&:active {
border-color: rgba(0,0,0,.3);
background: rgba(255,255,255,.1);
}
}
// Media Queries
@media (min-width: 568px) {
.shareUrl {
padding: 70px 20px;
}
.shareUrl-input {
max-width: 100%;
font-size: 56px;
}
.shareUrl-headerText {
font-size: 32px;
}
}
// Helpers
.u-verticalGrid {
display: flex;
flex-flow: column wrap;
}
.u-flexCenter {
display: flex;
align-items: center !important;
}
.u-flexCenterHorizontal {
display: flex;
justify-content: center !important;
}
.u-sizeViewHeightMin100 {
min-height: 100vh !important;
}
.u-size1040 {
max-width: 1040px;
}
.u-marginAuto {
margin: 0 auto;
}
@jjhesk
Copy link
Author

jjhesk commented Sep 30, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment