From 190fc28437ca42765672195c0b5bb76963cfdaba Mon Sep 17 00:00:00 2001
From: Tom Slominski <tomslominski@gmail.com>
Date: Fri, 6 Mar 2015 15:01:19 +0000
Subject: [PATCH] Splitting labels into two

---
 index.php        | 20 ++++++++++++--------
 public/style.css | 22 ++++++++++++++++++----
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/index.php b/index.php
index b45cd40..313ffee 100644
--- a/index.php
+++ b/index.php
@@ -10,23 +10,27 @@ $title   = isset( $_REQUEST['title'] ) ? yourls_sanitize_title( $_REQUEST['title
 	<h2><?php yourls_e( 'Enter a new URL to shorten', 'isq_translation'); ?></h2>
 	<h3><?php yourls_e( 'Hover over the labels to see more information', 'isq_translation'); ?></h3>
 	<form method="post" action="result.php">
-		<div class="full-width">
-			<label for="url" title="<?php yourls_e( 'Paste the long URL here', 'isq_translation'); ?>"><?php yourls_e( 'Long URL (required):', 'isq_translation'); ?></label>
+		<div class="form-item full-width">
+			<label for="url" class="primary"><?php yourls_e( 'Long URL (required):', 'isq_translation'); ?></label>
+			<label for="url" class="secondary"><?php yourls_e( 'Paste the long URL here', 'isq_translation'); ?></label>
 			<input type="url" id="url" name="url" value="<?php echo($url); ?>" />
 		</div>
 
-		<div class="half-width">
-			<label for="keyword" title="<?php yourls_e( 'A keyword replaces the default short string', 'isq_translation'); ?>"><?php yourls_e( 'Custom keyword:', 'isq_translation'); ?></label>
+		<div class="form-item half-width">
+			<label for="keyword" class="primary"><?php yourls_e( 'Custom keyword:', 'isq_translation'); ?></label>
+			<label for="keyword" class="secondary"><?php yourls_e( 'A keyword replaces the default short string', 'isq_translation'); ?></label>
 			<input type="text" id="keyword" name="keyword" value="<?php echo($keyword); ?>" />
 		</div>
 
-		<div class="half-width">
-			<label for="title" title="<?php yourls_e( 'Optional title used when sharing a link from YOURLS using social sharers', 'isq_translation'); ?>"><?php yourls_e( 'Optional title:', 'isq_translation'); ?></label>
+		<div class="form-item half-width">
+			<label for="title" class="primary"><?php yourls_e( 'Optional title:', 'isq_translation'); ?></label>
+			<label for="title" class="secondary"><?php yourls_e( 'Optional title used when sharing a link from YOURLS using social sharers', 'isq_translation'); ?></label>
 			<input type="text" id="title" value="<?php echo($title); ?>" />
 		</div>
 
-		<div class="recaptcha-container">
-			<label title="<?php yourls_e( 'Verification used to ensure the user is not a bot', 'isq_translation'); ?>"><?php yourls_e( 'reCAPTCHA:', 'isq_translation'); ?></label>
+		<div class="form-item recaptcha-container">
+			<label class="primary" title=""><?php yourls_e( 'reCAPTCHA:', 'isq_translation'); ?></label>
+			<label class="secondary"><?php yourls_e( 'Verification used to ensure the user is not a bot', 'isq_translation'); ?></label>
 			<div class="g-recaptcha" data-sitekey="<?php echo ISQ::$recaptcha['sitekey']; ?>"></div>
 		</div>
 
diff --git a/public/style.css b/public/style.css
index 48b0133..ed16a3b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -100,18 +100,32 @@ a, a:visited {
 }
 
 /* Forms */
-input:not([type=submit]):not([type=file]) {
-	padding: 10px;
+.form-item {
+	padding: 2%;
 }
 
-.full-width input:not([type=submit]):not([type=file]) {
+.full-width {
 	width: 100%;
 }
 
-.half-width input:not([type=submit]):not([type=file]) {
+.half-width {
 	width: 50%;
 }
 
+label.primary {
+	font-weight: bold;
+}
+
+label.secondary {
+	color: #CCC;
+}
+
+input:not([type=submit]):not([type=file]) {
+	width: 100%;
+	padding: 10px;
+}
+
+
 /* Tooltips */
 .qtip-default {
 	border-color: #013F6D;