Skip to content

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

Таблицы со скроллом на малых вьюпортах

parent 7d3f2205
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 69 deletions
createBlock.js
View file @ d2c21cf9
......@@ -58,7 +58,7 @@ if(blockName) {
// Если это HTML
else if(extention == 'html') {
fileContent = '<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include-->\n\n<div class="' + blockName + '">content</div>\n';
fileContent = '<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include\n\n-->\n\n<div class="' + blockName + '">content</div>\n';
// fileCreateMsg = '';
}
......
package.json
View file @ d2c21cf9
......@@ -40,7 +40,8 @@
"label": [],
"loader": [],
"table": [],
"table-responsive": []
"table-responsive": [],
"table-mobile-scroll": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......@@ -119,4 +120,4 @@
"svg4everybody": "^2.1.7",
"vinyl-buffer": "^1.0.0"
}
}
}
\ No newline at end of file
src/blocks-demo.html
View file @ d2c21cf9
......@@ -1215,73 +1215,77 @@
<h2 class="blocks-library__item-title">Таблицы</h2>
<table class="table">
<caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
<tbody>
<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>
</tbody>
</table>
<div class="table-mobile-scroll">
<table class="table">
<caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
<tbody>
<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>
</tbody>
</table>
</div>
<table class="table">
<caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</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>
</tr>
</tbody>
<tfoot class="table__footer">
<tr>
<td colspan="5">Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи.</td>
</tr>
</tfoot>
</table>
<div class="table-mobile-scroll">
<table class="table">
<caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</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>
</tr>
</tbody>
<tfoot class="table__footer">
<tr>
<td colspan="5">Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи.</td>
</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>
......@@ -1321,6 +1325,55 @@
</section>
<section class="blocks-library__item" id="table-mobile-scroll" data-name=".table-mobile-scroll">
<h2 class="blocks-library__item-title">Таблицы со скроллом на малых вьюпортах</h2>
<div class="table-mobile-scroll">
<table class="table">
<tbody>
<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>
</tbody>
</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 class="code">
<code>&lt;div class="table-mobile-scroll"></code>
<code> &lt;table class="table"></code>
<code> ...</code>
<code> &lt;/table></code>
<code>&lt;/div></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="table-responsive" data-name=".table-responsive">
<h2 class="blocks-library__item-title">Адаптивность для таблиц</h2>
......
src/blocks/table-mobile-scroll/table-mobile-scroll.html 0 → 100644
View file @ d2c21cf9
<!--DEV
<div class="table-mobile-scroll">
<table class="table">
<caption>Таблица</caption>
<tbody>
<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>
</tbody>
</table>
</div>
-->
src/blocks/table-mobile-scroll/table-mobile-scroll.scss 0 → 100644
View file @ d2c21cf9
// В этом файле должны быть стили только для БЭМ-блока table-mobile-scroll, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.table-mobile-scroll {
display: block;
width: 100%;
overflow-x: auto;
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
border: 1px solid $border-color;
table {
margin: 0;
border: 0 !important;
width: 100%;
}
tbody,
thead,
tfoot {
&:last-child {
tr:last-child {
td,
th {
border-bottom: 0;
}
}
}
}
caption {
text-align: left;
padding: 0.4em;
border-bottom: 1px solid $border-color;
caption-side: top;
}
}
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