ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Beautified checkboxes and radioboxes

Browse source
This commit is contained in:
Marcin Kurczewski 2014-09-17 10:21:20 +02:00
parent 4fc130e840
commit 4751270228
7 changed files with 53 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
public_html/css/forms.css
View file

@ -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;

10
public_html/js/Presenters/UserBrowsingSettingsPresenter.js
View file

@ -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'),
hideDownvoted: $el.find('[name=hide-downvoted]:visible').prop('checked'),
endlessScroll: $el.find('[name=endless-scroll]').is(':checked'),
hideDownvoted: $el.find('[name=hide-downvoted]').is(':checked'),
listPosts: {
safe: $el.find('[name=listSafePosts]:visible').prop('checked'),
sketchy: $el.find('[name=listSketchyPosts]:visible').prop('checked'),
unsafe: $el.find('[name=listUnsafePosts]:visible').prop('checked'),
safe: $el.find('[name=listSafePosts]').is(':checked'),
sketchy: $el.find('[name=listSketchyPosts]').is(':checked'),
unsafe: $el.find('[name=listUnsafePosts]').is(':checked'),
},
};
browsingSettings.setSettings(newSettings).then(function() {

2
public_html/templates/account-removal.tpl
View file

@ -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>

2
public_html/templates/account-settings.tpl
View file

@ -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>
<% }) %>

10
public_html/templates/browsing-settings.tpl
View file

@ -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>

4
public_html/templates/login-form.tpl
View file

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

10
public_html/templates/post-upload.tpl
View file

@ -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>