Splitting labels into two

This commit is contained in:
Tom Slominski
2015-03-06 15:01:19 +00:00
parent bcd6bb68a0
commit 190fc28437
2 changed files with 30 additions and 12 deletions

View File

@@ -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> <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> <h3><?php yourls_e( 'Hover over the labels to see more information', 'isq_translation'); ?></h3>
<form method="post" action="result.php"> <form method="post" action="result.php">
<div class="full-width"> <div class="form-item 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> <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); ?>" /> <input type="url" id="url" name="url" value="<?php echo($url); ?>" />
</div> </div>
<div class="half-width"> <div class="form-item 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> <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); ?>" /> <input type="text" id="keyword" name="keyword" value="<?php echo($keyword); ?>" />
</div> </div>
<div class="half-width"> <div class="form-item 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> <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); ?>" /> <input type="text" id="title" value="<?php echo($title); ?>" />
</div> </div>
<div class="recaptcha-container"> <div class="form-item 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> <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 class="g-recaptcha" data-sitekey="<?php echo ISQ::$recaptcha['sitekey']; ?>"></div>
</div> </div>

View File

@@ -100,18 +100,32 @@ a, a:visited {
} }
/* Forms */ /* Forms */
input:not([type=submit]):not([type=file]) { .form-item {
padding: 10px; padding: 2%;
} }
.full-width input:not([type=submit]):not([type=file]) { .full-width {
width: 100%; width: 100%;
} }
.half-width input:not([type=submit]):not([type=file]) { .half-width {
width: 50%; width: 50%;
} }
label.primary {
font-weight: bold;
}
label.secondary {
color: #CCC;
}
input:not([type=submit]):not([type=file]) {
width: 100%;
padding: 10px;
}
/* Tooltips */ /* Tooltips */
.qtip-default { .qtip-default {
border-color: #013F6D; border-color: #013F6D;