Головна » Блоги » InstantCMS - переваги та недоліки системи » Альтернативний шаблон виводу наборів для шаблону modern

Альтернативний шаблон виводу наборів для шаблону modern

0
Голосів: 0
Опубліковано: 2021 / 07 / 16
Переглядів: 88
Категорія: Шаблони
Редагувалося: 2 рази — останній 16 липня 2021
Можливо, ви вже звертали увагу на поведінку наборів в цьому шаблоні, коли його елементи не вміщуться в один рядок. В цьому випадку частина елементів кудись "зникає". Це виникає тому, що там підключений скрипт slick. Він і створює "карусель"

Виникають 2 явні проблеми:
1) користувачу ніяк не здогадатися, що за межами видимості ще є якісь пункти і до них можна добратися прокруткою
2) скрипт генерить не валідний код
------------------
Пропонується альтернивний варіант. Ми позбавимося slick і вирішимо проблему іншим чином: для телефонів виведемо набори зі звичайним для bootstrap dropdown а для інших пристроїв будемо звлишати всі набори видимими завжди (з переходом на новий рядок, якщо їх кількість завелика).

В результаті отримаємо такий вигляд наборів при перегляді з телефону:
Альтернативний шаблон виводу наборів для шаблону modern

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


Код файлу templates || modern || assets || uidatasets-panel.tpl.php (замініть в своєму):
Код PHP:
  1.  
  2. <?php if(!isset($ds_prefix)){ $ds_prefix = '/'; } ?>
  3. <?php $active_filters_query = $this->controller->getActiveFiltersQuery(); ?>
  4. <div class="content_datasets <?php if(isset($wrap_class)){ echo $wrap_class; } else { echo 'my-3 my-md-4'; } ?>">
  5. <?php if($device_type != 'mobile') { ?>
  6. <div class="dropdown">
  7. <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton_<?php echo $current_dataset['name']; ?>" data-bs-toggle="dropdown" aria-expanded="false">
  8. <?php echo $current_dataset['title']; ?>
  9. </button>
  10. <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton_<?php echo $current_dataset['name']; ?>">
  11. <?php $ds_counter = 0; ?>
  12. <?php foreach($datasets as $set){ ?>
  13. <?php $ds_selected = ($dataset_name == $set['name'] || (!$dataset_name && $ds_counter==0)); ?>
  14. <?php if(!$ds_selected) { ?>
  15. <li class="nav-item<?php if ($ds_selected){ ?> is-active<?php } ?> <?php echo $set['name'].(!empty($set['target_controller']) ? '_'.$set['target_controller'] : ''); ?>">
  16.  
  17. <?php $ds_url = sprintf($base_ds_url, ($ds_counter > 0 ? $ds_prefix.$set['name'] : '')); ?>
  18.  
  19. <?php if ($ds_selected){ ?>
  20. <span class="nav-link active">
  21. <?php echo $set['title']; ?>
  22. <?php if (!empty($set['counter'])){ ?>
  23. <span class="counter badge"><?php html($set['counter']); ?></span>
  24. <?php } ?>
  25. </span>
  26. <?php } else { ?>
  27. <a class="nav-link" href="<?php echo $ds_url.($active_filters_query ? '?'.$active_filters_query : ''); ?>">
  28. <?php echo $set['title']; ?>
  29. <?php if (!empty($set['counter'])){ ?>
  30. <span class="counter badge"><?php html($set['counter']); ?></span>
  31. <?php } ?>
  32. </a>
  33. <?php } ?>
  34. </li>
  35. <?php } ?>
  36. <?php $ds_counter++; ?>
  37. <?php } ?>
  38. </ul>
  39. </div>
  40. <?php ob_start(); ?>
  41. <style>#dropdownMenuButton_<?php echo $current_dataset['name']; ?>:focus + .dropdown-menu,.dropdown-menu:active{display: block;}</style>
  42. <?php $this->addHead(ob_get_clean()); ?>
  43. <?php } else { ?>
  44. <ul class="nav nav-pills pills-menu dataset-pills">
  45. <?php $ds_counter = 0; ?>
  46. <?php foreach($datasets as $set){ ?>
  47. <?php $ds_selected = ($dataset_name == $set['name'] || (!$dataset_name && $ds_counter==0)); ?>
  48. <li class="nav-item<?php if ($ds_selected){ ?> is-active<?php } ?> <?php echo $set['name'].(!empty($set['target_controller']) ? '_'.$set['target_controller'] : ''); ?>">
  49.  
  50. <?php $ds_url = sprintf($base_ds_url, ($ds_counter > 0 ? $ds_prefix.$set['name'] : '')); ?>
  51.  
  52. <?php if ($ds_selected){ ?>
  53. <span class="nav-link active">
  54. <?php echo $set['title']; ?>
  55. <?php if (!empty($set['counter'])){ ?>
  56. <span class="counter badge"><?php html($set['counter']); ?></span>
  57. <?php } ?>
  58. </span>
  59. <?php } else { ?>
  60. <a class="nav-link" href="<?php echo $ds_url.($active_filters_query ? '?'.$active_filters_query : ''); ?>">
  61. <?php echo $set['title']; ?>
  62. <?php if (!empty($set['counter'])){ ?>
  63. <span class="counter badge"><?php html($set['counter']); ?></span>
  64. <?php } ?>
  65. </a>
  66. <?php } ?>
  67. </li>
  68. <?php $ds_counter++; ?>
  69. <?php } ?>
  70. </ul>
  71. <?php } ?>
  72. </div>
  73. <?php if (!empty($current_dataset['description'])){ ?>
  74. <div class="content_datasets_description">
  75. <?php echo $current_dataset['description']; ?>
  76. </div>
  77. <?php } ?>
  78.  
Якщо комусь потрібне, подібне для шаблонів на базі default, пишіть в коментарях, зроблю при нагоді.

Щасти вам!

Читайте також:

Коментарі (0)

Немає коментарів. Ваш буде першим!