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
2021-09-05 20:17:36 +03:00
parent 7310d04755
commit 6297c67201
28 changed files with 2676 additions and 1591 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/card/block.php
+72
View File
@@ -0,0 +1,72 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<style type="text/css">
.section-product-list {
--col-count: 5;
}
.section-product-list .flex-card {
--kit-color-content: #FFF;
--aspect-ratio: calc(200 / 250);
}
.section-product-list .flex-card__picture {
flex-grow: 1;
}
.flex-card__hover {
text-align: center;
color: grey;
font-size: 0.8em;
}
</style>
<?
$items = array_fill(0, 40, [
'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' => app()->service()->templater()->get('kit:svg/shop/cardPictureEmpty'),
'text_preview' => 'asdas asdas dasdasd',
'tickets' => [
[
'code' => 'news',
'name' => 'Новинка'
],
[
'code' => 'discount',
'name' => 'Скидка'
]
]
]);
?>
<div class="kit-wrapper">
<section class="section-product-list">
<div>
<h1>Каталог</h1>
</div>
<div class="flex-list flex-card-list--list-">
<?foreach($items as $item) {?>
<div class="flex-list-item">
<?
echo app()->service()->templater()->get('kit:card/block', $item);
?>
</div>
<?}?>
</div>
</section>
</div>
tests/cheatsheet.php
+103 -5
View File
@@ -15,7 +15,11 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
$APPLICATION->ShowHead();
?>
<script>
kit.ready(['popover', 'datepicker'], function () {
});
</script>
<div class="kit-wrapper">
<h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
@@ -27,6 +31,8 @@ $APPLICATION->ShowHead();
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
<h2>Tooltip</h2>
<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
<div class="flex-list-item">
<?
@@ -34,7 +40,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on top',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'top',
'title' => 'Tooltip on top'
]
@@ -47,7 +53,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on end',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'right',
'title' => 'Tooltip on end'
]
@@ -60,7 +66,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on bottom',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'bottom',
'title' => 'Tooltip on bottom'
]
@@ -73,7 +79,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on start',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'left',
'title' => 'Tooltip on start'
]
@@ -86,7 +92,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip with HTML',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-html' => 'true',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
@@ -95,6 +101,98 @@ $APPLICATION->ShowHead();
</div>
</div>
<h2>Popover</h2>
<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on top',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'top',
'data-bs-content' => 'Top popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on right',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'right',
'data-bs-content' => 'Right popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on bottom',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'bottom',
'data-bs-content' => 'Bottom popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on left',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'left',
'data-bs-content' => 'Left popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => htmlspecialchars('<HTML> & header'),
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'trigger focus',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'data-bs-trigger' => 'focus',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
</div>
<div class="d-flex justify-content-between flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
tests/flex-card/product-list-item.php
-49
View File
@@ -1,49 +0,0 @@
<?php
?>
<div class="flex-card aspect-ratio flex-list-item">
<div class="flex-card__section">
<div class="flex-card__content">
<div class="flex-card__body-shell aspect-ratio">
<div class="flex-card__body">
<div class="flex-card__picture">
<div class="kit-picture" style="background-image: url(<?=$item['image_preview']?>)">
</div>
</div>
<div class="flex-card__title">
<div class="kit-line-clamp">
<?=$item['name']?>
</div>
</div>
<div class="flex-card__props"></div>
</div>
</div>
<div class="flex-card__header">
<div class="flex-list flex-list--ticket">
<?
foreach ($item['tickets'] as $ticket) {
?>
<div class="flex-list-item">
<div class="ticket-item <?=$ticket['code']?>">
<div class="kit-line-clamp"><?=$ticket['name']?></div>
</div>
</div>
<?
}
?>
</div>
</div>
<div class="flex-card__footer"></div>
<div class="flex-card__hover">
<div class="flex-card__hover-content">
<?=$item['hover']?>
</div>
</div>
<div class="flex-card__border"></div>
</div>
</div>
</div>
tests/flex-card/product-list.php
-65
View File
@@ -1,65 +0,0 @@
<head>
<script src="chat.js"></script>
<link href="./../../assets/flex-kit/flex-kit.css" rel="stylesheet">
<style type="text/css">
.section-product-list {
--col-count: 4;
}
.section-product-list .flex-card {
--kit-color-content: #FFF;
--aspect-ratio: calc(200 / 250);
}
.section-product-list .flex-card__picture {
flex-grow: 1;
}
.flex-card__hover {
text-align: center;
color: grey;
font-size: 0.8em;
}
</style>
</head>
<?
$items = array_fill(0, 40, [
'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',
'image_preview' => './product.svg',
'image_detail' => '',
'text_preview' => 'asdas asdas dasdasd',
'tickets' => [
[
'code' => 'news',
'name' => 'Новинка'
],
[
'code' => 'discount',
'name' => 'Скидка'
]
]
]);
?>
<body>
<div class="kit-wrapper">
<section class="section-product-list">
<div>
<h1>Каталог</h1>
</div>
<div class="flex-list flex-card-list--list-">
<?foreach($items as $item) {?>
<?
include "product-list-item.php";
?>
<?}?>
</div>
</section>
</div>
</body>
tests/flex-card/product.svg
-3
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB