Separated the 'Next Quote' button from the card for better UX.

faahim · Aug 15, 2017 · 40b97da · 40b97da
1 parent f062ed5
commit 40b97da
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 26 deletions.
diff --git a/css/style.css b/css/style.css
@@ -9,7 +9,7 @@ body {
 	font-size: 3em;
 	font-weight: 500;
 	padding: 0 30px;
-	margin-top: 20px;
+	margin: 10px 0;
 }
 
 .long-quote {
@@ -22,9 +22,8 @@ body {
 
 #quote-box {
 	width: 60vw;
-	height: 50vh;
-	margin: 20vh auto 0;
-	padding: 30px;
+	margin: 10vh auto 0;
+	padding: 30px 30px 100px;
 	border-radius: 10px;
 	background-color: #3EBB68;
 	position: relative;
@@ -43,15 +42,14 @@ body {
 
 .insert-author {
 	display: inline-block;
-	width: 60%;
+	width: 85%;
 	font-size: 2em;
 	margin: 0;
 }
 
 a {
 	display: inline-block;
 	position: relative;
-	left: 20px;
 	top: 8px;
 }
 
@@ -66,15 +64,18 @@ i:hover {
 
 button {
 	background-color: rgba(56, 56, 56, 0.30);
+	padding: 10px;
 	border: none;
 	border-radius: 8px;
-	transition: 1s;
+	transition: 0.3s;
 	overflow: hidden;
 	outline: none;
-	width: 25%;
+	width: 15%;
 	color: white;
-	font-size: 1.3em;
-	position: relative;
+	font-size: 1.4em;
+	position: absolute;
+	bottom: 15%;
+	left: 42%;
 }
 
 button:hover {
@@ -84,9 +85,10 @@ button:hover {
 .next {
 	display: inline-block;
 	position: relative;
-	left: -10px;
-	bottom: 5px;
-	margin: 10px 0;
+	margin: 0;
+	/*left: -10px;*/
+	bottom: 10px;
+	/*margin: 10px 0;*/
 }
 
 .refresh {
@@ -98,8 +100,8 @@ button:hover {
 	border: 20px solid white;
 	border-top-color: #C24789;
 	position: relative;
-	left: -10%;
-	bottom: -8px;
+	/*left: -10%;*/
+	top: 3px;
 	transition: all 1s;
 }
 

diff --git a/index.html b/index.html
@@ -16,14 +16,15 @@
 
 		<div class="controls">
 			<p class="insert-author">- J. Cole</p>
-			<button id="btn">
-				<div class="refresh"></div>
-				<p class="next">Next Quote</p>
-			</button>
 			<a id="tweet" class="twitter-share-button" href="https://twitter.com/intent/tweet?text=The bad news is nothing lasts forever, The good news is nothing lasts forever. - J. Cole" target="_blank" title="Tweet this Quote!"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a>
 		</div>
 
 	</div>
+
+	<button id="btn">
+		<div class="refresh"></div>
+		<p class="next">Next Quote</p>
+	</button>
 </body>
 
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

diff --git a/js/script.js b/js/script.js
@@ -15,13 +15,13 @@ $(document).ready(function() {
 				$(".insert-author").html("- " + quotes.author);
 				$("#tweet").attr("href", "https://twitter.com/intent/tweet?text="+quotes.quote+" -"+quotes.author);
 				$("#quote-box").attr("style", "background-color: #8F"+(Math.floor(Math.random() * (99 - 10 + 1) + 10))+(Math.floor(Math.random() * (99 - 10 + 1) + 10))+";");
-				if (quotes.quote.length > 100) {
-					$(".insert-quote").attr("style", "font-size: 2.5em");
-				} else if (quotes.quote.length > 160) {
-					$(".insert-quote").attr("style", "font-size: 2em");
-				} else if (quotes.quote.length < 100) {
-					$(".insert-quote").attr("style", "font-size: 3em");
-				}
+				// if (quotes.quote.length > 100) {
+				// 	$(".insert-quote").attr("style", "font-size: 2.5em");
+				// } else if (quotes.quote.length > 160) {
+				// 	$(".insert-quote").attr("style", "font-size: 2em");
+				// } else if (quotes.quote.length < 100) {
+				// 	$(".insert-quote").attr("style", "font-size: 3em");
+				// }
 			},
 			beforeSend: function(xhr) {
 		   xhr.setRequestHeader("X-Mashape-Authorization", "tLoCsKtopemshNeZYqkzFIYU45dvp1WHQRrjsnmBOsG4EMUvoE");