Преобразование таблиц #Wordpress для мобильника
Wordpress - Сайт: Преобразование таблиц для мобильника 00:01 Введение и проблема • Обсуждение проблемы преобразования таблицы в мобильный вид на сайте WordPress. • Проблема: заголовки таблицы исчезают при переходе в мобильный вид, требуется перемещение контента для просмотра таблицы. • Поиск альтернатив и изучение плагинов. 01:00 Обзор плагинов • Обзор плагинов: TablePress, MakeTable, MagicResponsiveTable. • Проблемы с настройкой MakeTable: столбцы сбрасываются. • Недовольство заказчика результатом с MagicResponsiveTable. • Решение написать собственный код для преобразования таблицы. 01:55 Начало работы с кодом • Скачивание кода и стилей для преобразования таблицы. • Определение места для нового кода в теме WordPress. 02:53 Поиск таблицы и контейнера • Поиск таблицы и контейнера с классом report_table. • Нахождение таблицы по классу table_press. 04:44 Создание новых элементов • Создание нового контейнера и мобильного блока для новой таблицы. • Идея: новая таблица будет выводиться вместе со старой, но скрываться при переходе в мобильный вид. 05:47 Получение заголовков и строк • Получение текстового содержания заголовков и строк таблицы. • Проверка заголовков и строк через консоль. 08:11 Работа со строками • Создание временного контейнера для строк. • Перебор строк и получение необходимой информации. 10:33 Создание таблиц для строк • Создание отдельной таблицы для каждой строки. • Вставка заголовков и значений в таблицы. 14:13 Вставка таблиц в блок • Вставка таблиц в блок с дивами. • Проверка правильности сборки матрешки таблиц. 17:01 Завершение формирования таблицы • Вставка фрагментов в контейнеры. • Проверка отображения таблицы на экране. 19:03 Добавление значений ячеек • Проверка пустоты ячеек и добавление значений. • Формирование ячеек внутри цикла по заголовкам. 20:50 Формирование стилей • Переход к формированию стилей для компактного отображения таблицы в мобильном виде. • Оценка текущего отображения таблицы в мобильном виде. 21:13 Стилизация мобильной таблицы • Создан файл для стилизации мобильной таблицы. • Стили привязаны к классу `tr` для действия внутри класса `str`. • Ширина мобильного блока установлена на 75%. 21:53 Настройка медиазапроса • Медиазапрос настроен так, что мобильный блок открывается только при переходе в мобильную версию. • При уменьшении экрана до 700 пикселей основной контейнер `dt-container` исчезает. 22:39 Применение класса `dt-container` • Класс `dt-container` применяется к другим табличкам в разных местах. • При уменьшении экрана `dt-container` убирается. 23:07 Проверка работы • При уменьшении экрана таблица появляется. • Можно протестировать на отзывчивом устройстве. 23:44 Заключение • Автор делится своими наработками и просит зрителей исправить ошибки в комментариях. • Приглашает к сотрудничеству через сайт и телеграм-канал. • Прощается с аудиторией.
Wordpress - Сайт: Преобразование таблиц для мобильника 00:01 Введение и проблема • Обсуждение проблемы преобразования таблицы в мобильный вид на сайте WordPress. • Проблема: заголовки таблицы исчезают при переходе в мобильный вид, требуется перемещение контента для просмотра таблицы. • Поиск альтернатив и изучение плагинов. 01:00 Обзор плагинов • Обзор плагинов: TablePress, MakeTable, MagicResponsiveTable. • Проблемы с настройкой MakeTable: столбцы сбрасываются. • Недовольство заказчика результатом с MagicResponsiveTable. • Решение написать собственный код для преобразования таблицы. 01:55 Начало работы с кодом • Скачивание кода и стилей для преобразования таблицы. • Определение места для нового кода в теме WordPress. 02:53 Поиск таблицы и контейнера • Поиск таблицы и контейнера с классом report_table. • Нахождение таблицы по классу table_press. 04:44 Создание новых элементов • Создание нового контейнера и мобильного блока для новой таблицы. • Идея: новая таблица будет выводиться вместе со старой, но скрываться при переходе в мобильный вид. 05:47 Получение заголовков и строк • Получение текстового содержания заголовков и строк таблицы. • Проверка заголовков и строк через консоль. 08:11 Работа со строками • Создание временного контейнера для строк. • Перебор строк и получение необходимой информации. 10:33 Создание таблиц для строк • Создание отдельной таблицы для каждой строки. • Вставка заголовков и значений в таблицы. 14:13 Вставка таблиц в блок • Вставка таблиц в блок с дивами. • Проверка правильности сборки матрешки таблиц. 17:01 Завершение формирования таблицы • Вставка фрагментов в контейнеры. • Проверка отображения таблицы на экране. 19:03 Добавление значений ячеек • Проверка пустоты ячеек и добавление значений. • Формирование ячеек внутри цикла по заголовкам. 20:50 Формирование стилей • Переход к формированию стилей для компактного отображения таблицы в мобильном виде. • Оценка текущего отображения таблицы в мобильном виде. 21:13 Стилизация мобильной таблицы • Создан файл для стилизации мобильной таблицы. • Стили привязаны к классу `tr` для действия внутри класса `str`. • Ширина мобильного блока установлена на 75%. 21:53 Настройка медиазапроса • Медиазапрос настроен так, что мобильный блок открывается только при переходе в мобильную версию. • При уменьшении экрана до 700 пикселей основной контейнер `dt-container` исчезает. 22:39 Применение класса `dt-container` • Класс `dt-container` применяется к другим табличкам в разных местах. • При уменьшении экрана `dt-container` убирается. 23:07 Проверка работы • При уменьшении экрана таблица появляется. • Можно протестировать на отзывчивом устройстве. 23:44 Заключение • Автор делится своими наработками и просит зрителей исправить ошибки в комментариях. • Приглашает к сотрудничеству через сайт и телеграм-канал. • Прощается с аудиторией.