Skip to content

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

Добавил несколько портированных блоков

parent 97251dd6
Hide whitespace changes
Inline Side-by-side
Showing with 525 additions and 332 deletions
gulpfile.js
View file @ b1ba9f6e
......@@ -29,7 +29,6 @@ const newer = require('gulp-newer');
let projectConfig = require('./projectConfig.json');
let dirs = projectConfig.dirs;
let lists = getFilesList(projectConfig);
let mainMenu = projectConfig.menu;
// console.log(lists);
// Получение адреса репозитория
......@@ -396,7 +395,6 @@ gulp.task('html', function() {
gulp.task('pug', function() {
const pug = require('gulp-pug');
const htmlbeautify = require('gulp-html-beautify');
const mainMenu = require(dirs.srcPath + dirs.blocksDirName + '/main-nav/main-nav.json');
console.log('---------- сборка Pug');
// Pug-фильтр, выводящий содержимое pug-файла в виде форматированного текста
......@@ -419,7 +417,6 @@ gulp.task('pug', function() {
.pipe(pug({
data: {
repoUrl: repoUrl, // передаем pug-у адрес репозитория проекта
mainMenu: mainMenu, // передаем pug-у объект с главным меню сайта
},
filters: {
'show-code': filterShowCode
......
projectConfig.json
View file @ b1ba9f6e
......@@ -41,7 +41,6 @@
"loader": [],
"table": [],
"table-responsive": [],
"table-mobile-scroll": [],
"owl-carousel": [],
"swipe": [],
"pagination": [],
......
src/blocks-library.pug
View file @ b1ba9f6e
......@@ -197,6 +197,7 @@ block content
helpText: 'Подсказка под полем',
isTextarea: true,
mods: '',
val: 'Текст внутри',
attrs: {
name: 'test',
placeholder: 'Подсказка',
......@@ -206,6 +207,9 @@ block content
title: 'Текстовое поле',
helpText: 'Описание ошибки',
mods: 'error',
attrs: {
placeholder: 'Подсказка',
}
})
+field-text()
+block-lib-code()
......@@ -403,6 +407,138 @@ block content
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-select/field-select.pug
+block-lib('field-actions', 'Кнопки формы', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-actions/readme.md
+field-actions('* — обязательные поля')
+btn('Отправить')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-actions/field-actions.pug
+block-lib('fields-group', 'Группа полей', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/fields-group/readme.md
+fields-group()
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Логин'
}
})
+field-text({
helpText: 'Подсказка',
attrs: {
type: 'password',
placeholder: 'Пароль',
},
})
+field-actions()
+btn('Отправить', 'primary')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/fields-group/fields-group.pug
+block-lib('form', 'Форма', true)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/form/readme.md
+form()
+fieldset('Название1')
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
+fieldset('Название2')
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
+field-actions()
+btn('Отправить', 'primary')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/form/form.pug
+block-lib('label', 'Лейбл', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/label/readme.md
+label('Текст1')
+label('Текст2', '', 'div')
+label('Текст3', '', 'a')(href="/")
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/label/label.pug
+block-lib('loader', 'Загрузчик', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/loader/readme.md
+loader()
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/loader/loader.pug
+block-lib('table', 'Таблица', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/table/readme.md
+table()
caption Таблица
tr
th Имя
th Фамилия
th Мыло
th Статус
th Политическая ориентация
tr
td Иннокентий
td Иванов
td Хозяйственное
td Администратор
td «ВСЕГДА!»
tr
td Васисуалий
td Римский-Корсаков
td Душистое
td Пользователь
td Нижняя
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/table/table.pug
+block-lib('table-responsive', 'Адаптивная таблица', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/table-responsive/readme.md
+table-responsive()
caption Таблица
thead
tr
th Имя и фамилия
th Тип мироощущения
tbody
tr
td(data-label='Имя и фамилия') Анатоле Вассерман
td(data-label='Тип мироощущения') Девственность
tr
td(data-label='Имя и фамилия') Джакомо Казанова
td(data-label='Тип мироощущения') Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/table-responsive/table-responsive.pug
+block-lib('pagination', 'Пагинация', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/pagination/readme.md
+pagination()
+pagination-item('1', '/1')
+pagination-item('...')
+pagination-item('4', '/4')
+pagination-item('5', '/5', true)
+pagination-item('6', '/6')
+pagination-item('...')
+pagination-item('999', '/999')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/pagination/pagination.pug
.burger.blocks-library__menu-toggler(data-toggle="off-canvas")
......
src/blocks/field-actions/field-actions.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-actions/field-actions.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-actions">
<div class="field-actions__text">* — обязательные поля</div>
<button class="btn">Отправить</button>
</div>
-->
src/blocks/field-actions/field-actions.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (field-actions)
mixin field-actions(text, mods)
//- Принимает:
//- text: '' {string} - текст пояснения
//- mods: '' {string} - модификаторы блока
//- Вызов:
+field-actions('* — обязательные поля', 'some-mod')
p КнопкиТут
-
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-actions--' + modsList[i].trim();
}
}
.field-actions(class=allMods)&attributes(attributes)
if(typeof(text) !== 'undefined' && text)
.field-actions__text!= text
block
src/blocks/field-actions/field-actions.scss
View file @ b1ba9f6e
......@@ -16,10 +16,6 @@ $line-height: 1.375em !default;
margin-top: $line-height;
margin-bottom: ($line-height / 2);
.btn {
margin-bottom: ($line-height / 2);
}
&__text {
display: block;
margin-top: ($line-height / 2);
......
src/blocks/field-checkbox/field-checkbox.pug
View file @ b1ba9f6e
......@@ -4,15 +4,12 @@ mixin field-checkbox(checkboxes, title)
//- Принимает:
//- checkboxes {array}
//- {
//- {object}
//- title: '' {string} - текст рядом с чекбоксом
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы обертки чекбокса
//- attrs: { {object} - любые атрибуты для input
//- attrs: {object} - любые атрибуты для input
//- name: {string}
//- ...
//- }
//- },
//- ...
//- Вызов:
+field-checkbox([
......
src/blocks/field-file/field-file.pug
View file @ b1ba9f6e
......@@ -3,20 +3,16 @@
mixin field-file(props)
//- Принимает:
//- props {
//- props {object}
//- title: '' {string} - текст с названием (выводится над полем)
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input
//- attrs: {object} - любые атрибуты для input
//- name: {string}
//- ...
//- },
//- text: { {object} - тексты
//- text: {object} - тексты
//- selectText: {string} - текст на кнопке «выберите файл(ы)»
//- nothingText: {string} - текст, показываемый, пока ничего не выбрано
//- flesSelectedText: {string} - текст, показываемый, если выбрано более одного файла («файлов выбрано: 2»)
//- },
//- }
//- Вызов:
+field-file({
title: 'Название',
......
src/blocks/field-radio/field-radio.pug
View file @ b1ba9f6e
......@@ -4,16 +4,13 @@ mixin field-radio(radiobuttons, title)
//- Принимает:
//- radiobuttons {array}
//- {
//- {object}
//- title: '' {string} - текст рядом с радиокнопкой
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы обертки радиокнопки
//- attrs: { {object} - любые атрибуты для input
//- attrs: {object} - любые атрибуты для input
//- name: {string}
//- ...
//- }
//- },
//- ...
//- Вызов:
+field-radio([
{
......
src/blocks/field-range/field-range.pug
View file @ b1ba9f6e
......@@ -3,15 +3,12 @@
mixin field-range(props)
//- Принимает:
//- props {
//- props {object}
//- title: '' {string} - текст с названием (выводится над полем)
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input
//- attrs: {object} - любые атрибуты для input
//- name: {string}
//- ...
//- }
//- }
//- Вызов:
+field-range({
title: 'Название',
......@@ -22,7 +19,7 @@ mixin field-range(props)
min: '1',
max: '100',
step: '1',
value: '40'
value: '40',
}
})
......
src/blocks/field-select/field-select.pug
View file @ b1ba9f6e
......@@ -3,28 +3,28 @@
mixin field-select(title, attrs, options, helpText, mods)
//- Принимает:
//- title: '' {string} - название селекта
//- attrs: {object} - атрибуты селекта
//- name: '' {string}
//- title: '' {string} - название селекта
//- attrs: {object} - атрибуты селекта
//- name: '' {string}
//- options {array}
//- {object}
//- title: '' {string} - текст пункта
//- attrs: {object} - любые атрибуты пункта
//- value: {string}
//- title: '' {string} - текст пункта
//- attrs: {object} - любые атрибуты пункта
//- value: {string}
//- {object}
//- attrs: {object} - любые атрибуты пункта
//- label: {string}
//- child: {array} - потомки (если есть этот элемент, то его родитель — optgroup)
//- attrs: {object} - любые атрибуты пункта
//- label: {string}
//- child: {array} - потомки (если есть этот элемент, то его родитель — optgroup)
//- {object}
//- title: '' {string}
//- attrs: {object}
//- value: {string}
//- {object}
//- title: '' {string} - текст пункта
//- attrs: {object} - любые атрибуты пункта
//- value: {string}
//- helpText: '' {string} - текст подсказки
//- mods: '' {string} - модификаторы блока
//- title: '' {string} - текст пункта
//- attrs: {object} - любые атрибуты пункта
//- value: {string}
//- helpText: '' {string} - текст подсказки
//- mods: '' {string} - модификаторы блока
//- Вызов:
+field-select(
'Название',
......@@ -34,13 +34,13 @@ mixin field-select(title, attrs, options, helpText, mods)
},
[
{
title: 'Опция',
title: 'Опция1',
attrs: {
value: '',
}
},
{
title: 'Опция',
title: 'Опция2',
attrs: {
value: '',
}
......@@ -76,7 +76,7 @@ mixin field-select(title, attrs, options, helpText, mods)
]
},
{
title: 'Опция',
title: 'Опция3',
attrs: {
value: 'val03',
}
......
src/blocks/field-text/field-text.pug
View file @ b1ba9f6e
......@@ -8,18 +8,17 @@ mixin field-text(props)
//- isTextarea: false {bool} - флаг input/textarea
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input/textarea
//- val: '' {string} - текст в поле
//- attrs: {object} - любые атрибуты для input/textarea
//- type: {string}
//- placeholder: {string}
//- ...
//- }
//- }
//- Вызов:
+field-text({
title: 'Название',
isTextarea: true,
helpText: 'Подсказка',
mods: '',
val: '',
attrs: {
name: 'comment',
}
......@@ -42,11 +41,11 @@ mixin field-text(props)
span.field-text__name!= props.title
span.field-text__input-wrap
if(typeof(props.isTextarea) !== 'undefined' && props.isTextarea)
textarea.field-text__input(
)&attributes(props.attrs)
textarea.field-text__input&attributes(props.attrs)= props.val
else
input.field-text__input(
type=(typeof(props.attrs) !== 'undefined' && props.attrs.type) ? props.attrs.type : 'text'
value=props.val
)&attributes(props.attrs)
if(typeof(props.helpText) !== 'undefined' && props.helpText)
span.field-text__help-text!= props.helpText
......
src/blocks/field-toggler/field-toggler.pug
View file @ b1ba9f6e
......@@ -4,17 +4,15 @@ mixin field-toggler(togglers, title, isRadio)
//- Принимает:
//- togglers {array}
//- {
//- {object}
//- title: '' {string} - текст рядом с переключателем
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы обёртки переключателя
//- attrs: { {object} - любые атрибуты для input
//- attrs: {object} - любые атрибуты для input
//- name: {string}
//- ...
//- },
//- isRadio: false {bool} - флаг «это радиокнопки, а не чекбоксы»
//- },
//- ...
//- title: '' {string} - общее название группы переключателей
//- isRadio: false {bool} - флаг «это радиокнопки, а не чекбоксы»
//- Вызов:
+field-toggler([
{
......
src/blocks/fields-group/fields-group.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/fields-group/fields-group.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="fields-group">content</div>
-->
src/blocks/fields-group/fields-group.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (fields-group)
mixin fields-group(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+fields-group()
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Логин'
}
})
+field-text({
attrs: {
type: 'password',
placeholder: 'Пароль'
},
})
+field-actions()
+btn('Отправить', 'primary')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' fields-group--' + modsList[i].trim();
}
}
.fields-group(class=allMods)&attributes(attributes)
block
src/blocks/form/form.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/form/form.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<form action="" class="form">
<fieldset>
<legend>Название формы</legend>
<label class="field-text">...</label>
<div class="field-actions">...</div>
</fieldset>
</form>
-->
src/blocks/form/form.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (form)
//- ВНИМАНИЕ: в файле две примеси
mixin form(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+form('mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' form--' + modsList[i].trim();
}
}
form.form(class=allMods)&attributes(attributes)
block
mixin fieldset(legend, mods)
//- Принимает:
//- legend {string} - название группы полей
//- mods {string} - список модификаторов
//- Вызов:
+form('mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' form--' + modsList[i].trim();
}
}
fieldset.form__fieldset(class=allMods)&attributes(attributes)
legend.form__legend!= legend
block
src/blocks/label/label.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/label/label.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="label">Метка-<code>div</code></div>
<span class="label">Метка-<code>span</code></span>
<a href="" class="label">Метка-<code>a</code></a>
-->
src/blocks/label/label.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (label)
mixin label(text, mods, tag)
//- Принимает:
//- text {string} - текст кнопки
//- mods {string} - список модификаторов
//- tag {string} - тег (если не span)
//- Вызов:
+label('Лейбл')
+label('Лейбл', 'danger', 'div')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' label--' + modsList[i].trim();
}
}
if(typeof(tag) !== 'undefined' && tag)
#{tag}.label(class=allMods)&attributes(attributes)!= text
block
else
span.label(class=allMods)&attributes(attributes)!= text
src/blocks/loader/img_to_bg/loader.svg deleted 100644 → 0
View file @ 97251dd6
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M15 0A15 15 0 0 0 0 15a15 15 0 0 0 15 15 15 15 0 0 0 15-15h-1.707c0 3.48-1.432 6.938-3.893 9.398-2.46 2.46-5.92 3.895-9.4 3.895-3.48 0-6.94-1.434-9.4-3.895C3.14 21.938 1.707 18.48 1.707 15c0-3.48 1.432-6.94 3.893-9.4 2.46-2.46 5.92-3.893 9.4-3.893V0z" fill="#f2f2f2"/><path d="M15 0v1.707c3.48 0 6.94 1.432 9.4 3.893 2.46 2.46 3.893 5.92 3.893 9.4H30A15 15 0 0 0 15 0z" fill="#e6e6e6"/></svg>
src/blocks/loader/loader.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/loader/loader.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<span class="loader"></span>
-->
src/blocks/loader/loader.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (loader)
mixin loader(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+loader()
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' loader--' + modsList[i].trim();
}
}
span.loader(class=allMods)&attributes(attributes)
src/blocks/loader/loader.scss
View file @ b1ba9f6e
......@@ -14,8 +14,8 @@ $gray-lightest: hsl(0, 0%, 90%) !default;
&:before {
content: '';
display: block;
width: 1em;
height: 1em;
width: 3em;
height: 3em;
border: 3px solid $gray-lightest;
border-top: 3px solid $gray-lighter;
border-radius: 50%;
......
src/blocks/main-nav/main-nav.json → src/blocks/main-nav/main-nav.data.pug
View file @ b1ba9f6e
{
"menu": [
-
var mainMenu = [
{
"id": "1",
"name": "Главная страница",
"name": "Главная ст1раница",
"url": "/"
},
{
......@@ -44,5 +44,4 @@
"name": "Контакты автора",
"url": "http://nicothin.pro/"
}
]
}
];
src/blocks/main-nav/main-nav.pug
View file @ b1ba9f6e
......@@ -3,14 +3,16 @@
mixin main-nav(selectedID)
//- Принимает:
//- selectedID {string} - id пункта меню ( по умолчанию — из main-nav.json)
//- selectedID {string} - id пункта меню (по умолчанию — из main-nav.data.pug)
//- Вызов:
+main-nav('1')
include main-nav.data.pug
nav.main-nav#nav&attributes(attributes)
+burger('Показать главное меню', 'nav', 'main-nav--open')(class="main-nav__toggler")
ul.main-nav__list
each menuItem in mainMenu.menu
each menuItem in mainMenu
li(class= selectedID == menuItem.id ? 'main-nav__item main-nav__item--active' : 'main-nav__item')
a.main-nav__link(href=menuItem.url)= menuItem.name
if (typeof(menuItem.childs) !== 'undefined' && menuItem.childs)
......
src/blocks/pagination/pagination.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/pagination/pagination.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="pagination">
<a href="" class="pagination__item">1</a>
<span class="pagination__item">...</span>
<a href="" class="pagination__item">5</a>
<a href="" class="pagination__item pagination__item--active">6</a>
<a href="" class="pagination__item">123</a>
<span class="pagination__item">...</span>
<a href="" class="pagination__item">999</a>
</div>
-->
src/blocks/pagination/pagination.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (pagination)
mixin pagination(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+pagination()
+pagination-item('1', '/1')
+pagination-item('...')
+pagination-item('4', '/4')
+pagination-item('5', '/5', true)
+pagination-item('6', '/6')
+pagination-item('...')
+pagination-item('999', '/999')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' pagination--' + modsList[i].trim();
}
}
div.pagination(class=allMods, aria-label="Page navigation")&attributes(attributes)
block
mixin pagination-item(text, href, active)
//- Принимает:
//- text {string} - содержимое пункта
//- href {string} - ссылка этого пункта (если пустая, то это не ссылка, а span)
//- active {bool} - флаг «это активный пункт»
-
// список модификаторов
var activeMod = '';
if(typeof(active) !== 'undefined' && active) {
activeMod = ' pagination--active';
}
if(typeof(href) !== 'undefined' && href)
a.pagination__item(class=activeMod, href=href)&attributes(attributes)!= text
else
span.pagination__item(class=activeMod)&attributes(attributes)!= text
src/blocks/table-mobile-scroll/table-mobile-scroll.html deleted 100644 → 0
View file @ 97251dd6
<!--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 deleted 100644 → 0
View file @ 97251dd6
// В этом файле должны быть стили для БЭМ-блока table-mobile-scroll, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default;
$border-color: hsl(0, 0%, 60%) !default;
.table-mobile-scroll {
$block-name: &; // #{$block-name}__element
display: block;
width: 100%;
overflow-x: auto;
margin-top: $line-height;
margin-bottom: $line-height;
border: 1px solid $border-color;
table {
margin: 0;
border: 0 !important; // stylelint-disable-line declaration-no-important
width: 100%;
}
tbody,
thead,
tfoot {
&:last-child {
tr:last-child {
// stylelint-disable max-nesting-depth, selector-max-compound-selectors
td,
th {
border-bottom: 0;
}
// stylelint-enable
}
}
}
caption {
text-align: left;
padding: 0.4em;
border-bottom: 1px solid $border-color;
caption-side: top;
}
}
src/blocks/table-responsive/readme.md 0 → 100644
View file @ b1ba9f6e
<p class="alert alert--warning">Требует добавления атрибутов <code>data-label</code> для каждой ячейки, написания <code>thead</code> и <code>tbody</code>, хорошо работает только при горизонтальном расположении заголовочных ячеек.</p>
src/blocks/table-responsive/table-responsive.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
<table class="table-responsive">
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип мироощущения</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип мироощущения">Девственность</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
</tr>
</tbody>
</table>
-->
src/blocks/table-responsive/table-responsive.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (table-responsive)
mixin table-responsive(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+table-responsive()
thead
tr
th Имя и фамилия
th Тип мироощущения
tbody
tr
td(data-label='Имя и фамилия') Анатоле Вассерман
td(data-label='Тип мироощущения') Девственность
tr
td(data-label='Имя и фамилия') Джакомо Казанова
td(data-label='Тип мироощущения') Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' table-responsive--' + modsList[i].trim();
}
}
table.table-responsive(class=allMods)&attributes(attributes)
block
src/blocks/table-responsive/table-responsive.scss
View file @ b1ba9f6e
......@@ -15,17 +15,48 @@ $screen-xxl: 1800px !default;
.table-responsive {
$block-name: &;
// #{$block-name}__element
$block-name: &; // #{$block-name}__element
margin-top: $line-height;
margin-bottom: $line-height;
border-collapse: collapse;
border: 0;
border-top: 1px solid $border-color;
border-left: 1px solid $border-color;
width: 100%;
caption {
caption-side: top;
text-align: left;
padding: 0.4em $field-padding-horizontal;
border: 1px solid $border-color;
border-bottom: 0;
font-size: $font-size--small;
line-height: 1em;
color: $text-color--muted;
}
td,
th {
padding: $field-padding-vertical $field-padding-horizontal;
vertical-align: top;
border-bottom: 1px solid $border-color;
&:not(:first-child) {
border-left: 1px solid $border-color;
}
}
th {
text-align: left;
}
@media (max-width: ($screen-md - 1)) {
display: block;
border: 0;
caption {
display: block;
width: 100%;
text-align: left;
display: none;
}
thead {
......
src/blocks/table/readme.md 0 → 100644
View file @ b1ba9f6e
На малых ширинах таблица сжимается, а когда перестаёт помещаться по ширине, появляется горизонтальный скролл.
src/blocks/table/table.html deleted 100644 → 0
View file @ 97251dd6
<!--DEV
<table class="table">
<caption>Таблица</caption>
<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>
<tfoot class="table__footer">
<tr>
<td colspan="2">Итого:</td>
</tr>
</tfoot>
</table>
-->
src/blocks/table/table.pug 0 → 100644
View file @ b1ba9f6e
//- Все примеси в этом файле должны начинаться c имени блока (table)
mixin table(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+table()
tr
th Имя
th Фамилия
th Мыло
tr
td Иннокентий
td Иванов
td Хозяйственное
tr
td Васисуалий
td Римский-Корсаков
td Душистое
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' table--' + modsList[i].trim();
}
}
.table(class=allMods)&attributes(attributes)
table
block
src/blocks/table/table.scss
View file @ b1ba9f6e
// В этом файле должны быть стили для БЭМ-блока table, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
$text-color--muted: hsl(0, 0%, 50%) !default;
$border-color: hsl(0, 0%, 60%) !default;
......@@ -19,18 +17,18 @@ $field-padding-horizontal: 0.7em !default;
$block-name: &; // #{$block-name}__element
border-collapse: collapse;
display: block;
width: 100%;
overflow-x: auto;
margin-top: $line-height;
margin-bottom: $line-height;
border: 1px solid $border-color;
margin: $line-height 0;
caption {
padding-top: 0.4em;
text-align: right;
caption-side: bottom;
font-size: $font-size--small;
line-height: 1em;
color: $text-color--muted;
table {
margin: 0;
border: 0;
border-collapse: collapse;
width: 100%;
}
td,
......@@ -48,9 +46,31 @@ $field-padding-horizontal: 0.7em !default;
text-align: left;
}
&__header {}
tbody,
thead,
tfoot {
&:last-child {
&__body {}
tr:last-child {
// stylelint-disable max-nesting-depth, selector-max-compound-selectors
td,
th {
border-bottom: 0;
}
// stylelint-enable
}
}
}
&__footer {}
caption {
caption-side: top;
text-align: left;
padding: 0.4em $field-padding-horizontal;
border-bottom: 1px solid $border-color;
font-size: $font-size--small;
line-height: 1em;
color: $text-color--muted;
}
}
src/blocks/typo/typo.scss
View file @ b1ba9f6e
......@@ -214,7 +214,7 @@ samp {
code {
padding: 0.06em 0.3em;
color: $text-color;
background-color: $gray-lightest;
background-color: rgba(#000, 0.08);
border-radius: $border-radius;
}
......
src/pug/mixins.pug
View file @ b1ba9f6e
......@@ -15,3 +15,11 @@ include ../blocks/field-toggler/field-toggler.pug
include ../blocks/field-file/field-file.pug
include ../blocks/field-range/field-range.pug
include ../blocks/field-select/field-select.pug
include ../blocks/field-actions/field-actions.pug
include ../blocks/fields-group/fields-group.pug
include ../blocks/form/form.pug
include ../blocks/label/label.pug
include ../blocks/loader/loader.pug
include ../blocks/table/table.pug
include ../blocks/table-responsive/table-responsive.pug
include ../blocks/pagination/pagination.pug
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