#65 Применение контролов на сайте

greenprojectme · Jul 15, 2017 · 27dca24 · 27dca24
1 parent f57a6c2
commit 27dca24
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
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;
   }