Комменты, тултипы, детектирование мобильных: допилил pug

src/blocks-library.pug

@@ -586,11 +586,41 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/comment/comment.pug
 
-  //- +block-lib('embed-responsive', 'Адаптирующийся медиаконтент', false)
-  //-   include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/embed-responsive/readme.md
-  //-   div 111
-  //-   +block-lib-code()
-  //-     include:show-code(first-line="//- Pug-файл этого блока:") blocks/embed-responsive/embed-responsive.pug
+  +block-lib('embed-responsive', 'Адаптирующийся медиаконтент', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/embed-responsive/readme.md
+    style.
+      @media (min-width: 768px) {
+        .embed-responsive-demo {
+          display: flex;
+        }
+        .embed-responsive-demo__item {
+          flex-basis: 50%;
+        }
+        .embed-responsive-demo__item:first-child {
+          padding-right: 5px;
+        }
+        .embed-responsive-demo__item:last-child {
+          padding-left: 5px;
+        }
+      }
+    div.embed-responsive-demo
+      div.embed-responsive-demo__item
+        +embed-responsive('4-3')
+          iframe(src='https://www.youtube.com/embed/7pOr3dBFAeY', frameborder='0', allowfullscreen='')
+      div.embed-responsive-demo__item
+        +embed-responsive()
+          iframe(src='https://www.youtube.com/embed/B0Q1rKpDNE4', frameborder='0', allowfullscreen='')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/embed-responsive/embed-responsive.pug
+
+  +block-lib('tooltip', 'Подсказки', true)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/tooltip/readme.md
+    p Текст и подсказка: #[+tooltip('Текст подсказки может быть длинным. Хочется, чтобы <em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>.')]
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/tooltip/tooltip.pug
+
+  +block-lib('is-mobile', 'Определение мобильного устройства', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/is-mobile/readme.md
 
 
 

src/blocks/comment/comment.pug

@@ -14,8 +14,13 @@ mixin comment(props)
           username: 'Джокер',
           avatarURL: 'img/joker.jpg',
           authorURL: '/users/joker',
+          content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
           mods: 'admin',
         })
+          +comment({
+            username: 'Докер',
+            content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+          })
 
   -
     // список модификаторов

src/blocks/comment/comment.scss

@@ -9,12 +9,15 @@
   margin-top: $line-height;
   margin-bottom: $line-height;
 
-  & & {
-    padding-left: calc(60px + 1em);
-  }
+  @media (min-width: $screen-md) {
+
+    & & {
+      padding-left: calc(60px + 1em);
+    }
 
-  & & & & {
-    padding-left: 0;
+    & & & & {
+      padding-left: 0;
+    }
   }
 
   &__inner {

src/blocks/embed-responsive/embed-responsive.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/embed-responsive/embed-responsive.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<div class="embed-responsive  embed-responsive--16-9">
-  <iframe src="https://www.youtube.com/embed/HNpLuXOg7xQ" frameborder="0" allowfullscreen></iframe>
-</div>
-
--->

src/blocks/embed-responsive/embed-responsive.pug

+//- Все примеси в этом файле должны начинаться c имени блока (embed-responsive)
+
+mixin embed-responsive(mods)
+
+  //- Принимает:
+  //-   mods    {string} - список модификаторов
+  //- Вызов:
+        +embed-responsive()
+          iframe(src='https://www.youtube.com/embed/B0Q1rKpDNE4', frameborder='0', allowfullscreen='')
+        +embed-responsive('4-3')
+          iframe(src='https://www.youtube.com/embed/7pOr3dBFAeY', frameborder='0', allowfullscreen='')
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' embed-responsive--' + modsList[i].trim();
+      }
+    }
+
+  .embed-responsive(class=allMods)&attributes(attributes)
+    block

src/blocks/embed-responsive/embed-responsive.scss

@@ -6,6 +6,8 @@
   position: relative;
   display: block;
   width: 100%;
+  margin-top: $line-height;
+  margin-bottom: $line-height;
   padding: 0;
   overflow: hidden;
 

src/blocks/embed-responsive/readme.md

+По умолчанию предназначен для встраивания роликов 16:9. C модификатором позволяет встраивать ролики 4:3.

src/blocks/is-mobile/readme.md

+JavaScript, добавляющий на `<html>` классы `is-mobile`, если страница открыта с мобильного устройства (см. в devtools с эмуляцией). Должен быть вставлен в `<head>`.
+
+Зависит от [isMobile](https://github.com/kaimallea/isMobile). Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.

src/blocks/tooltip/tooltip.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/tooltip/tooltip.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<div class="tooltip">content</div>
-
--->

src/blocks/tooltip/tooltip.pug

+//- Все примеси в этом файле должны начинаться c имени блока (tooltip)
+
+mixin tooltip(text, mods)
+
+  //- Принимает:
+  //-   text    {string} - текст
+  //-   mods    {string} - список модификаторов
+  //- Вызов:
+        +tooltip('Текст подсказки')
+        p Текст и подсказка: #[+tooltip('<em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>')]
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' tooltip--' + modsList[i].trim();
+      }
+    }
+
+  span.tooltip(class=allMods)&attributes(attributes)
+    button.tooltip__btn(type='button', aria-label='more info', data-tooltip-content!=text) Подсказка

src/pug/layout.pug

@@ -16,6 +16,8 @@ html(class="no-js  page", lang="ru")
       link(rel="stylesheet", href="css/style.min.css")
       script.
         document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
+      script
+        include ../blocks/is-mobile/is-mobile--to-head.js
 
   body
 

src/pug/mixins.pug

@@ -27,4 +27,5 @@ include ../blocks/breadcrumbs/breadcrumbs.pug
 include ../blocks/progress/progress.pug
 include ../blocks/pie-chart/pie-chart.pug
 include ../blocks/comment/comment.pug
-//- include ../blocks/comments/comments.pug
+include ../blocks/embed-responsive/embed-responsive.pug
+include ../blocks/tooltip/tooltip.pug