WIP: yeet

index.html

@@ -6,11 +6,13 @@
         <meta name="author" content="Thomas Wade">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="styles/default.css">
+        <link rel="stylesheet" href="styles/ng-tags-input.css">
         <title>{{title}}</title>
         <script src="scripts/angular.min.js" type="application/javascript"></script>
         <script src="scripts/angular-route.min.js" type="application/javascript"></script>
         <script src="scripts/angular-sanitize.min.js" type="application/javascript"></script>
         <script src="scripts/marked.min.js" type="application/javascript"></script>
+        <script src="scripts/ng-tags-input.min.js" type="application/javascript"></script>
         <script src="scripts/app.js" type="application/javascript"></script>
         <base href="/">
     </head>

scripts/app.js

@@ -1,4 +1,4 @@
-var app = angular.module("app", ["ngRoute", "ngSanitize"]);
+var app = angular.module("app", ["ngRoute", "ngSanitize", "ngTagsInput"]);
 
 app.config(
     function ($routeProvider)
@@ -30,7 +30,7 @@ app.controller("create", ["$scope", "$http",
         $scope.content = "";
         $scope.tags = [];
 
-        $scope.postSubmit = function()
+        $scope.onSubmit = function()
         {
             // Create the post object
             post = {

styles/ng-tags-input.css

@@ -0,0 +1,218 @@
+tags-input
+{
+    display: block;
+}
+tags-input *,
+tags-input *:before,
+tags-input *:after
+{
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+}
+tags-input .host
+{
+    position: relative;
+
+    height: 100%;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+tags-input .host:active
+{
+    outline: none;
+}
+
+tags-input .tags
+{
+    overflow: hidden;
+
+    height: 100%;
+    padding: 1px;
+
+    cursor: text;
+    word-wrap: break-word;
+
+    border: 1px solid darkgray;
+    background-color: #fff;
+    /* box-shadow: 1px 1px 1px 0 lightgray inset; */
+
+       -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+}
+/* tags-input .tags.focused
+{
+    outline: none;
+    -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
+       -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
+            box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
+} */
+tags-input .tags .tag-list
+{
+    margin: 0;
+    padding: 0;
+
+    list-style-type: none;
+}
+tags-input .tags .tag-item
+{
+    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 25px;
+
+    display: inline-block;
+    float: left;
+
+    height: 26px;
+    margin: 2px;
+    padding: 0 5px;
+
+    color: #fff;
+    /* border: 1px solid #acacac; */
+    /* border-radius: 3px; */
+    /* background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
+    background:         linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); */
+    background-color: #000;
+}
+tags-input .tags .tag-item.selected
+{
+    /* background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+    background:         linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); */
+}
+tags-input .tags .tag-item .remove-button
+{
+    font: bold 16px Arial, sans-serif;
+
+    margin: 0 0 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+    vertical-align: middle;
+
+    color: #fff8;
+    border: none;
+    background: none;
+}
+tags-input .tags .tag-item .remove-button:active
+{
+    color: #f00;
+}
+tags-input .tags .input
+{
+    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    float: left;
+
+    height: 26px;
+    margin: 2px;
+    padding: 0;
+    padding-left: 5px;
+
+    border: 0;
+    outline: none;
+}
+tags-input .tags .input.invalid-tag
+{
+    color: #f00;
+}
+tags-input .tags .input::-ms-clear
+{
+    display: none;
+}
+tags-input.ng-invalid .tags
+{
+    -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
+       -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
+            box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
+}
+tags-input[disabled] .host:focus
+{
+    outline: none;
+}
+tags-input[disabled] .tags
+{
+    cursor: default;
+
+    background-color: #eee;
+}
+tags-input[disabled] .tags .tag-item
+{
+    opacity: .65;
+    background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
+    background:         linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
+}
+tags-input[disabled] .tags .tag-item .remove-button
+{
+    cursor: default;
+}
+tags-input[disabled] .tags .tag-item .remove-button:active
+{
+    color: #585858;
+}
+tags-input[disabled] .tags .input
+{
+    cursor: default;
+
+    background-color: #eee;
+}
+
+tags-input .autocomplete
+{
+    position: absolute;
+    z-index: 999;
+
+    width: 100%;
+    margin-top: 5px;
+    padding: 5px 0;
+
+    border: 1px solid rgba(0, 0, 0, .2);
+    background-color: #fff;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+            box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+}
+tags-input .autocomplete .suggestion-list
+{
+    position: relative;
+
+    overflow-y: auto;
+
+    max-height: 280px;
+    margin: 0;
+    padding: 0;
+
+    list-style-type: none;
+}
+tags-input .autocomplete .suggestion-item
+{
+    font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    overflow: hidden;
+
+    padding: 5px 10px;
+
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    color: #000;
+    background-color: #fff;
+}
+tags-input .autocomplete .suggestion-item.selected
+{
+    color: #fff;
+    background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item.selected em
+{
+    color: #fff;
+    background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item em
+{
+    font: normal bold 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    color: #000;
+    background-color: #fff;
+}
+
+/*# sourceMappingURL=ng-tags-input.css.map */

views/create.html

@@ -0,0 +1,7 @@
+<form ng-submit="onSubmit()">
+    <input type="text" ng-model="title" placeholder="Title"><br>
+    <input type="text" ng-model="author" placeholder="Author"><br>
+    <tags-input ng-model="tags" placeholder="Tags"><br>
+    <textarea cols="30" rows="10" ng-model="content" placeholder="Content..."></textarea><br>
+    <input type="submit">
+</form>

views/navbuttons.html

@@ -2,4 +2,5 @@
     <a ng-click="navClick('/')" ng-class="isCurrent('/')">Blog</a>
     <a ng-click="navClick('/about')" ng-class="isCurrent('/about')">About</a>
     <a ng-click="navClick('/faq')" ng-class="isCurrent('/faq')">FAQ</a>
+    <a ng-click="navClick('/create')" ng-class="isCurrent('/create')">Create</a>
 </div>