Skip to content

K
kpp
Commit e41c0cf5 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

tables

parent 6fda96a6
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 102 deletions
src/blocks/blocks-library/blocks-library.js
View file @ e41c0cf5
// Не работает в IE11
ready(function(){
// Открытие/закрытие блока с кодом
var codeShowTriggers = document.querySelectorAll('.blocks-library__code-show-trigger');
......
src/blocks/table-responsive-scroll/table-responsive-scroll.less
View file @ e41c0cf5
......@@ -13,9 +13,11 @@
table {
margin: 0;
border: 0 !important;
width: 100%;
}
caption {
display: none;
text-align: left;
border-bottom: 1px solid @border-color;
}
}
src/blocks/table-responsive/table-responsive--horizontal.less 0 → 100644
View file @ e41c0cf5
@import '../../less/variables.less'; // только для удобства обращения к переменным
//------------------------------------------------------------------------------
// Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
//------------------------------------------------------------------------------
.table-responsive {
&--horizontal {
@media (max-width: (@screen-md - 1)) {
tbody {
td {
display: block;
width: 100%;
padding-left: 19rem;
&:before {
width: 18rem;
min-width: 18rem;
padding-right: 1rem;
float: left;
margin-left: -19rem + 0.6rem;
}
&:after {
content: '';
display: table;
clear: both;
}
}
}
}
}
}
src/blocks/table-responsive/table-responsive.less
View file @ e41c0cf5
......@@ -6,7 +6,48 @@
//------------------------------------------------------------------------------
.table-responsive {
// Таблицу с любым классом можно сделать адаптивной, вызывая эту примесь.
// ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
.table-responsive(sm);
@media (max-width: (@screen-md - 1)) {
display: block;
border: 0;
caption {
display: block;
width: 100%;
text-align: left;
}
thead {
display: none;
}
tbody {
display: block;
width: 100%;
tr {
display: block;
border: 1px solid @gray-lighter;
border-bottom: 0;
&:not(:last-child) {
margin-bottom: @line-height;
}
}
td {
display: block;
width: 100%;
border-right: 0 !important;
border-left: 0 !important;
&:before {
display: block;
font-weight: 700;
content: attr(data-label);
}
}
}
}
}
src/blocks/table/table--not-greed.less 0 → 100644
View file @ e41c0cf5
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table {
&--not-greed {
width: auto;
}
}
src/blocks/table/table.less
View file @ e41c0cf5
......@@ -2,14 +2,6 @@
.table {
border: 1px solid @border-color;
td,
th {
&:not(:first-child) {
border-left: 1px solid @border-color;
}
}
&__header {
background-color: @gray-lightest;
......
src/blocks_library.html
View file @ e41c0cf5
......@@ -653,9 +653,58 @@
<h1 class="blocks-library__item-title">Таблица как БЭМ-блок</h1>
<p>Тут и ниже во всех примерах (хоть сколько-нибудь широких таблиц) в демонстрации использована обертка для адаптивности с горизонтальной прокруткой.</p>
<div class="table-responsive-scroll">
<table class="table">
<caption>Таблица как БЭМ-блок, элементы имеют классы</caption>
<caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Мыло</th>
<th>Статус</th>
<th>Политическая ориентация</th>
</tr>
<tr>
<td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td>
<td>Хозяйственное</td>
<td>Администратор</td>
<td>«ВСЕГДА!»</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепневмомешковыколачивателев</td>
<td>Душистое</td>
<td>Юзверь</td>
<td>Нижняя</td>
</tr>
</table>
</div>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;table class=&quot;table&quot;&gt;</code>
<code class="html"> &lt;caption&gt;Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot&lt;/caption&gt;</code>
<code class="html"> &lt;tr&gt;</code>
<code class="html"> &lt;th&gt;...&lt;/th&gt;</code>
<code class="html"> &lt;/tr&gt;</code>
<code class="html"> &lt;tr&gt;</code>
<code class="html"> &lt;td&gt;...&lt;/td&gt;</code>
<code class="html"> &lt;/tr&gt;</code>
<code class="html"> &lt;tr&gt;</code>
<code class="html"> &lt;td&gt;....&lt;/td&gt;</code>
<code class="html"> &lt;/tr&gt;</code>
<code class="html">&lt;/table&gt;</code>
</pre>
</div>
</div>
<div class="table-responsive-scroll">
<table class="table">
<caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption>
<thead class="table__header">
<tr>
<th>Имя</th>
......@@ -701,7 +750,7 @@
<div class="blocks-library__code">
<pre>
<code class="html">&lt;table class=&quot;table&quot;&gt;</code>
<code class="html"> &lt;caption&gt;&#x422;&#x430;&#x431;&#x43b;&#x438;&#x446;&#x430; &#x43a;&#x430;&#x43a; &#x411;&#x42d;&#x41c;-&#x431;&#x43b;&#x43e;&#x43a;, &#x44d;&#x43b;&#x435;&#x43c;&#x435;&#x43d;&#x442;&#x44b; &#x438;&#x43c;&#x435;&#x44e;&#x442; &#x43a;&#x43b;&#x430;&#x441;&#x441;&#x44b;&lt;/caption&gt;</code>
<code class="html"> &lt;caption&gt;Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы&lt;/caption&gt;</code>
<code class="html"> &lt;thead class=&quot;table__header&quot;&gt;</code>
<code class="html"> &lt;tr&gt;</code>
<code class="html"> &lt;th&gt;...&lt;/th&gt;</code>
......@@ -722,6 +771,44 @@
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Нежадная таблица</h2>
<p>Модификатор <code>table--not-greed</code>, отдельный less-файл.</p>
<p class="alert alert--danger">Не могут иметь адаптивность с горизонтальной прокруткой (становятся жадными).</p>
<table class="table table--not-greed">
<thead class="table__header">
<tr>
<th>Имя</th>
<th>Фамилия</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td>Иннокентий</td>
<td>Барлаух</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепев</td>
</tr>
<tr>
<td>Ктулху</td>
<td>Втанк</td>
</tr>
</tbody>
</table>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;table class=&quot;table table--not-greed&quot;&gt;</code>
<code class="html"> ...</code>
<code class="html">&lt;/table&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Подсветка строк по наведению</h2>
<p>Модификатор <code>table--hover</code>, отдельный less-файл. Подсвечиваются только строки внутри <code>tbody</code>.</p>
......@@ -866,32 +953,29 @@
<h1 class="blocks-library__item-title">Адаптивные таблицы с повторяющимися названиями ячеек</h1>
<p class="alert alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается индивидуально).</p>
<p class="alert alert--danger"><strong>Внимание!</strong> Применение ограничено таблицами, имеющими заголовочные ячейки сверху.</p>
<p>Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
<p class="alert alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов.</p>
<style>
.blocks-library__table-responsive tbody td:before,
.blocks-library__table-responsive tbody th:before {
min-width: 18rem;
}
</style>
<p class="alert alert--danger"><strong>Внимание!</strong> Применение варианта по умолчанию ограничено таблицами, имеющими заголовочные ячейки сверху.</p>
<table class="table-responsive blocks-library__table-responsive">
<table class="table-responsive">
<caption>Адаптивная таблица с перестроением блоков</caption>
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип мироощущения</th>
<th>Тип индивидуального мироощущения</th>
<th>Образ в искусстве</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип мироощущения">Девственность</td>
<td data-label="Тип индивидуального мироощущения">Девственность</td>
<td data-label="Образ в искусстве">Светлый</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
<td data-label="Тип индивидуального мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
<td data-label="Образ в искусстве">Невероятно привлекательный</td>
</tr>
</tbody>
</table>
......@@ -904,22 +988,80 @@
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Имя и фамилия&lt;/th></code>
<code class="html"> &lt;th>Тип мироощущения&lt;/th></code>
<code class="html"> &lt;th>Образ в искусстве&lt;/th></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;/thead></code>
<code class="html"> &lt;tbody></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td data-label="Имя и фамилия">Анатоле Вассерман&lt;/td></code>
<code class="html"> &lt;td data-label="Тип мироощущения">Девственность&lt;/td></code>
<code class="html"> &lt;td data-label="Образ в искусстве">Светлый&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td data-label="Имя и фамилия">Джакомо Казанова&lt;/td></code>
<code class="html"> &lt;td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.&lt;/td></code>
<code class="html"> &lt;td data-label="Образ в искусстве">Невероятно привлекательный&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;/tbody></code>
<code class="html">&lt;/table></code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Модификация для горизонтального перестроения</h2>
<p>Модификатор <code>table-responsive--horizontal</code>, отдельный less-файл.</p>
<table class="table-responsive table-responsive--horizontal">
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип индивидуального мироощущения</th>
<th>Образ в искусстве</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип индивидуального мироощущения">Девственность</td>
<td data-label="Образ в искусстве">Светлый</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип индивидуального мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
<td data-label="Образ в искусстве">Невероятно привлекательный</td>
</tr>
</tbody>
</table>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;table class="table-responsive table-responsive--horizontal"></code>
<code class="html"> &lt;thead></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Имя и фамилия&lt;/th></code>
<code class="html"> &lt;th>Тип мироощущения&lt;/th></code>
<code class="html"> &lt;th>Образ в искусстве&lt;/th></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;/thead></code>
<code class="html"> &lt;tbody></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td data-label="Имя и фамилия">Анатоле Вассерман&lt;/td></code>
<code class="html"> &lt;td data-label="Тип мироощущения">Девственность&lt;/td></code>
<code class="html"> &lt;td data-label="Образ в искусстве">Светлый&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td data-label="Имя и фамилия">Джакомо Казанова&lt;/td></code>
<code class="html"> &lt;td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.&lt;/td></code>
<code class="html"> &lt;td data-label="Образ в искусстве">Невероятно привлекательный&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;/tbody></code>
<code class="html">&lt;/table></code>
</pre>
</div>
</div>
</div>
</section>
......
src/less/global/global-tables.less
View file @ e41c0cf5
......@@ -6,18 +6,26 @@ table {
border: 0;
border-collapse: collapse;
width: 100%;
border: 1px solid @border-color;
}
caption {
padding: 0.6em;
padding: round(0.6em * (100 / @font-size--small-percent), 2);
text-align: right;
caption-side: bottom;
font-size: @font-size--small-percent;
line-height: 1em;
color: @text-color--muted;
text-align: left;
}
td,
th {
vertical-align: top;
border-bottom: 1px solid @border-color;
&:not(:first-child) {
border-left: 1px solid @border-color;
}
}
th {
......
src/less/mixins/mixins.less
View file @ e41c0cf5
@import 'grid-mixins.less';
@import 'btn-mixins.less';
@import 'table-responsive-mixins.less';
@import 'responsive-mixins.less';
@import 'focus-mixin.less';
@import 'forms-mixins.less';
src/less/mixins/table-responsive-mixins.less deleted 100644 → 0
View file @ 6fda96a6
//------------------------------------------------------------------------------
// Правила для адаптивной таблицы
//------------------------------------------------------------------------------
// ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
//------------------------------------------------------------------------------
.table-responsive(@screen: md) {
& when (@screen = sm) {
@media (max-width: (@screen-md - 1)) {
.table-responsive-properties();
}
}
& when (@screen = md) {
@media (max-width: (@screen-lg - 1)) {
.table-responsive-properties();
}
}
& when (@screen = lg) {
@media (max-width: (@screen-xl - 1)) {
.table-responsive-properties();
}
}
& when (@screen = xl) {
@media (max-width: (@screen-xxl - 1)) {
.table-responsive-properties();
}
}
& when (@screen = xxl) {
@media (max-width: (@screen-xxl - 1)) {
.table-responsive-properties();
}
}
}
.table-responsive-properties() {
display: block;
border: 0;
overflow-x: auto; // IE11 отказывается переносить длинный текст в <td>, даём костыль
thead {
display: none;
}
tbody {
display: block;
width: 100%;
tr {
display: block;
border-top: 0;
&:not(:last-child) {
margin-bottom: @line-height;
}
}
td {
display: flex;
width: 100%;
&:before {
display: block;
padding-right: .5em;
font-weight: 700;
white-space: nowrap;
content: attr(data-label) + ":";
}
}
}
}
src/less/style.less
View file @ e41c0cf5
......@@ -16,7 +16,9 @@
@import './src/blocks/table/table.less';
@import './src/blocks/table/table--hover.less';
@import './src/blocks/table/table--striped.less';
@import './src/blocks/table/table--not-greed.less';
@import './src/blocks/table-responsive/table-responsive.less';
@import './src/blocks/table-responsive/table-responsive--horizontal.less';
@import './src/blocks/table-responsive-scroll/table-responsive-scroll.less';
@import './src/blocks/field-text/field-text.less';
@import './src/blocks/field-text/field-text--lg.less';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment