Merge pull request #70 from greenprojectme/task/dev/#65

#65 Material Design оформление компонентов
greenprojectme · Jul 17, 2017 · 48badcd · 48badcd
2 parents d482be3 + 27dca24
commit 48badcd
Show file tree

Hide file tree

Showing 9 changed files with 383 additions and 57 deletions.
diff --git a/component/component.less b/component/component.less
@@ -0,0 +1,17 @@
+@charset "utf-8";
+
+@import "../style/variables.less";
+@import "/api/mixin.less";
+@import "../style/control.less";
+
+@edge-section-color: #444;
+
+
+// h3, h4 {display: none; }
+h3 { .font(1.2em); padding-left: 1.0em; }
+h4 { .font(1.1em); padding-left: 1.2em; }
+
+body { .color(#333, #eee); }
+
+div { .indent(1em);  } // .edge(@edge-section-color);
+button, input, textarea { color: #eee; }
diff --git a/component/index.html b/component/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <link rel="stylesheet/less" type="text/css" href="component.less" />
+  <script src="/less.js"></script>
+  <title>UI компоненты</title>
+</head>
+<body>
+  <main>
+    <h3>Controls</h3>
+    <section>
+      <h4>Button</h4>
+      <article>
+        <div class="components">
+          <button class="control button small accent darken">Кнопка</button>
+          <button class="control button small accent">Кнопка</button>
+          <button class="control button small fade darken">Кнопка</button>
+          <button class="control button small fade">Кнопка</button>
+          <button class="control button small darken">Кнопка</button>
+          <button class="control button small">Кнопка</button>
+        </div>
+
+        <div class="components">
+          <button class="control button medium accent darken">Средняя кнопка</button>
+          <button class="control button medium accent">Средняя кнопка</button>
+          <button class="control button medium fade darken">Средняя кнопка</button>
+          <button class="control button medium fade">Средняя кнопка</button>
+          <button class="control button medium darken">Средняя кнопка</button>
+          <button class="control button medium">Средняя кнопка</button>
+        </div>
+
+        <div class="components">
+          <button class="control button large accent darken">Очень большая кнопка</button>
+          <button class="control button large accent">Очень большая кнопка</button>
+          <button class="control button large fade darken">Очень большая кнопка</button>
+          <button class="control button large fade">Очень большая кнопка</button>
+          <button class="control button large darken">Очень большая кнопка</button>
+          <button class="control button large">Очень большая кнопка</button>
+        </div>
+      </article>
+
+      <h4>Input</h4>
+      <article>
+        <div class="components">
+          <div class="control input">
+            <input type="text" required />
+            <label>Текстовое поле</label>
+            <span class="ripple"></span> <!-- анимации -->
+          </div>
+        </div>
+      </article>
+
+      <h4>Textarea</h4>
+      <article>
+        <div class="components">
+          <div class="control input">
+            <textarea required></textarea>
+            <label>Текстовое поле</label>
+            <span class="ripple"></span> <!-- анимации -->
+          </div>
+        </div>
+      </article>
+
+    </section>
+  </main>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -56,14 +56,14 @@ <h2></h2>
 
     <div id="panel"> <!-- right panel -->
       <header>
-        <label for="layer-editor-toggle">
-          <span>управление</span>
-          <span class="button">добавить</span>
-        </label>
+        <div class="layer-controls">
+          <button class="control button small">профиль</button>
+          <label for="layer-editor-toggle" class="control button small accent">добавить</label>
+        </div>
       </header>
       <div id="next-anekdot">
         <div>
-          <div>Следующий анекдот →</div>
+          <div class="control button large">Следующий анекдот →</div>
         </div>
       </div>
       <footer>
@@ -79,20 +79,39 @@ <h2></h2>
   <!-- layers -->
   <article class="layer" id="layer-editor"> <!-- layer-editor -->
     <header>
-      <label for="layer-editor-toggle" class="button">закрыть</label>
+      <label for="layer-editor-toggle" class="control button small accent">закрыть</label>
     </header>
     <div class="form" id="editor">
       <form id="input-anekdot">
         <h3>Добавить анекдот</h3>
-        <input type="text" name="name" placeholder="Название" />
-        <textarea name="text" id="" cols="30" rows="10" placeholder="текст"></textarea>
-        <input type="submit" value="Сохранить" />
+        <!-- <input type="text" name="name" placeholder="Название" class="control block width" /> -->
+
+        <div class="control input block extra" style="margin-bottom: 1em">
+          <input type="text" required />
+          <label>Название анекдота</label>
+          <span class="ripple"></span> <!-- анимации -->
+        </div>
+
+        <div class="control input block extra">
+          <textarea required></textarea>
+          <label>Текст анекдота</label>
+          <span class="ripple"></span> <!-- анимации -->
+        </div>
+
+        <button class="control button small accent">сохранить</button>
       </form>
 
       <form id="input-tag">
         <h3>Добавить тег</h3>
-        <input type="text" name="name" placeholder="Тег" />
-        <input type="submit" value="Сохранить" />
+
+        <!-- <input type="text" name="name" placeholder="Тег" class="control block width" /> -->
+        <div class="control input">
+          <input type="text" required />
+          <label>Название тега</label>
+          <span class="ripple"></span> <!-- анимации -->
+        </div>
+
+        <button class="control button small accent">сохранить</button>
         <div class="tags">
           <ul class="aside list tags "></ul>
         </div>

diff --git a/script.js b/script.js
@@ -14,8 +14,8 @@
     form: {
       add : { // Добавление анекдота
         form: '#input-anekdot',
-        name: '#input-anekdot > input[name=name]',
-        text: '#input-anekdot > textsrea'
+        name: '#input-anekdot input',
+        text: '#input-anekdot textarea'
       },
       next: '#next-anekdot > div' // "следующий анекдот"
     }
@@ -29,7 +29,7 @@
     form: {
       add: {   // Добавление тега
         form: '#input-tag',
-        name: '#input-tag > input[name=name]'
+        name: '#input-tag input'
       }
     }
   });

diff --git a/script/ui/anekdot.js b/script/ui/anekdot.js
@@ -48,7 +48,7 @@ class AnekdotUI extends Controller {
   */
   list(anekdots) {
     let self = this;
-    return UI.list(anekdots, self.view.list, callback);
+    return UI.list(anekdots, self.view.list, callback, 'li.control.button.large.block.left');
 
     function callback(item, node) {
       node.data({anekdot: item.id}).on({click});

diff --git a/script/ui/tag.js b/script/ui/tag.js
@@ -20,8 +20,8 @@ class TagUI extends Controller {
   */
   list(tags) {
     let self = this;
-    UI.list(tags, self.view.list);
-    UI.list(tags, self.view.edit);
+    UI.list(tags, self.view.list, null, 'li.control.button.large.block.left');
+    UI.list(tags, self.view.edit, null, 'li.control.button.large.block.left');
     return tags;
   }
 

diff --git a/style.less b/style.less
@@ -1,29 +1,6 @@
 @charset "utf-8";
 
-// Шрифт
-@font-default: Tahoma; // Выберите шрифт для проекта
-
-// Цвета
-@color-black : #000;
-@color-night : #444;
-@color-silver: silver;
-@color-white : #fff;
-@color-prime : #F2FBFF;
-@color-second: darken(@color-prime, 10%);
-@color-paper : #fafafa;
-@color-shadow: #ccc;
-
-// Размеры
-@height : 100vh;
-@width  : 100vw;
-@sidebar: 320px;
-@aside  : @sidebar / 2;
-@all    : 100%;
-@section: 50%;
-@content: 55%;
-@shadow-blur  : 4px;
-@shadow-offset: 2px;
-
+@import "style/variables.less";
 @import "/api/mixin.less";
 
 * { .indent; }
@@ -73,7 +50,7 @@ aside   { .color(@color-prime); }
 main { .animate(.3s); }
 
 /** @secton sidebar left */
-ul.list.aside.tags, ul.list.aside.anekdots { margin-left: 10%; margin-top: 20px; list-style: none; }
+ul.list.aside.tags, ul.list.aside.anekdots { margin-top: 20px; list-style: none; }
 ul.list.aside.tags li, ul.list.aside.anekdots li {
   &:hover { color: blue; .cursor; }
 }
@@ -85,13 +62,13 @@ article#anekdot h2 { margin-bottom: 40px; }
 
 /** @section panel right */
 input#layer-editor-toggle ~ article form { display: block; overflow: hidden; width: 0; }
-label[for="layer-editor-toggle"] { display: block; text-align: right; padding: 1em; }
-label[for="layer-editor-toggle"] span { .cursor; margin-left: 1em;
-  &:hover { color: blue; }
-}
-label[for="layer-editor-toggle"] span.button { .inline; .color(@color-second, @color-black); .round(5px); padding: 5px 10px; .edge(@color-shadow);
-  &:hover { .edge(@color-second); .color(@color-paper, blue); }
-}
+// label[for="layer-editor-toggle"] { display: block; text-align: right; padding: 1em; }
+// label[for="layer-editor-toggle"] span { .cursor; margin-left: 1em;
+//   &:hover { color: blue; }
+// }
+// label[for="layer-editor-toggle"] span.button { .inline; .color(@color-second, @color-black); .round(5px); padding: 5px 10px; .edge(@color-shadow);
+//   &:hover { .edge(@color-second); .color(@color-paper, blue); }
+// }
 input#layer-editor-toggle {
   &:checked ~ article form { width: auto; .inline; vertical-align: top; .sizing; margin: 2%; }
 }
@@ -100,20 +77,20 @@ input#layer-editor-toggle {
 input#layer-editor-toggle:checked ~ article form#input-anekdot { width: 70%; }
 input#layer-editor-toggle:checked ~ article form#input-tag { width: 20%; }
 
-.form input[type="text"] { width: 100%; margin-top: 10px; margin-bottom: 10px; }
-.form textarea { width: 100%; margin-top: 10px; margin-bottom: 10px; resize: none; }
-.form input[type="submit"] { display:block; margin-right: 0; margin-left: auto; }
+// .form input[type="text"] { width: 100%; margin-top: 10px; margin-bottom: 10px; }
+// .form textarea { width: 100%; margin-top: 10px; margin-bottom: 10px; resize: none; }
+// .form input[type="submit"] { display:block; margin-right: 0; margin-left: auto; }
 
 div#next-anekdot { height: 100%; text-align: center;
   &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
 }
-div#next-anekdot div { display: inline-block; vertical-align: middle; padding: 5px;
-  &:hover { cursor: pointer; .color(@color-paper, blue); }
-}
+div#next-anekdot div { display: inline-block; vertical-align: middle; .cursor; }
+
+#panel > header > div.layer-controls { text-align: right; padding: .8em .4em; .sizing; }
 
 /** @subsection layers */
-article.layer { .animate(.3s); top: 0; right: 0; width: 0; height: 0; position: fixed; .color(@color-prime); box-sizing: border-box; }
-#layer-editor-toggle:checked ~ #layer-editor { .size(55%, 100%); .shadow(-@shadow-offset, 0, @shadow-blur, @color-shadow);  }
+article.layer { .animate(.3s); top: 0; right: 0; width: 0; height: 0; position: fixed; .color(@color-prime); box-sizing: border-box; opacity: 0; }
+#layer-editor-toggle:checked ~ #layer-editor { .size(55%, 100%); .shadow(-@shadow-offset, 0, @shadow-blur, @color-shadow);  opacity: 1; }
 
 /** @subsection splash */
 #splash { display: none;  background: fade(@color-second, 70%); .bind(0, 0, 0, 0, fixed);
@@ -124,3 +101,5 @@ input.splash { display: none;
   &:checked ~ main { filter: blur(3px); }
 }
 #layer-editor-toggle:checked ~ #splash > label[for="layer-editor-toggle"] { display: block; }
+
+@import "style/control.less";