Альтернативний шаблон виводу наборів для шаблону modern
Автор: Олег Васильович я
Опубліковано: 2021 / 07 / 16
Переглядів: 305
Категорія: Шаблони
Редагувалося: 2 рази — останній 16 липня 2021
|
Виникають 2 явні проблеми:
1) користувачу ніяк не здогадатися, що за межами видимості ще є якісь пункти і до них можна добратися прокруткою
2) скрипт генерить не валідний код
------------------
Пропонується альтернивний варіант. Ми позбавимося slick і вирішимо проблему іншим чином: для телефонів виведемо набори зі звичайним для bootstrap dropdown а для інших пристроїв будемо звлишати всі набори видимими завжди (з переходом на новий рядок, якщо їх кількість завелика).
В результаті отримаємо такий вигляд наборів при перегляді з телефону:

Тобто буде видимий тільки активний набор. При кліку на нього, у випадаючому списку виведуться всі інші:

Код файлу templates || modern || assets || uidatasets-panel.tpl.php (замініть в своєму):
<?php $active_filters_query = $this->controller->getActiveFiltersQuery(); ?> <div class="content_datasets <?php if(isset($wrap_class)){ echo $wrap_class; } else { echo 'my-3 my-md-4'; } ?>"> <?php if($device_type != 'mobile') { ?> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton_<?php echo $current_dataset['name']; ?>" data-bs-toggle="dropdown" aria-expanded="false"> <?php echo $current_dataset['title']; ?> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton_<?php echo $current_dataset['name']; ?>"> <?php $ds_counter = 0; ?> <?php foreach($datasets as $set){ ?> <?php $ds_selected = ($dataset_name == $set['name'] || (!$dataset_name && $ds_counter==0)); ?> <?php if(!$ds_selected) { ?> <li class="nav-item<?php if ($ds_selected){ ?> is-active<?php } ?> <?php echo $set['name'].(!empty($set['target_controller']) ? '_'.$set['target_controller'] : ''); ?>"> <?php if ($ds_selected){ ?> <span class="nav-link active"> <?php echo $set['title']; ?> <span class="counter badge"><?php html($set['counter']); ?></span> <?php } ?> </span> <?php } else { ?> <a class="nav-link" href="<?php echo $ds_url.($active_filters_query ? '?'.$active_filters_query : ''); ?>"> <?php echo $set['title']; ?> <span class="counter badge"><?php html($set['counter']); ?></span> <?php } ?> </a> <?php } ?> </li> <?php } ?> <?php $ds_counter++; ?> <?php } ?> </ul> </div> <style>#dropdownMenuButton_<?php echo $current_dataset['name']; ?>:focus + .dropdown-menu,.dropdown-menu:active{display: block;}</style> <?php } else { ?> <ul class="nav nav-pills pills-menu dataset-pills"> <?php $ds_counter = 0; ?> <?php foreach($datasets as $set){ ?> <?php $ds_selected = ($dataset_name == $set['name'] || (!$dataset_name && $ds_counter==0)); ?> <li class="nav-item<?php if ($ds_selected){ ?> is-active<?php } ?> <?php echo $set['name'].(!empty($set['target_controller']) ? '_'.$set['target_controller'] : ''); ?>"> <?php if ($ds_selected){ ?> <span class="nav-link active"> <?php echo $set['title']; ?> <span class="counter badge"><?php html($set['counter']); ?></span> <?php } ?> </span> <?php } else { ?> <a class="nav-link" href="<?php echo $ds_url.($active_filters_query ? '?'.$active_filters_query : ''); ?>"> <?php echo $set['title']; ?> <span class="counter badge"><?php html($set['counter']); ?></span> <?php } ?> </a> <?php } ?> </li> <?php $ds_counter++; ?> <?php } ?> </ul> <?php } ?> </div> <div class="content_datasets_description"> <?php echo $current_dataset['description']; ?> </div> <?php } ?>
Щасти вам!
Читайте також:
-
Перемикач базового кольору сайту
Віджет дозволить відвідувачам вибирати колірну схему сайту на свій смак (із запропонованих вами). Адаптований для тем, реалізованих на bootstrap. Доповнює контекстуальні селектори bootstrap 4 ан...
-
Cтиль списку типу контенту в залежності від пристрою відвідувача
Рішення дозволить призначати шаблон виводу списку записів типу контенту в залежності від пристрою відвідувача сайту. Створюємо в папці content актульного шаблону файл news_list.tpl.php, де news - ...
-
Свої файли шаблону для окремих записів типу контенту
Досить часто виникає необхідність в виведенні окремих записів типу клнтенту (ТК) інакше від інших записів. На щастя в InstantCMS 2-х, починаючи з версіії 2.11.0, де-які можливості для вирішення так...
-
Компонент, що дозволить керувати правами перегляду профілів в InstantCms 2-х
Вітаю! За великим рахунком це продовження попереднього запису, але тепер завдання вирішується за допомогою компонента В результаті матимемо більше можливостей, завдяки яким зможемо керувати правами...
Немає коментарів. Ваш буде першим!