From 091504eeb49fdf5fa62a6ae4f7cb2b2e72e144b9 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Sat, 30 Aug 2014 12:24:31 +0200
Subject: [PATCH] style tag list

---
 .../javascripts/app/views/widget/tag.jst.eco  | 25 +++++++++++-
 app/assets/stylesheets/zzz.css.erb            | 40 ++++++++++++++++++-
 2 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/app/views/widget/tag.jst.eco b/app/assets/javascripts/app/views/widget/tag.jst.eco
index f34854c08..8727ae492 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -1,4 +1,25 @@
 <div class="">
-  <h6><%- @T( 'Tags' ) %></h6>
-  <input type="text" name="tags" id="<%- @tag_id %>" class="form-control" value="<% for tag in @tags: %><%= tag %>,<% end %>"/>
+  <label><%- @T( 'Tags' ) %></label>
+  <!--<input type="text" name="tags" id="<%- @tag_id %>" class="form-control" value="<% for tag in @tags: %><%= tag %>,<% end %>"/>-->
+  <ul class="tagList">
+    <li class="horizontal center">
+      <span class="flex">Midi Notes</span>
+      <span>3</span>
+      <span class="tag-delete js-delete centered clickable">
+        <span class="delete icon"></span>
+      </span>
+    <li class="horizontal center">
+      <span class="flex">Transitions</span>
+      <span>23</span>
+      <span class="tag-delete js-delete centered clickable">
+        <span class="delete icon"></span>
+      </span>
+    <li class="horizontal center">
+      <span class="flex">New UI</span>
+      <span>3</span>
+      <span class="tag-delete js-delete centered clickable">
+        <span class="delete icon"></span>
+      </span>
+  </ul>
+  <div class="text-muted js-newTag clickable">+ <%- @T('Add Tag') %></div>
 </div>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index f0a957569..720057ab4 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -534,6 +534,11 @@ label {
   font-weight: normal;
   letter-spacing: 0.1em;
   padding: 0 2px;
+  margin-bottom: 4px;
+}
+
+.form-group + .form-group {
+  margin-top: 0;
 }
 
 .form-group .help-message {
@@ -3059,10 +3064,41 @@ footer {
   }
 
   .sidebar .form-group {
-    margin: 0 -20px;
-    padding: 0 20px;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-right: 20px;
+    padding-left: 20px;
   }
 
+  .sidebar .text-muted {
+    color: hsl(204,3%,72%);
+  }
+
+.tags {
+  margin-bottom: 20px;
+}
+
+.tagList {
+  padding: 0;
+  margin-bottom: 5px;
+}
+
+  .tagList li {
+    border-bottom: 1px solid hsl(240,4%,95%);
+  }
+
+  .tagList .tag-delete {
+    height: 29px;
+    padding: 0 10px;
+    margin-right: -4px;
+    display: block;
+    opacity: 0.2;
+  }
+
+    .tagList .tag-delete:hover {
+      opacity: 0.5;
+    }
+
 /* 
 
   ----------------