Как изменить модуль, чтобы он работал с адаптивной панелью администратора¶

Пользователи просили о возможности администрировать магазин на CS-Cart с мобильных устройств. Поэтому мы сделали модуль Адаптивная панель администратора [Beta], который добавили в версию 4.7.3. Если ваш модуль как-то меняет панель администратора, то эта инструкция поможет добавить в него поддержку адаптивности.

Важно

Пока мы добавили адаптивность именно в виде модуля, который не установлен по умолчанию. Так у разработчиков будет время исправить свои модули. Но со временем адаптивность станет частью ядра CS-Cart.

Основные изменения¶

Теперь стили разбиты на отдельные файлы, которые находятся в директории css/tygh. Файл styles.less используется как index-файл и просто импортирует less-файлы в себя. В директории css/tygh также есть под-директории со стилями:
- icons/ — стили, отвечающие за описание иконок и пиктограмм;
- modals/ — стили, связанные с pop-up и modal-окнами;
- navbars/ — стили навигационного и мобильного меню панели администратора;
- pages/ — специальные стили для определённых страниц панели администратора;
- responsive/ — стили с медиа-запросами;
  
  Примечание
  
  Мы планируем отказываться от вынесения медиа-запросов в отдельный файл. Поэтому в будущем стили из responsive/ будут вынесены в соответствующие файлы.
- ui_base/ — стили базовых компонентов интерфейса (т.н. изолированные компоненты);
- utils/ — утилитарные стили и стили комплексных компонентов интерфейса.
Добавлен конфигурационный файл config.less (находится рядом со styles.less). Мы постепенно переносим LESS-переменные в config.less и создаём там новые. В конфигурационном файле можно узнать, какие используются переменные.
Функция для проверки ширины экрана в JS. В версии 4.7.3 появилась глобальная функция matchScreenSize().

Какие элементы затронуты?¶

Таблицы. Именно в правке таблиц заключается большая часть адаптации модуля к новой панели администратора.
Заголовки. Теперь первая часть названия страницы или всплывающего окна будет скрываться на мобильных устройствах.
Боковая панель (sidebar). На мобильных устройствах боковая панель по умолчанию скрыта и открывается сбоку при необходимости. Если там была необычная верстка, её придется адаптировать.
Мобильное меню. Меню тоже адаптируется; с ним делать ничего не нужно, обратная совместимость сохранена.

Как проходит адаптация?¶

Заголовки обычных страниц¶

Например, у нас есть страница редактирования товара. Её заголовок: “Editing product: My Product” (на русском языке это будет “Редактирование товара: Мой товар”).

В мобильной верстке заголовок должен выглядеть так: “My Product”. То есть отбрасывается первая часть названия, обозначающая действие, которое мы выполняем на странице. Чтобы внедрить адаптивность заголовков:

Находим в шаблоне заголовок обычной страницы. Он задается при подключении mainbox.tpl:
```
{include file="common/mainbox.tpl"  title=$title ... }
```
Вы можете оставить $title (название страницы) для обратной совместимости, но следует добавить две новые переменные для нужного поведения. А именно:
```
{include file="common/mainbox.tpl"
   title_start=$title_start
   title_end=$title_end ... }
```
Следовательно, логика такая:
```
$title_start = "Edit product"
$title_end = "My Product"
```

Заголовки pop-up окон¶

Действия точно такие же, как и для обычных страниц. Единственное отличие заключается в том, что pop-up-окно подключается в:

{include file="common/popupbox.tpl" ... }

Таблицы¶

Допустим, до адаптации у нас есть такая таблица:

<table width="100%" class="table table-middle">
   <thead>
       <tr>
           <th>Column1</th>
           <th>Column2</th>
       </tr>
   </thead>
   <!-- body below -->
   <tr>
       <td>Content1</td>
       <td>Content2</td>
   </tr>
</table>

Сделаем её адаптивной. Для этого:

Оборачиваем таблицу в обёртку, которая добавляет нужное поведение:
```
<div class="table-responsive-wrapper">
  <table>  </table>
</div>
```

Тегу <table> добавляем класс table-responsive:

<div class="table-responsive-wrapper">
  <table class="... table-responsive">
    <!-- Table Content -->
  </table>
</div>

Ячейкам таблицы присваиваем data-атрибут, обозначающий их заголовок (data-th):
```
<td data-th="Column title">...</td>
```

В итоге получаем таблицу, которая умеет адаптироваться:

<div class="table-responsive-wrapper">
   <table width="100%" class="table table-middle table-responsive">
       <thead>
           <tr>
               <th>Column1 (will hide on mobile devices)</th>
               <th>Column2</th>
               <th>Column3</th>
           </tr>
       </thead>
       <!-- body below -->
       <tr>
           <td class="nowrap left mobile-hide">Content1</td>
           <td class="nowrap" data-th="Column2">Content2</td>
           <td class="nowrap right" data-th="Column3">Content3</td>
       </tr>
   </table>
</div>

Новая функция в core.js¶

В CS-Cart 4.7.3 в core.js появилась функция $.matchScreenSize для проверки текущей ширины экрана в JS. Используется она вот так:

if ($.matchScreenSize(['xs', 'xs-large'])) { ... }

В данном примере вернется true, если у тега <body> имеется класс 'screen--xs' или 'screen--xs-large'.

Список возможных селекторов:

'screen--xs':       [0, 350],
'screen--xs-large': [350, 480],
'screen--sm':       [481, 768],
'screen--sm-large': [768, 1024],
'screen--md':       [1024, 1280],
'screen--md-large': [1280, 1440],
'screen--lg':       [1440, 1920],
'screen--uhd':      [1920, 9999]