bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Bellord
2026-08-14 10:00:42 +03:00
parent b72235e7a0
commit 954b9dcdbb
10 changed files with 790 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/card/block.php
+46 -7
View File
@@ -1,5 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?php require($_SERVER['DOCUMENT_ROOT']. '/bitrix/modules/main/include/prolog_before.php');?>
<?php
use Bitrix\Main\Page\Asset;
/**
* @var $APPLICATION
*/
@@ -7,6 +8,7 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:flex-kit/item',
'kit:core',
'kit:bsCore',
'kit:collapse',
@@ -15,6 +17,7 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
'kit:theme',
])->render();
}
Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
$APPLICATION->ShowHead();
?>
@@ -24,6 +27,7 @@ $APPLICATION->ShowHead();
}
.card-flex-list--block {
--col-count: 5;
--gap: 0px;
}
@media (max-width: 1200px) {
.card-flex-list--block {
@@ -34,6 +38,9 @@ $APPLICATION->ShowHead();
.card-flex-list--block {
--col-count: 4;
}
.card-flex-list--block .flex-list-item {
--col-span: 1 !important;
}
}
@media (max-width: 800px) {
.card-flex-list--block {
@@ -45,26 +52,34 @@ $APPLICATION->ShowHead();
--col-count: 2;
}
}
@media (max-width: 320px) {
.card-flex-list--block {
--col-count: 1;
}
}
.section-product-list .flex-card {
--kit-color-content: #FFF;
--aspect-ratio: calc(200 / 250);
--aspect-ratio: 1;
}
.section-product-list .flex-card__picture {
flex-grow: 1;
}
.flex-card__picture img {
object-fit: cover;
}
.flex-card__hover {
text-align: center;
color: grey;
font-size: 0.8em;
}
</style>
<?php
$items = array_fill(0, 40, [
$items = array_fill(0, 20, [
'id' => 1,
'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus',
'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus',
'picture' => '<img src="https://imgholder.ru/200x200/">',
'picture' => '<img src="https://placehold.co/200">',
'text_preview' => 'asdas asdas dasdasd',
'tickets' => [
[
@@ -86,15 +101,39 @@ $items = array_fill(0, 40, [
<div>
<h1>Каталог</h1>
</div>
<div class="flex-list card-flex-list card-flex-list--block">
<div class="flex-list card-flex-list card-flex-list--block" style>
<?php
foreach($items as $item) {?>
<div class="flex-list-item">
foreach($items as $i =>$item) {
$colSpan = match ($i){
0, 3 => 2,
1, 7 => 3,
14 => 5,
default => 1,
}?>
<div class="flex-list-item" style="--col-span: <?=$colSpan?>;">
<?php
echo app()->service()->templater()->get('kit:card/block', $item);
?>
</div>
<?php }?>
</div>
<div class="flex-list card-flex-list card-flex-list--block flex-aspect-ratio" style="--gap: 50px;">
<?php
foreach($items as $i =>$item) {
$colSpan = match ($i){
0, 3 => 2,
1, 7 => 3,
14 => 5,
default => 1,
}?>
<div class="flex-list-item" style="--col-span: <?=$colSpan?>;">
<?php
echo '<div><div style="background-color: #0a7ddd;border: 1px solid;width: 100%;height: 100%;"></div></div>';
?>
</div>
<?php }?>
</div>
</section>
</div>