#nitratheme

[nitrawiki]

NitraTheme: Как применить иконки для тегов <input>, <select> , <select2> используя twig-шаблон

1. Откройте twig-шаблон страницы, где находится виджет.

2. Добавьте в form_row параметр icon c классом необходимой иконки.

Пример:

{{ form_row(form['staff'], {'icon': 'i_client'}) }}

                Если нужной вам иконки в предложенном наборе нет (соответветственно и нет класса)  или Вы желаете добавить “свою” иконку выполните действия описанные в посте : http://nitrawiki.tumblr.com/post/88955992976/nitratheme

[nitrawiki]

NitraTheme: admingenerator

Добавляем иконки для поля "Действия" таблицы

1. Идем в  в generator.yml страницы, на которой  расположена таблица (например: City-generator.yml).

2. В params:object_actions:name_button добавляем параметр icon в значение которого указываем  название класса иконки + не ленитесь добавлять  описательный текст в параметр label.

Пример:

generator.yml :

params:

   ……………………………………….

   object_actions:

       photo:   

           icon:               i_gallery

           label:              Просмотр фото

             ……………………...       

builders:

   list:

       params:

          object_actions:

               photo:          ~

       Если нужной вам иконки нет (соответветственно и нет класса) в предложенном наборе или Вы желаете добавить "свою" иконку выполните следующие действия:

1.  Подбираем  иконку, скорее  “гуглим”, желательно на прозрачном фоне (.png). Неплохие ресурсы: http://icomoon.io/app/#/select  http://fontello.com/

    Если иконка имеет общее название типа images1 - переименуйте должным образом (название должно отражать суть иконки).

2. Положите иконку в бандл в котором будет использоваться данная иконка по пути src\Nitra\nameyourbundleBundle\Resources\public\images\. (например src\Nitra\UserBundle\Resources\public\images\)

3. В том бандре в который Вы положили иконку ищем less-файл (по пути src\Nitra\nameyourbundleBundle\Resources\public\сss ). Если файл найден желательно проверить подключен ли найденный Вами .less в шаблоне. Для этого  откройте  файл app\Resources\views\base_admin.html.twig и проверьте наличие блока, где соответственно вместо  nameyourbundle должно быть название  бандла, в который Вы положили иконку.

{% stylesheets              

       'bundles/nitraYour/css/name_less_file.less' %}

      <link rel="stylesheet" href="{{ asset_url }}" />

   {% endstylesheets %}

Если  файла не найдено его нужно создать и подключить. Для этого:

3.2.1. Создайте файл name_less_file.less  в src\Nitra\nameyourbundleBundle\Resources\public\сss, где  name_less_file - название бандла (например: user.less).

3.2.1. Подключите созданный файл в app\Resources\views\base_admin.html.twig, добавив   в блок stylesheets  путь к созданному less-файлу:

{% block stylesheets %}

   {{ parent() }}

   {% stylesheets              

       'bundles/nitranameyourbundle/css/name_less_file.less' %}

      <link rel="stylesheet" href="{{ asset_url }}" />

   {% endstylesheets %}

{% endblock %}

4. Откройте less-файл Вашего бандла  и вставьте следующее:

.i_my_class   {  background-image: url("../images/my_icon.png") !important;  background-position: 0.3em 50% !important; background-size: 2.4em 2.4em !important;  }

Затем:

- замените класс i_my_class на подходящий по смыслу вашей иконке( например: i_smile), при этом класс должен обязательно начинаться с  i_.

- замените  название рисунка my_icon на название добавленного вами файла (например: smile).

Все остальные свойства класса оставьте без изменений.

5. Добавьте созданный Вами класс (например: i_my_class) в generator.yml  в блок params:object_actions:name_button: icon.

Готово - проверяйте :)

Как применить иконки для  тегов <input>, <select> , <select2>

1. Идем в  в generator.yml страницы, на которой  расположен тег (например: City-generator.yml).

2. В params:fields:name_input добавляем параметр icon в значение которого указываем  название класса иконки.

Например:

params:

  ………………...

   fields:

     id:

       dbType:        string

     name:

       label:            Имя

       icon:            i_client

                             Если нужно сменить порядок кнопок, отображаемых в таблице в поле “Действия”

1. Откройте  файл  generator.yml страницы, на которой  расположена таблица (например: City-generator.yml).

2.  Смените порядок действий при перечислении в  группе object_actions.

Пример:

builders:                                            builders:        

   list:                                                     list:

       params:                                             params:

           ……………….                                   ……………….

           object_actions:                                  object_actions:                  

               edit:         ~                                        info:         ~               

               info:         ~                                       edit:          ~ 

                    Почему отображаются не все колонки таблицы

Благодаря применению jQuery-плагина для адаптивных таблиц - FooTable  по умолчанию в таблице отображается разное к-во колонок в зависимости от разрешения устройства.

Если ширина  экрана < 480 = максимальное 3 шт.

Если 480< ширина  экрана <1024 = максимальное 5 шт.

Если  1024< ширина  экрана <1280  = максимальное 7 шт.

Если ширина  экрана > 1280  = все.

Если к-во колонок больше указанных максимальных значений, то  “лишние” колонки автоматически скрываются  посредством javascript и в таблице появляется колонка с иконками в виде троеточия.

       Чтобы увидеть скрытые колонки нажмите на строке и увидите подобное рисунку ниже.

Где сменить количество отображаемых  записей в таблице на одной странице

В файле generator.xml  страницы, где находится таблица, смените  значение параметра max_per_page на требуемое.

builders:

   list:

       params:

           max_per_page:       100

[nitrawiki]

NitraTheme: Как добавить "свою" иконку

1.  Подбираем  иконку, скорее  “гуглим”, желательно на прозрачном фоне (.png). Неплохие ресурсы: http://icomoon.io/app/#/select  http://fontello.com/

    Если иконка имеет общее название типа images1 - переименуйте должным образом (название должно отражать суть иконки).

2. Положите иконку в бандл в котором будет использоваться данная иконка по пути src\Nitra\nameyourbundleBundle\Resources\public\images\. (например src\Nitra\UserBundle\Resources\public\images\)

3. В том бандре в который Вы положили иконку ищем less-файл (по пути src\Nitra\nameyourbundleBundle\Resources\public\сss ). Если файл найден желательно проверить подключен ли найденный Вами .less в шаблоне. Для этого  откройте  файл app\Resources\views\base_admin.html.twig и проверьте наличие блока, где соответственно вместо  nameyourbundle должно быть название  бандла, в который Вы положили иконку.

{% stylesheets              

       'bundles/nitraYour/css/name_less_file.less' %}

      <link rel="stylesheet" href="{{ asset_url }}" />

   {% endstylesheets %}

Если  файла не найдено его нужно создать и подключить. Для этого:

3.2.1. Создайте файл name_less_file.less  в src\Nitra\nameyourbundleBundle\Resources\public\сss, где  name_less_file - название бандла (например: user.less).

3.2.1. Подключите созданный файл в app\Resources\views\base_admin.html.twig, добавив   в блок stylesheets  путь к созданному less-файлу:

{% block stylesheets %}

   {{ parent() }}

   {% stylesheets              

       'bundles/nitranameyourbundle/css/name_less_file.less' %}

      <link rel="stylesheet" href="{{ asset_url }}" />

   {% endstylesheets %}

{% endblock %}

4. Откройте less-файл Вашего бандла  и вставьте следующее:

.i_my_class   {  background-image: url("../images/my_icon.png") !important;  background-position: 0.3em 50% !important; background-size: 2.4em 2.4em !important;  }

Затем:

замените класс i_my_class на подходящий по смыслу вашей иконке( например: i_smile), при этом класс должен обязательно начинаться с  i_.

замените  название рисунка my_icon на название добавленного вами файла (например: smile).

Все остальные свойства класса оставьте без изменений.

5. Добавьте созданный Вами класс (например: i_my_class) к нужному тегу или параметру.

Наслаждайтесь:)

Например:

а)  <a class="i_smile">Сохранить</a>

                                                                                      Рис. Пример применения "своей" иконки

b) {{ form_row(form['staff'], {'icon': 'i_client'}) }}

[nitrawiki]

NitraTheme: Оформление Input

                                                                            Рис. Возможные состояния Input

a) фокусное состояние.

b) только для чтения (+ можно скопировать) . Для создания добавте в тег input атрибут disabled.

Например: <input disabled>

с) недоступное для редактирования и копирования  Для создания добавте в тег  input атрибут  readonly.

Например: <input readonly>

d) поле с ошибкой или обязательное к заполнению и не заполненное (invalid).

[nitrawiki]

NitraTheme: Оформление формы доступной только для просмотра

      Для реализации формы с обычным выводом информации необходимо чтобы:

1. данные находились в ячейках таблицы (тег <td>).

2. у <table> был класс admin_show.

Пример:

     <table class=" admin_show" >

           <tr>

               <td>Название</td>

                <td>{{ pos.name }}</td>

          </tr>

           <tr>

                <td>Адресс</td>

                 <td>{{ pos.address }}</td>

           </tr>

       </table>    

                                       Рис. Пример формы вывода информации

[nitrawiki]

NitraTheme: фильтры поверх основного контента

                      Рис. Фильтры расположены поверх основного контента

1. В twig-шаблоне переопределите блок  list_filters и оберните тег <a class="toggle_filter"> и тег <div  class="list_filters">  в div  с классом filters_top.

       {% block list_filters %}

           <div class="filters_top">

               <a class="toggle_filter" "><i></i></a>

               <div class="list_filters">

                   <form action="" method="POST">

                       <legend>Фильтры</legend>

                       <fieldset class="form_block form_fieldset_NONE">

                           {{ form_row(form['distributor']) }}

                          ………………………………...

                       </fieldset>

                       <div class="actions form-actions">

                           ………………………….

                       </div>

                   </form>

               </div>

           </div>

       {% endblock list_filters %}

[nitrawiki]

NitraTheme: Если нужно сделать таблицу адаптивной

Для реализации адаптивной таблицы к тегу < table> добавьте класс  table_responsive.

                          <table class="table table_responsive"></table>

[nitrawiki]

NitraTheme: Если в таблице в поле “Действия” должна быть нестандартная иконка

1. Идем в  в generator.yml страницы, на которой  расположена таблица (например: City-generator.yml).

2. В params:object_actions:name_button добавляем параметр icon в значение которого указываем  название класса иконки + не ленитесь добавлять  описательный текст в параметр label.

Пример:

generator.yml :

params:

   ……………………………………….

   object_actions:

       photo:   

           icon:               i_gallery

           label:              Просмотр фото

             ……………………...       

builders:

   list:

       params:

          object_actions:

               photo:          ~

Готово - проверяйте :)