Skip to content

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

Адаптивные таблицы (правки, дополнения)

parent 29a994d2
Show whitespace changes
Inline Side-by-side
Showing with 235 additions and 3 deletions
src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less 0 → 100644
View file @ 4a5a83dc
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table-responsive-rotate {
&--thead-fix {
position: relative;
padding-left: 12rem;
.table-responsive-rotate__inner {
display: block;
width: 100%;
overflow-x: auto;
}
thead {
width: 12rem;
position: absolute;
top: 0;
left: 0;
}
}
}
src/blocks/table-responsive-rotate/table-responsive-rotate.html 0 → 100644
View file @ 4a5a83dc
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/table-responsive-rotate/table-responsive-rotate.html')
-->
<div class="table-responsive-rotate">content</div>
src/blocks/table-responsive-rotate/table-responsive-rotate.less 0 → 100644
View file @ 4a5a83dc
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table-responsive-rotate {
display: block;
width: 100%;
overflow-x: auto;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
border: 1px solid @border-color;
table {
display: flex;
margin: 0;
border: 0 !important;
width: 100%;
}
tbody {
display: flex;
}
tr {
display: block;
}
th,
td {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 0;
border-right: 1px solid @border-color;
&:last-child {
border-bottom: 0;
}
}
caption {
display: none;
}
}
src/blocks/table-responsive-scroll/table-responsive-scroll.less
View file @ 4a5a83dc
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
margin-top: (@line-height / 2); margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2); margin-bottom: (@line-height / 2);
border: 1px solid @border-color; border: 1px solid @border-color;
border-bottom: 0;
table { table {
margin: 0; margin: 0;
...@@ -16,8 +15,19 @@ ...@@ -16,8 +15,19 @@
width: 100%; width: 100%;
} }
tbody, thead, tfoot {
&:last-child {
tr:last-child {
td, th {
border-bottom: 0;
}
}
}
}
caption { caption {
text-align: left; text-align: left;
border-bottom: 1px solid @border-color; border-bottom: 1px solid @border-color;
caption-side: top;
} }
} }
src/blocks_library.html
View file @ 4a5a83dc
...@@ -1075,8 +1075,8 @@ ...@@ -1075,8 +1075,8 @@
<p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p> <p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p>
<div class="table-responsive-scroll"> <div class="table-responsive-scroll">
<table class=""> <table>
<tbody class="table__body"> <tbody>
<tr> <tr>
<td>Иннокентий</td> <td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td> <td>Барлаухенштицкен-Ламанческий</td>
...@@ -1157,6 +1157,150 @@ ...@@ -1157,6 +1157,150 @@
<section class="blocks-library__item" id="table-responsive-rotate" data-name=".table-responsive-rotate">
<h1 class="blocks-library__item-title">Адаптивные таблицы cо сменой строк на колонки</h1>
<p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p>
<p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> Контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).</p>
<p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> Ячейки не должны объединяться. <code>caption</code> скрывается.</p>
<div class="table-responsive-rotate">
<table class="table">
<caption>Таблица как БЭМ-блок, элементы имеют классы</caption>
<thead class="table__header">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Мыло</th>
<th>Статус</th>
<th>Политическая ориентация</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td>
<td>Хозяйственное</td>
<td>Администратор</td>
<td>«ВСЕГДА!»</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепневмомешковыколачивателев</td>
<td>Душистое</td>
<td>Юзверь</td>
<td>Нижняя</td>
</tr>
<tr>
<td>Ктулху</td>
<td>Втанк</td>
<td>ktulkhu@ad.ru</td>
<td>Патриарх</td>
<td>Яизм</td>
</tbody>
<tfoot class="table__footer">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</tfoot>
</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;div class=&quot;table-responsive-rotate&quot;&gt;</code>
<code class="html"> &lt;table&gt; &lt;!-- Можно с class=&quot;table&quot;, можно без. --&gt;</code>
<code class="html"> ...</code>
<code class="html"> &lt;/table&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">С неподвижными названиями</h2>
<p>Модификатор <code>table-responsive-rotate--thead-fix</code>, отдельный less-файл. Требует наличия <code>thead</code>, чтобы было что фиксировать.</p>
<p class="alert alert--danger">Требует дополнительной обёртки, см. код примера.</p>
<div class="table-responsive-rotate table-responsive-rotate--thead-fix">
<div class="table-responsive-rotate__inner">
<table class="table">
<caption>Таблица как БЭМ-блок, элементы имеют классы</caption>
<thead class="table__header">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Мыло</th>
<th>Статус</th>
<th>Политическая ориентация</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td>
<td>Хозяйственное</td>
<td>Администратор</td>
<td>«ВСЕГДА!»</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепневмомешковыколачивателев</td>
<td>Душистое</td>
<td>Юзверь</td>
<td>Нижняя</td>
</tr>
<tr>
<td>Ктулху</td>
<td>Втанк</td>
<td>ktulkhu@ad.ru</td>
<td>Патриарх</td>
<td>Яизм</td>
</tbody>
<tfoot class="table__footer">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</tfoot>
</table>
</div>
</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;div class=&quot;table-responsive-rotate table-responsive-rotate--thead-fix&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;table-responsive-rotate__inner&quot;&gt;</code>
<code class="html"> &lt;table&gt; &lt;!-- Можно с class=&quot;table&quot;, можно без. --&gt;</code>
<code class="html"> &lt;thead&gt;</code>
<code class="html"> ...</code>
<code class="html"> &lt;/thead&gt;</code>
<code class="html"> &lt;tbody&gt;</code>
<code class="html"> ...</code>
<code class="html"> &lt;/tbody&gt;</code>
<code class="html"> &lt;/table&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</section>
<h2 class="blocks-library__title" id="forms-all">Формы</h2> <h2 class="blocks-library__title" id="forms-all">Формы</h2>
......
src/less/style.less
View file @ 4a5a83dc
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
@import './src/blocks/table-responsive/table-responsive.less'; @import './src/blocks/table-responsive/table-responsive.less';
@import './src/blocks/table-responsive/table-responsive--horizontal.less'; @import './src/blocks/table-responsive/table-responsive--horizontal.less';
@import './src/blocks/table-responsive-scroll/table-responsive-scroll.less'; @import './src/blocks/table-responsive-scroll/table-responsive-scroll.less';
@import './src/blocks/table-responsive-rotate/table-responsive-rotate.less';
@import './src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less';
@import './src/blocks/field-text/field-text.less'; @import './src/blocks/field-text/field-text.less';
@import './src/blocks/field-text/field-text--lg.less'; @import './src/blocks/field-text/field-text--lg.less';
@import './src/blocks/field-text/field-text--sm.less'; @import './src/blocks/field-text/field-text--sm.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