added tag addition functionality

.vscode/settings.json

@@ -1,21 +1,18 @@
 {
-    "editor.multiCursorModifier":"ctrlCmd",
-    "liveSassCompile.settings.formats":[
-       {
-           "format": "expanded",
-           "extensionName": ".min.css",
-           "savePath": "/css"
-       },
-   ],
-   "liveSassCompile.settings.excludeList": [
-      "**/node_modules/**",
-      ".vscode/**",
-      ".git/**",
-      "**/sass/includes/**"
-   ],
-   "liveSassCompile.settings.generateMap": true,
-   "liveSassCompile.settings.autoprefix": [
-       "> 1%",
-       "last 2 versions"
-   ]
-}
+  "editor.multiCursorModifier": "ctrlCmd",
+  "liveSassCompile.settings.formats": [
+    {
+      "format": "compressed",
+      "extensionName": ".min.css",
+      "savePath": "/public/css"
+    }
+  ],
+  "liveSassCompile.settings.excludeList": [
+    "**/node_modules/**",
+    ".vscode/**",
+    ".git/**",
+    "**/sass/includes/**"
+  ],
+  "liveSassCompile.settings.generateMap": true,
+  "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]
+}

public/index.html

@@ -9,17 +9,18 @@
     <!--Styles-->
     <link rel="stylesheet" href="/css/bootstrap.min.css" />
     <link rel="stylesheet" href="/css/styles.min.css" />
+    <link
+      href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
+      rel="stylesheet"
+      type="text/css"
+    />
     <!--Styles-->
 
     <!--Imports-->
     <script src="/js/lib/jquery-3.4.1.min.js"></script>
     <script src="/js/lib/popper.min.js"></script>
     <script src="/js/lib/bootstrap.min.js"></script>
     <script src="/js/lib/mustache.min.js"></script>
-    <script
-      src="https://kit.fontawesome.com/040a1a27b3.js"
-      crossorigin="anonymous"
-    ></script>
     <!--Imports-->
 
     <!--Modules-->
@@ -44,24 +45,44 @@ <h4 class="card-text lead text-muted">
     <script id="talks_template" type="text/html">
       <div talkid={{id}} class="col-md-6 pb-4">
           <div class="card">
+            <div class="bookmarks over">
+              <i class="bookmark bookmark-under far fa-bookmark float-right"><i active class="bookmark bookmark-over fas fa-bookmark"></i></i>
+            </div>
+
+
             <div class="card-body d-flex flex-column">
               <h5 class="card-title">{{title}}</h5>
-              <h4 class="over card-text lead">
-                <a class="card-text text-muted" href="/view/talks/speaker/{{speaker}}">{{speaker}}</a>
-              </h4>
+
+              <div class="d-flex justify-content-start">
+                <h4 class="over card-text lead" style="display:inline-block; ">
+                  <a class="card-text text-muted" href="/view/talks/speaker/{{speaker}}">{{speaker}}</a>
+                </h4>
+              </div>
+
               <div metadata class="d-flex justify-content-between">
-                <div class="tags flex-wrap over">
+                <div class="tags flex-wrap d-flex">
                   {{#tags}}
-                  <span><a href="/view/talks/tags/{{.}}" class="badge badge-primary">{{.}}</a></span>
+                  <span class="over h-25 px-1"><a href="/view/talks/tags/{{.}}" class="badge badge-primary tag">{{.}}</a></span>
                   {{/tags}}
+                  <span class="new over h-25 px-1">
+                    <form for="newtags" action="/talks/tag/{{id}}" method="post" style="display:none;">
+                      <input type="text" class="form-control" name="tag" placeholder="tag">
+                    </form>
+                    <i class="far fa-plus-square icon"></i>
+                  </span>
                 </div>
-                <div class="ratings over"></i>
+
+                <div>
+                  <div class="ratings over">
                     <i star=1 class="star star-under far fa-star"><i star=1 class="star star-over fas fa-star"></i></i>
                     <i star=2 class="star star-under far fa-star"><i star=2 class="star star-over fas fa-star"></i></i>
                     <i star=3 class="star star-under far fa-star"><i star=3 class="star star-over fas fa-star"></i></i>
                     <i star=4 class="star star-under far fa-star"><i star=4 class="star star-over fas fa-star"></i></i>
                     <i star=5 class="star star-under far fa-star"><i star=5 class="star star-over fas fa-star"></i></i>
                 </div>
+                <p class="m-0 text-right"><small>{{time}}</small></p>
+                </div>
+
               </div>
               <p class="card-text">{{description}}</p>
               <a

public/js/index.js

@@ -16,7 +16,7 @@ function loadSessions() {
 }
 
 function loadTalks() {
-  return drawTalks(Talk.loadBySessionId("B"));
+  return drawTalks(Talk.loadAll());
 }
 function drawTalks(talksPromise) {
   //create holding div to append to (only children are returned)
@@ -76,6 +76,48 @@ function drawTalks(talksPromise) {
               });
             });
         })();
+        //set the submission handler for new tags
+        (function setupNewTags() {
+          let icon = html.find(".tags>.new>.icon");
+          let form = html.find("form[for='newtags']");
+          let newtagInput = form.find("[name='tag']");
+
+          newtagInput.on("input", function() {
+            var ctx = $("<canvas>")[0].getContext("2d");
+            let thisJ = $(this);
+            var font = thisJ.css("font-size") + " " + thisJ.css("font-family");
+            ctx.font = font;
+
+            this.style.width = ctx.measureText(this.value).width + 26 + "px";
+          });
+          icon.on("click", function() {
+            $(this).hide();
+            html.find("form[for='newtags']").show();
+          });
+
+          //click data is logged in html, only js handler is setup due to refresh issue
+          form.on("submit", function(test) {
+            test.preventDefault();
+
+            let url = form.attr("action");
+            let method = form.attr("method");
+            let formdata = form.serializeArray()[0];
+            let data = {};
+            data[formdata.name] = formdata.value;
+
+            $.ajax({
+              method: method,
+              url: url,
+              data: data,
+              dataType: "application/json",
+              success: function(datas) {
+                console.log(datas);
+              }
+            });
+            form.hide();
+            icon.show();
+          });
+        })();
         content.append(html);
       });
     })

public/sass/styles.scss

@@ -1,5 +1,5 @@
 @import "includes/mixins.scss";
-
+$primary: #007bff;
 * {
   margin: 0;
   padding: 0;
@@ -11,6 +11,66 @@
     background: darken(white, 5%);
     transform: translateY(-10px);
   }
+  .tags {
+    form[for="newtags"] > .form-control {
+      min-width: 60px;
+      width: 60px;
+      height: 18px;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+      background-color: lighten($primary, 30%);
+      color: white;
+      &::placeholder {
+        color: white;
+        opacity: 0.75;
+      }
+    }
+    .icon {
+      cursor: pointer;
+      transition: 100ms;
+      &:hover {
+        color: $primary;
+        font-size: large;
+      }
+    }
+  }
+  .bookmarks {
+    cursor: pointer;
+    .bookmark {
+      font-size: 1.75rem;
+      right: -7px;
+      top: -7px;
+      &.bookmark-under {
+        color: #ddd;
+        vertical-align: top;
+        position: relative;
+        @mixin hover {
+          color: gold;
+        }
+        &:hover > .bookmark-over:not([active]) {
+          @include hover;
+          height: 100%;
+        }
+        &:hover > .bookmark-over[active] {
+          @include hover;
+          height: 0%;
+        }
+      }
+      &.bookmark-over {
+        width: 21px;
+        transition: 100ms;
+        color: #f80;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 0%;
+        overflow: hidden;
+        &[active] {
+          height: 100%;
+        }
+      }
+    }
+  }
   .over {
     z-index: 2 !important;
   }
@@ -24,14 +84,14 @@
         color: #ddd;
         vertical-align: top;
         position: relative;
-        @mixin starhover {
+        @mixin hover {
           color: gold;
         }
         &:hover > .star-over {
-          @include starhover;
+          @include hover;
         }
         &:hover {
-          @include starhover;
+          @include hover;
         }
       }
       &.star-over {