urfu-2015 · DudaGod · Apr 22, 2016 · May 2, 2016
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end-of-line = lf
+indent-size = 4
+indent-style = space
+insert-final-new-line = true
+trim-trailing-whitespace = true
+
+[*.md]
+trim-trailing-whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.git
+.idea
+node_modules
+npm-debug.log
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - stable
diff --git a/blocks/modal-overlay/modal-overlay.styl b/blocks/modal-overlay/modal-overlay.styl
@@ -0,0 +1,11 @@
+.modal-overlay {
+  position: absolute;
+  left: -100%;
+  top: 0;
+  width: 300%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  visibility: hidden;
+  opacity: 0;
+  transition: all .5s ease-in-out .2s;
+}
diff --git a/blocks/page/_view/page_view_error.bemtree.js b/blocks/page/_view/page_view_error.bemtree.js
@@ -0,0 +1,3 @@
+block('page').mod('view', 'error').content()(function() {
+    return 'error';
+});
diff --git a/blocks/page/_view/page_view_index.bemtree.js b/blocks/page/_view/page_view_index.bemtree.js
@@ -0,0 +1,46 @@
+block('page').mod('view', 'index').replace()(function() {
+    var ctx = this.ctx;
+
+    return [
+        '<!DOCTYPE html>',
+        {
+            tag: 'html',
+            attrs: {
+                lang: 'ru'
+            },
+            content: [
+                {
+                    tag: 'head',
+                    content: [
+                        {
+                            tag: 'meta',
+                            attrs: {
+                                charset: 'utf-8'
+                            }
+                        },
+                        {
+                            tag: 'title',
+                            content: ctx.title
+                        },
+                        ctx.styles.map(function(style) {
+                            return {
+                                tag: 'link',
+                                attrs: {
+                                    rel: 'stylesheet',
+                                    href: style.url
+                                }
+                            };
+                        })
+                    ]
+                },
+                {
+                    tag: 'body',
+                    cls: 'page page_view_index',
+                    content: {
+                        block: 'wrapper'
+                    }
+                }
+            ]
+        }
+    ];
+});
diff --git a/blocks/page/_view/page_view_index.deps.js b/blocks/page/_view/page_view_index.deps.js
@@ -0,0 +1,3 @@
+({
+    shouldDeps: { block: 'wrapper' }
+})
diff --git a/blocks/page/page.deps.js b/blocks/page/page.deps.js
@@ -0,0 +1,12 @@
+({
+    shouldDeps: [
+        {
+            mods: {
+                view: [
+                    'index',
+                    'error'
+                ]
+            }
+        }
+    ]
+})
diff --git a/blocks/page/page.styl b/blocks/page/page.styl
@@ -0,0 +1,30 @@
+html
+{
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after
+{
+  box-sizing: inherit;
+}
+
+.page
+{
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  font-family: 'Noto Sans', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: #000;
+  display: flex;
+  justify-content: center;
+  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%),
+    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 50%);
+  background-size: 50px 50px;
+}
diff --git a/blocks/radio/_view/radio_view_hidden.styl b/blocks/radio/_view/radio_view_hidden.styl
@@ -0,0 +1,4 @@
+.radio_view_hidden
+{
+  display: none;
+}
diff --git a/blocks/radio/radio.bemhtml.js b/blocks/radio/radio.bemhtml.js
@@ -0,0 +1,23 @@
+block('radio')(
+    tag()('input'),
+    attrs()({type: 'radio'}),
+
+    mod('type', 'vegetable').replace()(function() {
+        var content = this.ctx.content;
+
+        var midElem = Math.ceil(content.length / 2);
+        var res;
+        return content.map((item, i) => {
+            res = {
+                block: 'radio',
+                mods: {view: 'hidden'},
+                attrs: {id: item.id, name: 'vegetable'}
+            };
+
+            if (midElem === i + 1) {
+                res.attrs.checked = '';
+            }
+            return res;
+        });
+    })
+);
diff --git a/blocks/recipe/__close/recipe__close.bemhtml.js b/blocks/recipe/__close/recipe__close.bemhtml.js
@@ -0,0 +1,3 @@
+block('recipe').elem('close')(
+    tag()('label')
+);
diff --git a/blocks/recipe/__close/recipe__close.styl b/blocks/recipe/__close/recipe__close.styl
@@ -0,0 +1,28 @@
+.recipe__close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  transition: transform .5s ease-in-out;
+  &:hover {
+    transform: rotate(180deg) scale(1.5);
+  }
+  &::before,
+  &::after {
+    content: '';
+    left: 50%;
+    top: 50%;
+    position: absolute;
+    width: 28px;
+    height: 3px;
+    border: 1px solid #747571;
+    border-radius: 2px;
+    background-color: #898b86;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
diff --git a/blocks/recipe/__ingredients/recipe__ingredients.bemhtml.js b/blocks/recipe/__ingredients/recipe__ingredients.bemhtml.js
@@ -0,0 +1,32 @@
+block('recipe')(
+    elem('ingredients')(
+        content()(function() {
+            var content = this.ctx.content;
+
+            return content.map(item => {
+                return {
+                    elem: 'ingredient',
+                    content: [
+                        {
+                            elem: 'ingredient-name',
+                            content: item.name
+                        },
+                        {
+                            elem:'ingredient-count',
+                            content: `(${item.count})`
+                        }
+                    ]
+                };
+            });
+        })
+    ),
+    elem('ingredient')(
+        tag()('p')
+    ),
+    elem('ingredient-name')(
+        tag()('span')
+    ),
+    elem('ingredient-count')(
+        tag()('span')
+    )
+);
diff --git a/blocks/recipe/__ingredients/recipe__ingredients.styl b/blocks/recipe/__ingredients/recipe__ingredients.styl
@@ -0,0 +1,17 @@
+.recipe {
+  &__ingredients {
+    flex: 0 0 100px;
+    margin-right: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+  &__ingredient {
+    margin: 5px 0 0;
+    &:first-child {
+      margin-top: 15px;
+    }
+    &-name {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/blocks/recipe/__instruction-footer/recipe__instruction-footer.styl b/blocks/recipe/__instruction-footer/recipe__instruction-footer.styl
@@ -0,0 +1,7 @@
+.recipe__instruction-footer {
+  color: #a4a4a4;
+  font-size: 10px;
+  margin-top: 15px;
+  padding-top: 5px;
+  border-top: 1px solid #000;
+}
diff --git a/blocks/recipe/__instruction-list/recipe__instruction-list.bemhtml.js b/blocks/recipe/__instruction-list/recipe__instruction-list.bemhtml.js
@@ -0,0 +1,18 @@
+block('recipe')(
+    elem('instruction-list')(
+        tag()('ol'),
+        content()(function() {
+            var content = this.ctx.content;
+
+            return content.map(item => {
+                return {
+                    elem: 'instruction-item',
+                    content: item.section
+                };
+            });
+        })
+    ),
+    elem('instruction-item')(
+        tag()('li')
+    )
+);
diff --git a/blocks/recipe/__instruction-list/recipe__instruction-list.styl b/blocks/recipe/__instruction-list/recipe__instruction-list.styl
@@ -0,0 +1,5 @@
+.recipe__instruction-list {
+  padding: 0;
+  list-style-position: inside;
+  margin: 10px 0 0;
+}
diff --git a/blocks/recipe/__instruction-title/recipe__instruction-title.bemhtml.js b/blocks/recipe/__instruction-title/recipe__instruction-title.bemhtml.js
@@ -0,0 +1,3 @@
+block('recipe').elem('instruction-title')(
+    tag()('p')
+);
diff --git a/blocks/recipe/__instruction-title/recipe__instruction-title.styl b/blocks/recipe/__instruction-title/recipe__instruction-title.styl
@@ -0,0 +1,4 @@
+.recipe__instruction-title {
+  margin: 15px 0 0;
+  color: #ba0000;
+}
diff --git a/blocks/recipe/__instruction/recipe__instruction.styl b/blocks/recipe/__instruction/recipe__instruction.styl
@@ -0,0 +1,6 @@
+.recipe__instruction {
+  flex: 1 1 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
diff --git a/blocks/recipe/__main/recipe__main.bemtree.js b/blocks/recipe/__main/recipe__main.bemtree.js
@@ -0,0 +1,30 @@
+block('recipe').elem('main').content()(function() {
+    var ctx = this.ctx.data;
+
+    return [
+        {
+            elem: 'ingredients',
+            content: ctx.ingredients
+        },
+        {
+            elem: 'instruction',
+            content: [
+                {
+                    elem: 'instruction-header',
+                    content: {
+                        elem: 'instruction-title',
+                        content: 'Инструкция'
+                    }
+                },
+                {
+                    elem: 'instruction-list',
+                    content: ctx.instructions
+                },
+                {
+                    elem: 'instruction-footer',
+                    content: ctx.description
+                }
+            ]
+        }
+    ];
+});
diff --git a/blocks/recipe/__main/recipe__main.deps.js b/blocks/recipe/__main/recipe__main.deps.js
@@ -0,0 +1,10 @@
+({
+    shouldDeps: [
+        { block: 'recipe', elem: 'ingredients' },
+        { block: 'recipe', elem: 'instruction' },
+        { block: 'recipe', elem: 'instruction-header' },
+        { block: 'recipe', elem: 'instruction-title' },
+        { block: 'recipe', elem: 'instruction-list' },
+        { block: 'recipe', elem: 'instruction-footer' }
+    ]
+})
diff --git a/blocks/recipe/__main/recipe__main.styl b/blocks/recipe/__main/recipe__main.styl
@@ -0,0 +1,5 @@
+.recipe__main {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
diff --git a/blocks/recipe/__title/recipe__title.bemhtml.js b/blocks/recipe/__title/recipe__title.bemhtml.js
@@ -0,0 +1,3 @@
+block('recipe').elem('title')(
+    tag()('h2')
+);
diff --git a/blocks/recipe/__title/recipe__title.styl b/blocks/recipe/__title/recipe__title.styl
@@ -0,0 +1,8 @@
+.recipe__title {
+  font-size: 18px;
+  font-weight: normal;
+  margin: 0;
+  color: #b5b5b5;
+  padding-bottom: 5px;
+  border-bottom: 2px solid #b5b5b5;
+}
diff --git a/blocks/recipe/recipe.bemhtml.js b/blocks/recipe/recipe.bemhtml.js
@@ -0,0 +1,3 @@
+block('recipe')(
+    tag()('article')
+);
diff --git a/blocks/recipe/recipe.deps.js b/blocks/recipe/recipe.deps.js
@@ -0,0 +1,7 @@
+({
+    shouldDeps: [
+        { block: 'recipe', elem: 'close' },
+        { block: 'recipe', elem: 'title' },
+        { block: 'recipe', elem: 'main' }
+    ]
+})