Implemented logic to properly span different text lenghts in a toggle to the same amount (fixes #252)

This commit is contained in:
Djamil Legato
2015-11-20 12:42:41 -08:00
parent 59fd550136
commit 26e6c5de8f
2 changed files with 23 additions and 3 deletions

View File

@@ -15,11 +15,22 @@
data-grav-field-name="{{ field.name|fieldName }}"
{% endblock %}
{% macro spanToggle(input, length) %}
{{ repeat('  ', (length - input|length) / 2) ~ input ~ repeat('  ', (length - input|length) / 2) }}
{% endmacro %}
{% block input %}
<div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }}">
{% set maxLen = 0 %}
{% for text in field.options %}
{% set translation = grav.twig.twig.filters['tu'] is defined ? text|tu : text|t %}
{% set maxLen = max(translation|length, maxLen) %}
{% endfor %}
{% for key, text in field.options %}
{% set id = "toggle_" ~ field.name ~ key %}
{% set translation = (grav.twig.twig.filters['tu'] is defined ? text|tu : text|t)|trim %}
<input type="radio"
value="{{ key }}"
@@ -36,7 +47,7 @@
{% endif %}
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
/>
<label for="{{ id }}">{% if grav.twig.twig.filters['tu'] is defined %}{{ text|tu }}{% else %}{{ text|t }}{% endif %}</label>
<label for="{{ id }}">{{ _self.spanToggle(translation, maxLen)|trim }}</label>
{% endfor %}
<a></a>
</div>

View File

@@ -1,5 +1,9 @@
{% extends 'partials/base.html.twig' %}
{% macro spanToggle(input, length) %}
{{ repeat('&nbsp;&nbsp;', (length - input|length) / 2) ~ input ~ repeat('&nbsp;&nbsp;', (length - input|length) / 2) }}
{% endmacro %}
{% if admin.route %}
{% set context = admin.page(true) %}
{% endif %}
@@ -224,12 +228,17 @@
{% endif %}
{% if context.blueprints.fields %}
{% set normalText = "PLUGIN_ADMIN.NORMAL"|tu %}
{% set expertText = "PLUGIN_ADMIN.EXPERT"|tu %}
{% set maxLen = max([normalText|length, expertText|length]) %}
{% set normalText = _self.spanToggle(normalText, maxLen) %}
{% set expertText = _self.spanToggle(expertText, maxLen) %}
<form id="admin-mode-toggle">
<div class="switch-toggle switch-grav">
<input type="radio" value="normal" data-leave-url="{{ base_url }}/pages/{{ admin.route|trim('/') }}/mode{{ config.system.param_sep }}normal" id="normal" name="mode-switch" class="highlight" {% if admin.session.expert == '0' %} checked="checked"{% endif %}>
<label for="normal">{{ "PLUGIN_ADMIN.NORMAL"|tu }}</label>
<label for="normal">{{ normalText|trim }}</label>
<input type="radio" value="expert" data-leave-url="{{ base_url }}/pages/{{ admin.route|trim('/') }}/mode{{ config.system.param_sep }}expert" id="expert" name="mode-switch" class="highlight" {% if admin.session.expert == '1' %} checked="checked"{% endif %}>
<label for="expert">{{ "PLUGIN_ADMIN.EXPERT"|tu }}</label>
<label for="expert">{{ expertText|trim }}</label>
<a></a>
</div>
</form>