Switched to Bootstrap syntax for login form and added docs about exte…

…nding Twig extensions service.
roadiz · Jul 3, 2016 · 33b1b36 · 33b1b36
1 parent caf6a3a
commit 33b1b36
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/developer/themes/theme_firewall.rst b/developer/themes/theme_firewall.rst
@@ -159,18 +159,22 @@ And do not forget to set your form *action* to ``{{ path('themeLoginCheck') }}``
 .. code-block:: html+jinja
 
     {% if error %}
-        <div data-uk-alert class="uk-alert uk-alert-danger">{{ error.message|trans }}</div>
+        <div class="alert alert-danger"><i class="fa fa-warning"></i> {{ error.message|trans }}</div>
     {% endif %}
-    <form id="login-form" class="uk-form uk-form-stacked {% if error %}uk-animation-shake{% endif %}" action="{{ path('themeLoginCheck') }}" method="post">
-        <div class="uk-form-row">
-            <label class="uk-form-label" for="_username">{% trans %}username{% endtrans %}</label>
-            <input type="text" name="_username" id="_username" placeholder="{% trans %}username{% endtrans %}" value="" />
+    <form id="login-form" class="form" action="{{ path('themeLoginCheck') }}" method="post">
+        <div class="form-group">
+            <label class="control-label" for="_username">{% trans %}username{% endtrans %}</label>
+            <input class="form-control" type="text" name="_username" id="_username" placeholder="{% trans %}username{% endtrans %}" value="" />
         </div>
-        <div class="uk-form-row">
-            <label class="uk-form-label" for="_password">{% trans %}password{% endtrans %}</label>
-            <input type="password" name="_password" id="_password" placeholder="{% trans %}password{% endtrans %}" value="" />
+        <div class="form-group">
+            <label class="control-label" for="_password">{% trans %}password{% endtrans %}</label>
+            <input class="form-control" type="password" name="_password" id="_password" placeholder="{% trans %}password{% endtrans %}" value="" />
         </div>
-        <div class="uk-form-row">
-        <button class="uk-button" type="submit"><i class="uk-icon-sign-in"></i> {% trans %}login{% endtrans %}</button>
+        <div class="form-group">
+            <label class="control-label" for="_remember_me">{% trans %}keep_me_logged_in{% endtrans %}</label>
+            <input class="form-control" type="checkbox" name="_remember_me" id="_remember_me" value="1" />
+        </div>
+        <div class="form-group">
+            <button class="btn btn-primary" type="submit"><i class="fa fa-signin"></i> {% trans %}login{% endtrans %}</button>
         </div>
     </form>
diff --git a/developer/themes/using_twig.rst b/developer/themes/using_twig.rst
@@ -66,10 +66,9 @@ You can of course call objects members within Twig using the *dot* separator.
         {% set images = nodeSource.images %}
 
         {% for image in images %}
-
             {% set imageMetas = image.documentTranslations.first %}
             <figure>
-                {{ image|display({ 'width':200 }) }}
+                {{ image|display({'width':200 }) }}
                 <figcaption>{{ imageMetas.name }} — {{ imageMetas.copyright }}</figcaption>
             </figure>
         {% endfor %}
@@ -97,9 +96,7 @@ in your PHP Controller before, you can directly use them in Twig:
 .. code-block:: html+jinja
 
     {% set images = nodeSource.images %}
-
     {% for image in images %}
-
         {% set imageMetas = image.documentTranslations.first %}
         <figure>
             {{ image|display({ 'width':200 }) }}
@@ -137,8 +134,7 @@ This filter is a shortcut for ``childBlock->getHandler()->getChildren(null, null
     ) %}
 
 .. note::
-    Calling ``getChildren()`` from a node-source *handler* or ``|children`` filter will **always** return ``NodesSources`` objects from
-    the same translation as their parent.
+    Calling ``getChildren()`` from a node-source *handler* or ``|children`` filter will **always** return ``NodesSources`` objects from the same translation as their parent.
 
 
 Add previous and next links
@@ -324,3 +320,23 @@ And… Voilà! You can use ``red``, ``green`` and ``blue`` filters in your Twig
         background-color: rgba({{ project.color|red }}, {{ project.color|green }}, {{ project.color|blue }}, 0.5);
     }
     {% endfor %}
+
+Use custom Twig extensions
+--------------------------
+
+Just like you did to add your own *Twig* filters, you can add your own *Twig* extensions.
+Instead of extending ``twig.filters`` service, just extend ``twig.extensions`` service.
+
+.. code-block:: php
+
+    // In your SuperThemeApp.php
+    public static function setupDependencyInjection(\Pimple\Container $container)
+    {
+        parent::setupDependencyInjection($container);
+
+        // We extend twig extensions
+        $container->extend('twig.extensions', function ($extensions, $c) {
+            $extensions->add(new MySuperThemeTwigExtension());
+            return $extensions;
+        });
+    }