flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restyled checkboxes.

Browse source
This commit is contained in:
flash 2018-10-27 16:29:13 +02:00
parent 9e105de5cd
commit a887ad6ed4
12 changed files with 91 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/less/classes/comment.less
View file

@ -58,10 +58,6 @@
text-decoration: underline;
}
&--label {
cursor: pointer;
}
&--post {
margin-left: auto;
}

50
assets/less/classes/input/checkbox.less Normal file
View file

@ -0,0 +1,50 @@
.input__checkbox {
display: inline-flex;
margin: 1px 0;
cursor: pointer;
&__input {
display: inline-block;
position: absolute;
z-index: -1000;
}
&__display {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #222;
background: #222;
color: #fff;
border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&__icon {
background-color: var(--accent-colour);
background-size: 28px 28px;
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
box-shadow: 0 0 2px #111;
border-radius: 2px;
margin: 2px;
width: 14px;
height: 14px;
opacity: 0;
transition: opacity .2s;
}
}
&__input:checked ~ &__display &__display__icon {
opacity: 1;
}
&:hover &__display,
&__input:focus ~ &__display {
border-color: var(--accent-colour);
}
&__text {
display: inline-block;
margin-left: 4px;
}
}

1
assets/less/main.less
View file

@ -74,6 +74,7 @@ body {
@import "classes/input/text";
@import "classes/input/textarea";
@import "classes/input/upload";
@import "classes/input/checkbox";
// Base styles
@import "classes/avatar";

12
templates/_layout/comments.twig
View file

@ -1,7 +1,7 @@
{% macro comments_input(category, user, perms, reply_to) %}
{% set reply_mode = reply_to is not null %}
{% from '_layout/input.twig' import input_hidden, input_csrf %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_checkbox %}
<form class="comment comment--input{% if reply_mode %} comment--reply{% endif %}"
method="post" action="/comments.php?m=create"
@ -28,16 +28,10 @@
<div class="comment__actions">
{% if not reply_mode %}
{% if perms.can_pin %}
<label class="comment__action comment__action--label">
<input type="checkbox" class="comment__action__checkbox" name="comment[pin]">
Pin this comment
</label>
{{ input_checkbox('comment[pin]', 'Pin this comment', false, 'comment__action') }}
{% endif %}
{% if perms.can_lock %}
<label class="comment__action comment__action--label">
<input type="checkbox" class="comment__action__checkbox" name="comment[lock]">
Toggle locked status
</label>
{{ input_checkbox('comment[lock]', 'Toggle locked status', false, 'comment__action') }}
{% endif %}
{% endif %}
<button class="input__button comment__action comment__action--button comment__action--post">

18
templates/_layout/input.twig
View file

@ -22,3 +22,21 @@
{% endfor %}>
{% endspaceless %}
{% endmacro %}
{% macro input_checkbox(name, text, value, class) %}
{% spaceless %}
<label class="input__checkbox{{ class|length > 0 ? ' ' ~ class : '' }}">
<input type="checkbox" class="input__checkbox__input"
{% if name|length > 0 %}name="{{ name }}"{% endif %}
{% if value %}checked{% endif %}>
<div class="input__checkbox__display">
<div class="input__checkbox__display__icon"></div>
</div>
{% if text|length > 0 %}
<div class="input__checkbox__text">
{{ text }}
</div>
{% endif %}
</label>
{% endspaceless %}
{% endmacro %}

4
templates/manage/changelog/action_edit.twig
View file

@ -1,6 +1,6 @@
{% extends 'manage/changelog/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_csrf, input_text %}
{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
{% block manage_content %}
<div class="container">
@ -28,7 +28,7 @@
<label class="form__label">
<div class="form__label__text">Inherit Colour</div>
<div class="form__label__input">
<input class="input" type="checkbox" name="action[colour][inherit]"{% if edit_action is defined and edit_action.action_colour|colour_get_inherit %} checked{% endif %}>
{{ input_checkbox('action[colour][inherit]', '', edit_action is defined and edit_action.action_colour|colour_get_inherit) }}
</div>
</label>

4
templates/manage/changelog/tag_edit.twig
View file

@ -1,6 +1,6 @@
{% extends 'manage/changelog/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_csrf, input_text %}
{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
{% block manage_content %}
<div class="container">
@ -26,7 +26,7 @@
<label class="form__label">
<div class="form__label__text">Archived</div>
<div class="form__label__input">
<input class="input" type="checkbox" name="tag[archived]"{% if edit_tag is defined and edit_tag.tag_archived is not null %} checked{% endif %}>
{{ input_checkbox('tag[archived]', '', edit_tag is defined and edit_tag.tag_archived is not null) }}
</div>
</label>

4
templates/manage/news/category.twig
View file

@ -1,6 +1,6 @@
{% extends 'manage/news/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
{% set is_new = category|length < 1 %}
@ -24,7 +24,7 @@
<tr>
<td>Is Hidden</td>
<td><input type="checkbox" name="category[hidden]" {% if category.category_is_hidden|default(false) %}checked{% endif %}></td>
<td>{{ input_checkbox('category[hidden]', '', category.category_is_hidden|default(false)) }}</td>
</tr>
</table>

4
templates/manage/news/post.twig
View file

@ -1,6 +1,6 @@
{% extends 'manage/news/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
{% set is_new = post|length < 1 %}
@ -30,7 +30,7 @@
<tr>
<td>Is Featured</td>
<td><input type="checkbox" name="post[featured]" {% if post.post_is_featured|default(false) %}checked{% endif %}></td>
<td>{{ input_checkbox('post[featured]', '', post.post_is_featured|default(false)) }}</td>
</tr>
<tr>

6
templates/manage/users/roles_create.twig
View file

@ -1,7 +1,7 @@
{% extends 'manage/users/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from 'manage/macros.twig' import permissions_table %}
{% from '_layout/input.twig' import input_csrf, input_text %}
{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
{% block manage_content %}
<form action="?v=role{{ edit_role is defined ? '&r=' ~ edit_role.role_id : '' }}" method="post"{% if edit_role is defined %} style="{{ edit_role.role_colour|html_colour('--accent-colour') }}"{% endif %}>
@ -20,7 +20,7 @@
<label class="form__label">
<div class="form__label__text">Hide Rank</div>
<div class="form__label__input">
<input class="input" type="checkbox" name="role[secret]"{% if edit_role is defined and edit_role.role_secret %} checked{% endif %}>
{{ input_checkbox('role[secret]', '', edit_role is defined and edit_role.role_secret) }}
</div>
</label>
@ -46,7 +46,7 @@
<label class="form__label">
<div class="form__label__text">Inherit Colour</div>
<div class="form__label__input">
<input class="input" type="checkbox" name="role[colour][inherit]"{% if edit_role is defined and edit_role.role_colour|colour_get_inherit %} checked{% endif %}>
{{ input_checkbox('role[colour][inherit]', '', edit_role is defined and edit_role.role_colour|colour_get_inherit) }}
</div>
</label>

6
templates/manage/users/view.twig
View file

@ -1,7 +1,7 @@
{% extends 'manage/users/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from 'manage/macros.twig' import permissions_table %}
{% from '_layout/input.twig' import input_csrf, input_text %}
{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
{% set site_link = '/profile.php?u=' ~ view_user.user_id %}
@ -83,7 +83,7 @@
<label class="form__label">
<div class="form__label__text">Delete Avatar</div>
<div class="form__label__input">
<input class="input" type="checkbox" name="avatar[delete]">
{{ input_checkbox('avatar[delete]') }}
</div>
</label>
</div>
@ -114,7 +114,7 @@
<label class="form__label">
<div class="form__label__text">Custom Colour</div>
<div class="form__label__input">
<input class="input" type="checkbox" name="colour[enable]"{% if colour_is_defined %} checked{% endif %}>
{{ input_checkbox('colour[enable]', '', colour_is_defined) }}
</div>
</label>

19
templates/user/profile.twig
View file

@ -1,6 +1,6 @@
{% extends 'user/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
{% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
{% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
@ -134,20 +134,9 @@
{% endfor %}
</select>
<label>
<input type="checkbox" name="background[delete]">
Delete
</label>
<label>
<input type="checkbox" name="background[attr][blend]"{% if profile.user_background_blend %} checked{% endif %}>
Blend
</label>
<label>
<input type="checkbox" name="background[attr][slide]"{% if profile.user_background_slide %} checked{% endif %}>
Slide
</label>
{{ input_checkbox('background[delete]', 'Delete') }}
{{ input_checkbox('background[attr][blend]', 'Blend', profile.user_background_blend) }}
{{ input_checkbox('background[attr][slide]', 'Slide', profile.user_background_slide) }}
</div>
</div>
{% endif %}