From a3dc3d53c70788dbd511b44b1c5b928375b8e70d Mon Sep 17 00:00:00 2001
From: Ryan Carbotte
Date: Wed, 15 Apr 2020 21:01:52 -0500
Subject: [PATCH 1/2] feat: Added button to generate a permalink
Added a button to the UI near the Reset fields button and generate a URL that only contains the populated fields
Closes #108
---
css/styles.css | 28 ++++++++++++++++++++++++----
index.html | 9 ++++++++-
js/scripts.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 81 insertions(+), 5 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index af322c6..60c9aa2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -267,10 +267,10 @@ input[type=number] {
color: #FFF;
}
-.reset-button {
+.button {
+ color: #686868;
font-family: inherit;
font-weight: bold;
- color: #FFBABA;
padding: 8px 16px;
border-width: 0px;
border-radius: 40px;
@@ -281,13 +281,16 @@ input[type=number] {
margin: 16px auto;
}
-.reset-button:hover {
+.button:hover {
transform: scale(1.1);
cursor: pointer;
opacity: 1;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
}
+.button.button--reset {
+ color: #E45B5B;
+}
.table-wrapper {
display: inline-block;
@@ -378,7 +381,6 @@ input[type=number] {
justify-content: center;
}
-
.waves {
position: relative;
width: 100%;
@@ -388,6 +390,24 @@ input[type=number] {
max-height: 150px;
}
+#permalink-input {
+ display: none;
+ position: fixed;
+}
+
+.permalink {
+ display: none;
+ white-space: nowrap;
+ font-size: 18px;
+ user-select: none;
+ cursor: pointer;
+}
+
+.permalink .fa-copy {
+ margin: 0 8px;
+ height: 20px;
+ color: #0AB5CD;
+}
/* Animation */
.parallax>use {
diff --git a/index.html b/index.html
index 0bfb4dd..d504ae0 100644
--- a/index.html
+++ b/index.html
@@ -182,7 +182,14 @@
-
+ Some text some message...
+
diff --git a/js/scripts.js b/js/scripts.js
index 817ddfb..3438a3a 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -42,6 +42,7 @@ const first_buy_radios = getFirstBuyRadios()
const previous_pattern_radios = getPreviousPatternRadios()
const permalink_input = $('#permalink-input')
const permalink_button = $('#permalink-btn')
+const snackbar = $('#snackbar')
//Functions
const fillFields = function (prices, first_buy, previous_pattern) {
@@ -305,7 +306,17 @@ const copyPermalink = function () {
document.execCommand('copy');
permalink_input.hide();
- alert('Copied!');
+ flashMessage("Permalink copied!");
+}
+
+const flashMessage = function(message) {
+ snackbar.text(message);
+ snackbar.addClass('show');
+
+ setTimeout(function () {
+ snackbar.removeClass('show')
+ snackbar.text('');
+ }, 3000);
}
const update = function () {