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

Radio buttons also exist!

Browse source
This commit is contained in:
flash 2018-10-27 16:50:46 +02:00
parent a887ad6ed4
commit 46bca5bfca
4 changed files with 35 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/less/classes/input/checkbox.less
View file

@ -3,6 +3,11 @@
margin: 1px 0;
cursor: pointer;
&--radio &__display,
&--radio &__display__icon {
border-radius: 100%;
}
&__input {
display: inline-block;
position: absolute;

31
assets/less/classes/permissions.less
View file

@ -6,13 +6,14 @@
&__line {
display: flex;
font-size: .9em;
line-height: 1.2em;
line-height: 1.7em;
&--header {
font-size: 1.2em;
line-height: 1.4em;
border-bottom: 1px solid var(--accent-colour);
padding-bottom: 1px;
font-weight: 700;
&:not(:first-child) {
margin-top: 4px;
@ -22,7 +23,7 @@
@media (max-width: @site-mobile-width) {
flex-wrap: wrap;
justify-content: right;
border-bottom: 1px solid #ded5e7;
border-bottom: 1px solid var(--accent-colour);
}
}
@ -32,7 +33,7 @@
}
&__line:not(&__line--header) &__title {
border-bottom: 1px solid #ded5e7;
border-bottom: 1px solid var(--accent-colour);
@media (max-width: @site-mobile-width) {
width: 100%;
@ -40,10 +41,6 @@
}
}
&__input {
cursor: pointer;
}
&__choice {
width: 100px;
text-align: center;
@ -55,27 +52,27 @@
}
&--radio {
cursor: pointer;
border-left: 1px solid var(--accent-colour);
justify-content: center;
}
&--yes {
&:hover {
background-color: #0a0;
}
--accent-colour: #0a0;
@media (max-width: @site-mobile-width) {
border-left-width: 0;
}
}
&--no:hover {
background-color: #a00;
&--no {
--accent-colour: #a00;
}
&--never:hover {
background-color: #400;
&--never {
--accent-colour: #400;
}
&__wrapper {
border-left: 1px solid var(--accent-colour);
}
}
}

9
templates/_layout/input.twig
View file

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

32
templates/manage/macros.twig
View file

@ -15,6 +15,8 @@
{% endmacro %}
{% macro permissions_table(permissions) %}
{% from '_layout/input.twig' import input_checkbox %}
<div class="permissions">
{% for perms in permissions %}
<div class="permissions__line permissions__line--header">
@ -37,27 +39,15 @@
<div class="permissions__title">
{{ perm.title }}
</div>
<label class="permissions__choice permissions__choice--radio permissions__choice--yes">
<input {% if perm.value == 'yes' %}checked{% endif %}
class="permissions__input"
type="radio"
name="perms[{{ perms.section }}][{{ perm.section }}]"
value="yes">
</label>
<label class="permissions__choice permissions__choice--radio permissions__choice--no">
<input {% if perm.value == 'no' %}checked{% endif %}
class="permissions__input"
type="radio"
name="perms[{{ perms.section }}][{{ perm.section }}]"
value="no">
</label>
<label class="permissions__choice permissions__choice--radio permissions__choice--never">
<input {% if perm.value == 'never' %}checked{% endif %}
class="permissions__input"
type="radio"
name="perms[{{ perms.section }}][{{ perm.section }}]"
value="never">
</label>
<div class="permissions__choice__wrapper">
{{ input_checkbox('perms[' ~ perms.section ~ '][' ~ perm.section ~ ']', '', perm.value == 'yes', 'permissions__choice permissions__choice--radio permissions__choice--yes', 'yes', true) }}
</div>
<div class="permissions__choice__wrapper">
{{ input_checkbox('perms[' ~ perms.section ~ '][' ~ perm.section ~ ']', '', perm.value == 'no', 'permissions__choice permissions__choice--radio permissions__choice--no', 'no', true) }}
</div>
<div class="permissions__choice__wrapper">
{{ input_checkbox('perms[' ~ perms.section ~ '][' ~ perm.section ~ ']', '', perm.value == 'never', 'permissions__choice permissions__choice--radio permissions__choice--never', 'never', true) }}
</div>
</div>
{% endfor %}
{% endfor %}