From 26e6c5de8f2ca2ff514321d13b88b8452fa440fa Mon Sep 17 00:00:00 2001
From: Djamil Legato <djamil@djamil.it>
Date: Fri, 20 Nov 2015 12:42:41 -0800
Subject: [PATCH] Implemented logic to properly span different text lenghts in
 a toggle to the same amount (fixes #252)

---
 .../templates/forms/fields/toggle/toggle.html.twig  | 13 ++++++++++++-
 themes/grav/templates/pages.html.twig               | 13 +++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/themes/grav/templates/forms/fields/toggle/toggle.html.twig b/themes/grav/templates/forms/fields/toggle/toggle.html.twig
index d6f61662..76f85371 100644
--- a/themes/grav/templates/forms/fields/toggle/toggle.html.twig
+++ b/themes/grav/templates/forms/fields/toggle/toggle.html.twig
@@ -15,11 +15,22 @@
     data-grav-field-name="{{ field.name|fieldName }}"
 {% endblock %}
 
+{% macro spanToggle(input, length) %}
+    {{ repeat('&nbsp;&nbsp;', (length - input|length) / 2) ~ input ~ repeat('&nbsp;&nbsp;', (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>
diff --git a/themes/grav/templates/pages.html.twig b/themes/grav/templates/pages.html.twig
index a0d67369..f0026d56 100644
--- a/themes/grav/templates/pages.html.twig
+++ b/themes/grav/templates/pages.html.twig
@@ -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>