Вывод категорий в виджете категорий в два столбика. Возможно?

InstantCMS 2.X
#1 13 сентября 2022 в 10:23

В движке виджет вывода категорий какой-то для галочки пока, так как даже не задан вывод заголовка виджета. Это я доработал, вставив нужный кусок кода. 
Но вот как вывести в две колонки на ПК и в одну на смартфоне?

  1. <div class="container">
  2. <div class="title-custom">
  3. <?php html($widget->title); ?>
  4. <?php if (!empty($widget->links)) { ?>
  5. <span class="links ml-auto">
  6. <?php $links = string_parse_list($widget->links); ?>
  7. <?php foreach($links as $link){ ?>
  8. <a class="btn btn-outline-info btn-sm" href="<?php html((strpos($link['value'], 'http') === 0) ? $link['value'] : href_to($link['value'])); ?>">
  9. <?php html($link['id']); ?>
  10. </a>
  11. <?php } ?>
  12. </span>
  13. <?php } ?>
  14. </div>
  15.  
  16. <?php if($cover_preset){ ?>
  17. <div class="d-flex justify-content-between flex-wrap mb-n3 mb-md-n4">
  18. <?php foreach($cats as $item){ ?>
  19. <div class="mb-3 mb-md-4<?php if ($item['is_hidden']) { ?> d-none<?php } ?><?php if ($item['css_classes']) { ?> <?php echo implode(' ', $item['css_classes']); ?><?php } ?>">
  20. <div class="card border-0">
  21. <?php if($item['img_src']){ ?>
  22. <a class="d-block overflow-hidden rounded-lg" href="<?php echo href_to($ctype_name, $item['slug']); ?>">
  23. <img class="d-block img-fluid" src="<?php echo $item['img_src']; ?>" alt="<?php html($item['title']); ?>">
  24. </a>
  25. <?php } ?>
  26. <div class="card-body<?php if(!$item['img_src']){ ?> p-0<?php } else { ?> px-0 pb-0 pt-2<?php } ?>">
  27. <h3 class="h5 m-0">
  28. <?php if(!$item['img_src']){ ?>
  29. <span class="text-warning"><?php html_svg_icon('solid', 'plus'); ?></span>
  30. <?php } ?>
  31. <a href="<?php echo href_to($ctype_name, $item['slug']); ?>">
  32. <?php echo $item['title']; ?>
  33. </a>
  34. </h3>
  35. </div>
  36. </div>
  37. </div>
  38. <?php } ?>
  39. </div>
  40. <?php } else { ?>
  41. <ul class="icms-content-subcats list-unstyled my-n2">
  42.  
  43. <?php $last_level = 0; ?>
  44.  
  45. <?php foreach($cats as $item){ ?>
  46.  
  47. <?php for ($i=0; $i<($last_level - $item['ns_level']); $i++) { ?>
  48. </li></ul>
  49. <?php } ?>
  50.  
  51. <?php if ($item['ns_level'] <= $last_level) { ?>
  52. </li>
  53. <?php } ?>
  54.  
  55. <li class="my-2<?php if ($item['is_hidden']) { ?> d-none<?php } ?>">
  56.  
  57. <a class="h5<?php if ($item['is_active']) { ?> text-dark<?php } ?>" href="<?php echo href_to($ctype_name, $item['slug']); ?>">
  58. <span class="text-warning"><?php html_svg_icon('solid', 'folder'); ?></span>
  59. <span><?php html($item['title']); ?></span>
  60. </a>
  61.  
  62. <?php if ($item['childs_count']) { ?><ul class="list-unstyled pl-3"><?php } ?>
  63.  
  64. <?php $last_level = $item['ns_level']; ?>
  65.  
  66. <?php } ?>
  67.  
  68. <?php for ($i=0; $i<$last_level; $i++) { ?>
  69. </li></ul>
  70. <?php } ?>
  71. <?php } ?>
  72. </div>
  73.  
  74.  
  75. <?php if(cmsUser::isAdmin()){ ?>
  76. <?php $this->addTplJSName('widgets'); ?>
  77. <div class="edit_wlinks">
  78. <a class="edit btn btn-secondary btn-sm"
  79. href="#"
  80. title="<?php echo LANG_EDIT; ?>"
  81. data-id="<?php echo $widget->bind_id; ?>"
  82. data-url="<?php echo href_to('admin', 'widgets', 'edit'); ?>"
  83. data-name="<?php echo $this->getName(); ?>"
  84. onclick="return widgetEdit(this);">
  85. <?php html_svg_icon('solid', 'edit'); ?>
  86. </a>
  87. <a class="delete btn btn-danger btn-sm"
  88. href="#"
  89. title="<?php echo LANG_DELETE; ?>"
  90. data-id="<?php echo $widget->id; ?>"
  91. data-url="<?php echo href_to('admin', 'widgets', 'delete'); ?>"
  92. data-confirm="<?php html(LANG_CP_WIDGET_DELETE_CONFIRM); ?>"
  93. onclick="return widgetDelete(this);">
  94. <?php html_svg_icon('solid', 'minus-circle'); ?>
  95. </a>
  96. </div>
  97. <?php } ?>
#2 13 сентября 2022 в 10:24

можно сделать использую flex-box или grid стилизацию

#3 13 сентября 2022 в 11:23

можно сделать использую flex-box или grid стилизацию

maxisoft

Сделал с помощью таких стилей

  1. #c-list{display:flex;justify-content:space-between;flex-wrap:wrap;background-color:#EBEAD8;border-radius:6px; padding: 25px;}
  2.  
  3. #c-list .file_list {position:relative;display:flex;flex-direction:column;align-self:center;justify-content:center;flex:0 0 48.6%;padding:10px;color:#161616;overflow:hidden;}
  4.  
  5. #c-list .file_list:nth-child(-n+2){margin-top:0}
#4 13 сентября 2022 в 11:26

Можно css-классу icms-content-subcats добавить стиль columns: 2

#5 13 сентября 2022 в 12:25

Можно css-классу icms-content-subcats добавить стиль columns: 2

Loadырь

спасибо, попробую ваш метод, так как вероятно он проще и оптимизированнее из-за меньшего количества кода)

#6 13 сентября 2022 в 13:03

он проще и оптимизированнее из-за меньшего количества кода)

Def

Но там есть нюансы. Всё таки в две колонки не равно в два столбца. В этом случае короткие названия категорий могут выводится в ряд по несколько штук.

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.