Merge pull request #2726 from Guite/1.4

use grid classes for smaller viewport

src/lib/Zikula/Bundle/FormExtensionBundle/Resources/views/Form/bootstrap_3_zikula_admin_layout.html.twig

@@ -1,11 +1,11 @@
 {% extends "bootstrap_3_horizontal_layout.html.twig" %}
 
 {% block form_label_class -%}
-col-lg-3
+col-sm-3
 {%- endblock form_label_class %}
 
 {% block form_group_class -%}
-col-lg-9
+col-sm-9
 {%- endblock form_group_class %}
 
 {% block checkbox_widget -%}
@@ -32,8 +32,8 @@ col-lg-9
 {% block submit_row -%}
 {% spaceless %}
     <div class="form-group">
-        <div class="col-lg-offset-3 col-lg-9 {{ block('form_label_class') }}"></div>
-        <div class="col-lg-offset-3 {{ block('form_group_class') }}">
+        <div class="col-sm-offset-3 col-sm-9 {{ block('form_label_class') }}"></div>
+        <div class="col-sm-offset-3 {{ block('form_group_class') }}">
             {{ form_widget(form) }}
         </div>
     </div>

src/plugins/Imagine/templates/configuration.tpl

@@ -13,38 +13,38 @@
             <legend>{gt text='General settings'}</legend>
 
             <div class="form-group">
-                <label class="col-lg-3 control-label" for="thumb_dir">{gt text='Thumbnails storage directory'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="thumb_dir">{gt text='Thumbnails storage directory'}</label>
+                <div class="col-sm-9">
                     <input type="text" id="thumb_dir" class="form-control" name="thumb_dir" value="{$vars.thumb_dir|safetext}" />
                     <p class="help-block sub">{gt text='This should be directory inside Zikula temp dir.'}</p>
                     <p class="help-block sub">{gt text='Current storage full path is:'}<br />{$thumb_full_dir|safetext}</p>
                 </div>
             </div>
 
             <div class="form-group">
-                <label class="col-lg-3 control-label" for="thumb_auto_cleanup">{gt text='Cleanup automatically'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="thumb_auto_cleanup">{gt text='Cleanup automatically'}</label>
+                <div class="col-sm-9">
                     <input type="checkbox" id="thumb_auto_cleanup" name="thumb_auto_cleanup"  value="1" {if $vars.thumb_auto_cleanup} checked="checked"{/if} />
                     <p class="help-block sub">{gt text='When checked, thumbnail cleanup routine is automatically invoked with the specified period below and unnecessary thumbnails are removed.'}</p>
                 </div>
             </div>
 
             <div class="form-group" id="imagine_thumb_auto_cleanup_period">
-                <label class="col-lg-3 control-label" for="thumb_auto_cleanup_period">{gt text='Automatic cleanup period'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="thumb_auto_cleanup_period">{gt text='Automatic cleanup period'}</label>
+                <div class="col-sm-9">
                     <input type="text" id="thumb_auto_cleanup_period" class="form-control" name="thumb_auto_cleanup_period" size="8" value="{$vars.thumb_auto_cleanup_period|safetext}" />
                     <p class="help-block sub">{gt text='This gives the period used for automatic cleanup of thumbnails. It is based on PHP DateInterval, so e.g. P1D is 1 day and P1W is 1 week.'}</p>
                 </div>
             </div>
 
             <div class="form-group">  
-                <div class="col-lg-offset-3 col-lg-9">
+                <div class="col-sm-offset-3 col-sm-9">
                     <a class="z-action-icon smallicon smallicon-regenerate" href="{modurl modname='ZikulaExtensionsModule' type='adminplugin' func='dispatch' _plugin='Imagine' _action='cleanup'}" title="{gt text='Clear thumbnails'}">{gt text='Cleanup thumbnails now (only when source image is removed)'}</a>
                 </div>
             </div>
 
             <div class="form-group">
-                <div class="col-lg-offset-3 col-lg-9">
+                <div class="col-sm-offset-3 col-sm-9">
                     <a class="z-action-icon smallicon smallicon-regenerate" href="{modurl modname='ZikulaExtensionsModule' type='adminplugin' func='dispatch' _plugin='Imagine' _action='cleanup' force=true}" title="{gt text='Remove all thumbnails'}">{gt text='Remove all thumbnails now (of all images)'}</a>
                 </div>
             </div>
@@ -58,16 +58,16 @@
             <legend>{$preset->getName()}</legend>
 
             <div class="form-group preset-name">
-                <label class="col-lg-3 control-label" for="presets-{$index}-name">{gt text='Preset name'} <span class="z-form-mandatory-flag">*</span></label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-name">{gt text='Preset name'} <span class="z-form-mandatory-flag">*</span></label>
+                <div class="col-sm-9">
                     <input type="text" id="presets-{$index}-name" class="form-control" name="presets[{$index}][name]" value="{$preset->getName()|safetext}" {if $preset->getName() == 'default'}readonly="readonly" class="z-form-readonly"{/if}/>
                     <p class="help-block sub">{gt text='Preset name can contain letters, numbers, underscores, periods, or dashes.'}</p>
                 </div>
             </div>
 
             <div class="form-group preset-width">
-                <label class="col-lg-3 control-label" for="presets-{$index}-width">{gt text='Width'}<span class="z-form-mandatory-flag">*</span></label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-width">{gt text='Width'}<span class="z-form-mandatory-flag">*</span></label>
+                <div class="col-sm-9">
                     <div class="input-group">
                         <input type="text" id="presets-{$index}-width" class="form-control" name="presets[{$index}][width]" size="4" value="{$preset.width|safetext}" />
                         <span class="input-group-addon">{gt text='pixels'}</span>
@@ -77,8 +77,8 @@
             </div>
 
             <div class="form-group preset-height">
-                <label class="col-lg-3 control-label" for="presets-{$index}-height">{gt text='Height'} <span class="z-form-mandatory-flag">*</span></label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-height">{gt text='Height'} <span class="z-form-mandatory-flag">*</span></label>
+                <div class="col-sm-9">
                     <div class="input-group">
                         <input type="text" id="presets-{$index}-height" class="form-control" name="presets[{$index}][height]" size="4" value="{$preset.height|safetext}" />
                         <span class="input-group-addon">{gt text='pixels'}</span>
@@ -88,8 +88,8 @@
             </div>
 
             <div class="form-group preset-mode">
-                <label class="col-lg-3 control-label" for="presets-{$index}-mode">{gt text='Mode'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-mode">{gt text='Mode'}</label>
+                <div class="col-sm-9">
                     <select id="presets-{$index}-mode" class="form-control" name="presets[{$index}][mode]">
                     {foreach item='option' from=$options.mode}
                         {assign var='opt' value=$option|safetext}
@@ -105,8 +105,8 @@
             </div>
 
             <div class="form-group preset-extension">
-                <label class="col-lg-3 control-label" for="presets-{$index}-extension">{gt text='Extension'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-extension">{gt text='Extension'}</label>
+                <div class="col-sm-9">
                     <select id="presets-{$index}-extension" class="form-control" name="presets[{$index}][extension]">
                         <option value="" label="{gt text='Same as source image'}" {if !$preset.extension}selected="selected"{/if}>{gt text='Same as source image'}</option>
                         {foreach item='option' from=$options.extension}
@@ -119,24 +119,24 @@
             </div>
 
             <div class="form-group preset-jpeg_quality">
-                <label class="col-lg-3 control-label" for="presets-{$index}-jpeg_quality">{gt text='JPEG Quality'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-jpeg_quality">{gt text='JPEG Quality'}</label>
+                <div class="col-sm-9">
                     <input type="text" id="presets-{$index}-jpeg_quality" class="form-control" name="presets[{$index}][options][jpeg_quality]" size="4" value="{$preset.options.jpeg_quality|safetext}" /> %
                 </div>
                 <p class="help-block sub">{gt text='JPEG Quality for sized images is specified from 0-100%, where 100% is best quality.'}</p>
             </div>
 
             <div class="form-group preset-png_compression_level">
-                <label class="col-lg-3 control-label" for="presets-{$index}-png_compression_level">{gt text='PNG Compression level'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-png_compression_level">{gt text='PNG Compression level'}</label>
+                <div class="col-sm-9">
                     <input type="text" id="presets-{$index}-png_compression_level" class="form-control" name="presets[{$index}][options][png_compression_level]" size="4" value="{$preset.options.png_compression_level|safetext}" />
                 </div>
                 <p class="help-block sub">{gt text='PNG Compression level for sized images is specified from 0-9, where 0 is no compression.'}</p>
             </div>
 
             <div class="form-group preset-module">
-                <label class="col-lg-3 control-label" for="presets-{$index}-module">{gt text='Module'}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label" for="presets-{$index}-module">{gt text='Module'}</label>
+                <div class="col-sm-9">
                     <select id="presets-{$index}-module" class="form-control" name="presets[{$index}][__module]" >
                     <option value="" label="" >&nbsp;</option>
                     {html_select_modules selected=$preset.__module}
@@ -146,22 +146,22 @@
             </div>
 
             <div class="form-group">
-                <div class="col-lg-offset-3 col-lg-9">
+                <div class="col-sm-offset-3 col-sm-9">
                     <a class="copy-preset btn btn-default btn-sm" href="#" title="{gt text='Copy'}"><span class="fa fa-file"></span> {gt text='Copy'}</a>
                     <a class="delete-preset btn btn-default btn-sm{if $preset->getName() == 'default'} hide{/if}" href="#" title="{gt text='Delete'}"><span class="fa fa-trash-o"></span> {gt text='Delete'}</a>
                 </div>
             </div>
         </fieldset>
         {/foreach}
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 <a class="add-preset btn btn-default btn-sm" href="#" title="{gt text='Add new preset'}"><span class="fa fa-plus"></span> {gt text='Add new preset'}</a>
             </div>
         </div>
 
 
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 <button class="btn btn-success" alt='{gt text='Save'}' title='{gt text='Save'}'>
                     {gt text='Save'}
                 </button>

src/system/BlocksModule/Resources/views/Admin/config.html.twig

@@ -14,7 +14,7 @@
         {{ form_errors(form) }}
         {{ form_row(form.collapseable) }}
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 {{ form_widget(form.save, {attr: {class: 'btn btn-success'}, icon:'fa-check'}) }}
                 {{ form_widget(form.cancel, {attr: {class: 'btn btn-default'}, icon:'fa-times'}) }}
             </div>

src/system/BlocksModule/Resources/views/Admin/delete.html.twig

@@ -14,7 +14,7 @@
         {{ form_start(form) }}
         {{ form_errors(form) }}
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 {{ form_widget(form.delete, {attr: {class: 'btn btn-success'}, icon:'fa-trash-o'}) }}
                 {{ form_widget(form.cancel, {attr: {class: 'btn btn-default'}, icon:'fa-times'}) }}
             </div>

src/system/BlocksModule/Resources/views/Admin/edit.html.twig

@@ -16,8 +16,8 @@
         <fieldset>
             <legend>{{ __('Meta') }}</legend>
             <div class="form-group">
-                <label class="col-lg-3 control-label">{{ __('Block Type') }}</label>
-                <div class="col-lg-9">
+                <label class="col-sm-3 control-label">{{ __('Block Type') }}</label>
+                <div class="col-sm-9">
                     <p class="form-control-static label label-info" style="font-size: 130%">{{ moduleName }}/{{ form.vars.value.blocktype }}</p>
                 </div>
             </div>
@@ -36,7 +36,7 @@
             <script>var filterCount = '{{ form.filters|length }}';</script>
             <div class="form-group">
                 {{ form_label(form.filters) }}
-                <div class="col-lg-9">
+                <div class="col-sm-9">
                     <ul id="filters" data-prototype="&lt;li class=&quot;form-inline&quot;&gt;{{ form_widget(form.filters.vars.prototype.attribute, { 'attr': {'class': 'attribute-selector'} })|e }} {{ form_widget(form.filters.vars.prototype.queryParameter, { 'attr': {'disabled': true, 'class': 'queryParameter'} })|e }} {{ form_widget(form.filters.vars.prototype.comparator)|e }} {{ form_widget(form.filters.vars.prototype.value)|e }}&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;delete-filter fa fa-trash fa-lg text-danger&quot;&gt;&lt;/a&gt;&lt;/li&gt;">
                         {% for filter in form.filters %}
                         {% form_theme form _self %}
@@ -56,7 +56,7 @@
         {#{/if}#}
         {#{{ notifyDisplayHooks('pages.ui_hooks.pages.form_edit', form.vars.value.pageid|default(null)) }}#}
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 {{ form_widget(form.save, {attr: {class: 'btn btn-success'}, icon:'fa-check'}) }}
                 {{ form_widget(form.cancel, {attr: {class: 'btn btn-default'}, icon:'fa-times'}) }}
             </div>

src/system/BlocksModule/Resources/views/Admin/new.html.twig

@@ -19,7 +19,7 @@
             {{ form_row(form.bkey) }}
         </fieldset>
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 {{ form_widget(form.choose, {attr: {class: 'btn btn-success'}, icon:'fa-check'}) }}
             </div>
         </div>

src/system/BlocksModule/Resources/views/Position/delete.html.twig

@@ -14,7 +14,7 @@
         {{ form_start(form) }}
         {{ form_errors(form) }}
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 {{ form_widget(form.delete, {attr: {class: 'btn btn-success'}, icon:'fa-trash-o'}) }}
                 {{ form_widget(form.cancel, {attr: {class: 'btn btn-default'}, icon:'fa-times'}) }}
             </div>

src/system/BlocksModule/Resources/views/Position/edit.html.twig

@@ -25,7 +25,7 @@
             <em class="help-block sub">{{  __('Characters allowed: a-z, A-Z, 0-9, dash (-) and underscore (_).') }}</em>
         {{ form_row(form.description) }}
         <div class="form-group">
-            <div class="col-lg-offset-3 col-lg-9">
+            <div class="col-sm-offset-3 col-sm-9">
                 {{ form_widget(form.save, {attr: {class: 'btn btn-success'}, icon:'fa-check'}) }}
                 {{ form_widget(form.cancel, {attr: {class: 'btn btn-default'}, icon:'fa-times'}) }}
             </div>

src/themes/BootstrapTheme/Resources/views/Body/2col.html.twig

@@ -1,10 +1,10 @@
 <div class="container">
     <div class="row">    
-    <div id="theme_leftcol" class="col-lg-3">
-        {{ showblockposition('left') }}
-    </div>
-    <div id="theme_maincontent" class="col-lg-9">
-        {{ maincontent|raw }}
-    </div>
+        <div id="theme_leftcol" class="col-sm-3">
+            {{ showblockposition('left') }}
+        </div>
+        <div id="theme_maincontent" class="col-sm-9">
+            {{ maincontent|raw }}
+        </div>
     </div>
 </div>

src/themes/BootstrapTheme/Resources/views/Body/2col_w_centerblock.html.twig

@@ -1,11 +1,11 @@
 <div class="container">
     <div class="row">
-    <div id="theme_leftcol" class="col-lg-3">
-        {{ showblockposition('left') }}
-    </div>
-    <div id="theme_maincontent" class="col-lg-9">
-        {{ showblockposition('center') }}
-        {{ maincontent|raw }}
-    </div>
+        <div id="theme_leftcol" class="col-sm-3">
+            {{ showblockposition('left') }}
+        </div>
+        <div id="theme_maincontent" class="col-sm-9">
+            {{ showblockposition('center') }}
+            {{ maincontent|raw }}
+        </div>
     </div>
 </div>

src/themes/BootstrapTheme/Resources/views/Body/3col.html.twig

@@ -1,13 +1,13 @@
 <div class="container">
     <!-- Example row of columns -->
     <div class="row">
-        <div class="col-lg-4">
+        <div class="col-sm-4">
             {{ showblockposition('left') }}
         </div>
-        <div class="col-lg-4">
+        <div class="col-sm-4">
             {{ maincontent|raw }}
         </div>
-        <div class="col-lg-4">
+        <div class="col-sm-4">
             {{ showblockposition('right') }}
         </div>
     </div>

src/themes/BootstrapTheme/Resources/views/Body/3col_w_centerblock.html.twig

@@ -8,13 +8,13 @@
 <div class="container">
     <!-- Example row of columns -->
     <div class="row">
-        <div class="col-lg-4">
+        <div class="col-sm-4">
             {{ showblockposition('left') }}
         </div>
-        <div class="col-lg-4">
+        <div class="col-sm-4">
             {{ maincontent|raw }}
         </div>
-        <div class="col-lg-4">
+        <div class="col-sm-4">
             {{ showblockposition('right') }}
         </div>
     </div>

tools/bootstrapify.php

@@ -126,7 +126,7 @@ function cb($matches)
      */  
     function formCallback1($matches)
     {
-        return '<div class="form-group">'.$matches[1].'<label class="col-lg-3 control-label"'.$matches[2].'</label>'.$matches[1].'<div class="col-lg-9">';
+        return '<div class="form-group">'.$matches[1].'<label class="col-sm-3 control-label"'.$matches[2].'</label>'.$matches[1].'<div class="col-sm-9">';
 
     }
 
@@ -199,7 +199,7 @@ function formCallback6($matches)
         $content = str_replace('<a', '    <a class="btn btn-default"', $content);
         $content = str_replace('{button', '    {button', $content);   
 
-        return '<div class="form-group">'."\n".'            <div class="col-lg-offset-3 col-lg-9">'.$content.'    </div>'."\n".'        </div>';
+        return '<div class="form-group">'."\n".'            <div class="col-sm-offset-3 col-sm-9">'.$content.'    </div>'."\n".'        </div>';
     }
 }