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) { ...@@ -58,7 +58,7 @@ if(blockName) {
// Если это HTML // Если это HTML
else if(extention == '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 = ''; // fileCreateMsg = '';
} }
......
package.json
View file @ d2c21cf9
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
"label": [], "label": [],
"loader": [], "loader": [],
"table": [], "table": [],
"table-responsive": [] "table-responsive": [],
"table-mobile-scroll": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
...@@ -119,4 +120,4 @@ ...@@ -119,4 +120,4 @@
"svg4everybody": "^2.1.7", "svg4everybody": "^2.1.7",
"vinyl-buffer": "^1.0.0" "vinyl-buffer": "^1.0.0"
} }
} }
\ No newline at end of file
src/blocks-demo.html
View file @ d2c21cf9
...@@ -1215,73 +1215,77 @@ ...@@ -1215,73 +1215,77 @@
<h2 class="blocks-library__item-title">Таблицы</h2> <h2 class="blocks-library__item-title">Таблицы</h2>
<table class="table"> <div class="table-mobile-scroll">
<caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption> <table class="table">
<tbody> <caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
<tr> <tbody>
<th>Имя</th> <tr>
<th>Фамилия</th> <th>Имя</th>
<th>Мыло</th> <th>Фамилия</th>
<th>Статус</th> <th>Мыло</th>
<th>Политическая ориентация</th> <th>Статус</th>
</tr> <th>Политическая ориентация</th>
<tr> </tr>
<td>Иннокентий</td> <tr>
<td>Барлаухенштицкен-Ламанческий</td> <td>Иннокентий</td>
<td>Хозяйственное</td> <td>Барлаухенштицкен-Ламанческий</td>
<td>Администратор</td> <td>Хозяйственное</td>
<td>«ВСЕГДА!»</td> <td>Администратор</td>
</tr> <td>«ВСЕГДА!»</td>
<tr> </tr>
<td>Васисуалий</td> <tr>
<td>Пылепневмомешковыколачивателев</td> <td>Васисуалий</td>
<td>Душистое</td> <td>Пылепневмомешковыколачивателев</td>
<td>Юзверь</td> <td>Душистое</td>
<td>Нижняя</td> <td>Юзверь</td>
</tr> <td>Нижняя</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
<table class="table"> <div class="table-mobile-scroll">
<caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption> <table class="table">
<thead class="table__header"> <caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption>
<tr> <thead class="table__header">
<th>Имя</th> <tr>
<th>Фамилия</th> <th>Имя</th>
<th>Мыло</th> <th>Фамилия</th>
<th>Статус</th> <th>Мыло</th>
<th>Политическая ориентация</th> <th>Статус</th>
</tr> <th>Политическая ориентация</th>
</thead> </tr>
<tbody class="table__body"> </thead>
<tr> <tbody class="table__body">
<td>Иннокентий</td> <tr>
<td>Барлаухенштицкен-Ламанческий</td> <td>Иннокентий</td>
<td>Хозяйственное</td> <td>Барлаухенштицкен-Ламанческий</td>
<td>Администратор</td> <td>Хозяйственное</td>
<td>«ВСЕГДА!»</td> <td>Администратор</td>
</tr> <td>«ВСЕГДА!»</td>
<tr> </tr>
<td>Васисуалий</td> <tr>
<td>Пылепневмомешковыколачивателев</td> <td>Васисуалий</td>
<td>Душистое</td> <td>Пылепневмомешковыколачивателев</td>
<td>Юзверь</td> <td>Душистое</td>
<td>Нижняя</td> <td>Юзверь</td>
</tr> <td>Нижняя</td>
<tr> </tr>
<td>Ктулху</td> <tr>
<td>Втанк</td> <td>Ктулху</td>
<td>ktulkhu@ad.ru</td> <td>Втанк</td>
<td>Патриарх</td> <td>ktulkhu@ad.ru</td>
<td>Яизм</td> <td>Патриарх</td>
</tr> <td>Яизм</td>
</tbody> </tr>
<tfoot class="table__footer"> </tbody>
<tr> <tfoot class="table__footer">
<td colspan="5">Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи.</td> <tr>
</tr> <td colspan="5">Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи.</td>
</tfoot> </tr>
</table> </tfoot>
</table>
</div>
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
...@@ -1321,6 +1325,55 @@ ...@@ -1321,6 +1325,55 @@
</section> </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"> <section class="blocks-library__item" id="table-responsive" data-name=".table-responsive">
<h2 class="blocks-library__item-title">Адаптивность для таблиц</h2> <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