Beautified checkboxes and radioboxes

public_html/css/forms.css

@@ -80,6 +80,39 @@ textarea:focus, input:focus{
 	border-color: #5da;
 }
 
+input[type=radio],
+input[type=checkbox] {
+	display:none;
+}
+input[type=radio] + label,
+input[type=checkbox] + label {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+input[type=radio] + label:before,
+input[type=checkbox] + label:before {
+	font-family: 'FontAwesome';
+	display: inline-block;
+	width: 1em;
+	text-align: left;
+}
+input[type=radio] + label:before {
+	content: "\f1db";
+}
+input[type=radio]:checked + label:before {
+	content: "\f192";
+}
+input[type=checkbox] + label:before {
+	content: "\f096";
+}
+input[type=checkbox]:checked + label:before {
+	content: "\f046";
+}
+
+
 
 .file-handler {
 	border: 3px dashed #eee;

public_html/js/Presenters/UserBrowsingSettingsPresenter.js

@@ -42,12 +42,12 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 		var $messages = $el.find('.messages');
 		messagePresenter.hideMessages($messages);
 		var newSettings = {
-			endlessScroll: $el.find('[name=endless-scroll]:visible').prop('checked'),
+			endlessScroll: $el.find('[name=endless-scroll]').is(':checked'),
-			hideDownvoted: $el.find('[name=hide-downvoted]:visible').prop('checked'),
+			hideDownvoted: $el.find('[name=hide-downvoted]').is(':checked'),
 			listPosts: {
-				safe: $el.find('[name=listSafePosts]:visible').prop('checked'),
+				safe: $el.find('[name=listSafePosts]').is(':checked'),
-				sketchy: $el.find('[name=listSketchyPosts]:visible').prop('checked'),
+				sketchy: $el.find('[name=listSketchyPosts]').is(':checked'),
-				unsafe: $el.find('[name=listUnsafePosts]:visible').prop('checked'),
+				unsafe: $el.find('[name=listUnsafePosts]').is(':checked'),
 			},
 		};
 		browsingSettings.setSettings(newSettings).then(function() {

public_html/templates/account-removal.tpl

@@ -4,8 +4,8 @@
 	<div class="form-row">
 		<label class="form-label" for="account-removal-confirmation">Confirmation:</label>
 		<div class="form-input">
+			<input type="checkbox" id="account-removal-confirmation" name="confirmation"/>
 			<label for="account-removal-confirmation">
-				<input type="checkbox" id="account-removal-confirmation" name="confirmation"/>
 				I confirm that I want to delete this account.
 			</label>
 		</div>

public_html/templates/account-settings.tpl

@@ -13,8 +13,8 @@
 					};
 				%>
 				<% _.each(avatarStyles, function(v, k) { %>
+					<input <% print(user.avatarStyle == k ? 'checked="checked"' : '') %> type="radio" name="avatar-style" id="account-settings-avatar-<%= k %>" value="<%= k %>"/>
 					<label for="account-settings-avatar-<%= k %>">
-						<input <% print(user.avatarStyle == k ? 'checked="checked"' : '') %> type="radio" name="avatar-style" id="account-settings-avatar-<%= k %>" value="<%= k %>"/>
 						<%= v %>
 					</label>
 				<% }) %>

public_html/templates/browsing-settings.tpl

@@ -4,18 +4,18 @@
 	<div class="form-row">
 		<label class="form-label">Safety:</label>
 		<div class="form-input">
+			<input <% print(settings.listPosts.safe ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-safety-safe" name="listSafePosts" value="safe"/>
 			<label for="browsing-settings-safety-safe">
-				<input <% print(settings.listPosts.safe ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-safety-safe" name="listSafePosts" value="safe"/>
 				Safe
 			</label>
 
+			<input <% print(settings.listPosts.sketchy ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-safety-sketchy" name="listSketchyPosts" value="sketchy"/>
 			<label for="browsing-settings-safety-sketchy">
-				<input <% print(settings.listPosts.sketchy ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-safety-sketchy" name="listSketchyPosts" value="sketchy"/>
 				Sketchy
 			</label>
 
+			<input <% print(settings.listPosts.unsafe ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-safety-unsafe" name="listUnsafePosts" value="unsafe"/>
 			<label for="browsing-settings-safety-unsafe">
-				<input <% print(settings.listPosts.unsafe ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-safety-unsafe" name="listUnsafePosts" value="unsafe"/>
 				Unsafe
 			</label>
 		</div>
@@ -24,8 +24,8 @@
 	<div class="form-row">
 		<label class="form-label" for="browsing-settings-endless-scroll">Endless scroll:</label>
 		<div class="form-input">
+			<input <% print(settings.endlessScroll ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-endless-scroll" name="endlessScroll"/>
 			<label for="browsing-settings-endless-scroll">
-				<input <% print(settings.endlessScroll ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-endless-scroll" name="endless-scroll"/>
 				Enabled
 			</label>
 		</div>
@@ -34,8 +34,8 @@
 	<div class="form-row">
 		<label class="form-label" for="browsing-settings-hide-downvoted">Hide down-voted:</label>
 		<div class="form-input">
+			<input <% print(settings.hideDownvoted ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-hide-downvoted" name="hideDownvoted"/>
 			<label for="browsing-settings-hide-downvoted">
-				<input <% print(settings.hideDownvoted ? 'checked="checked"' : '') %>type="checkbox" id="browsing-settings-hide-downvoted" name="hide-downvoted"/>
 				Enabled
 			</label>
 		</div>

public_html/templates/login-form.tpl

@@ -26,8 +26,8 @@
 			<div class="form-input">
 				<button type="submit">Log in</button>
 				&nbsp;
-				<label>
+				<input type="checkbox" name="remember" id="login-remember"/>
-					<input type="checkbox" name="remember"/>
+				<label for="login-remember">
 					Remember me
 				</label>
 			</div>

public_html/templates/post-upload.tpl

@@ -21,6 +21,7 @@
 					<tr>
 						<th class="checkbox">
 							<input type="checkbox" name="select-all"/>
+							<label></label>
 						</th>
 						<th class="thumbnail"></th>
 						<th class="tags">Tags</th>
@@ -35,6 +36,7 @@
 					<tr class="template">
 						<td class="checkbox">
 							<input type="checkbox"/>
+							<label></label>
 						</td>
 						<td class="thumbnail">
 							<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Thumbnail"/>
@@ -81,18 +83,18 @@
 					<div class="form-row">
 						<label class="form-label">Safety:</label>
 						<div class="form-input">
+							<input type="radio" id="post-safety-safe" name="safety" value="safe"/>
 							<label for="post-safety-safe">
-								<input type="radio" id="post-safety-safe" name="safety" value="safe"/>
 								Safe
 							</label>
 
+							<input type="radio" id="post-safety-sketchy" name="safety" value="sketchy"/>
 							<label for="post-safety-sketchy">
-								<input type="radio" id="post-safety-sketchy" name="safety" value="sketchy"/>
 								Sketchy
 							</label>
 
+							<input type="radio" id="post-safety-unsafe" name="safety" value="unsafe"/>
 							<label for="post-safety-unsafe">
-								<input type="radio" id="post-safety-unsafe" name="safety" value="unsafe"/>
 								Unsafe
 							</label>
 						</div>
@@ -116,8 +118,8 @@
 						<div class="form-row">
 							<label class="form-label" for="post-anonymous">Anonymity:</label>
 							<div class="form-input">
+								<input type="checkbox" id="post-anonymous" name="anonymous"/>
 								<label for="post-anonymous">
-									<input type="checkbox" id="post-anonymous" name="anonymous"/>
 									Don't show my name in this post
 								</label>
 							</div>