Add customise tag field

scripts/app.js

@@ -53,6 +53,13 @@ app.controller("create", ["$scope", "$http",
             // Tell the user that the deed is done *diabolical laughter*
             // alert("Post has been submitted. Thank you!");
         }
+
+        $scope.onTagAdding = ($tag) =>
+        {
+            if (!$tag.text.startsWith("#"))
+                $tag.text = "#" + $tag.text;
+            return true;
+        }
     }
 ]);
 

styles/default.css

@@ -204,3 +204,49 @@ a
 
     color: #fffa;
 }
+
+.createForm input,
+.createForm textarea
+{
+    width: 100%;
+}
+
+.createForm .title,
+.createForm .author
+{
+    font-size: 18pt;
+    line-height: 25px;
+
+    display: block;
+
+    width: 100%;
+
+    border: 0;
+    border-bottom: 5px solid #000;
+}
+
+.createForm .author
+{
+    width: 100%;
+
+    color: #000;
+}
+
+.createForm .tags
+{
+    width: 100%;
+
+    color: #000;
+}
+
+.createForm .content
+{
+    resize: vertical;
+
+    color: #000;
+}
+
+.createForm .submit
+{
+    color: #000;
+}

views/create.html

@@ -1,7 +1,22 @@
-<form ng-submit="onSubmit()">
+<h1>Create a new post</h1>
-    <input type="text" ng-model="title" placeholder="Title"><br>
+<form class="createForm" ng-submit="onSubmit()">
-    <input type="text" ng-model="author" placeholder="Author"><br>
+    <input type="text" class="title" ng-model="title" placeholder="Title">
-    <tags-input ng-model="tags" placeholder="Tags"><br>
+    <br>
-    <textarea cols="30" rows="10" ng-model="content" placeholder="Content..."></textarea><br>
+    <input type="text" class="author" ng-model="author" placeholder="Author">
-    <input type="submit">
+    <br>
+    <span><!-- Wrap <tags-input> to avoid weird behaviour with following elements -->
+        <tags-input
+            on-tag-adding="onTagAdding($tag)"
+            use-strings="true"
+            min-length="1"
+            add-on-comma="true"
+            add-on-blur="true"
+            class="tags"
+            ng-model="tags"
+            placeholder="Tags">
+    </span>
+    <br>
+    <textarea class="content" ng-model="content" placeholder="Content..."></textarea>
+    <br>
+    <input class="submit" type="submit">
 </form>