tags, autocomplete, and other stuff oh my!

setpixel · Aug 6, 2015 · 5fd3c97 · 5fd3c97
1 parent 2617e06
commit 5fd3c97
Show file tree

Hide file tree

Showing 10 changed files with 2,273 additions and 80 deletions.
diff --git a/css/awesomplete.css b/css/awesomplete.css
@@ -0,0 +1,122 @@
+[hidden] { display: none; }
+
+.visually-hidden {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+}
+
+div.awesomplete {
+	display: inline-block;
+	position: relative;
+}
+
+.card div.awesomplete {
+	display: block;
+	position: relative;
+}
+
+
+div.awesomplete > input {
+	display: block;
+}
+
+div.awesomplete > ul {
+	position: absolute;
+	font-size: 18px;
+	left: 0;
+	z-index: 1;
+	min-width: 100px;
+	box-sizing: border-box;
+	list-style: none;
+	padding: 0;
+	border-radius: .3em;
+	margin: 0 12px 0 0;
+	background: hsla(0,0%,100%,.9);
+	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
+	border: 1px solid rgba(0,0,0,.3);
+	box-shadow: 0px 2px 2px 0px rgba(0,0,0,.2);
+	text-shadow: none;
+}
+
+.card div.awesomplete > ul {
+	top: 15px;
+	font-size: 10px;
+	border: 0.1em solid rgba(0,0,0,.3);
+}
+
+div.awesomplete > ul[hidden],
+div.awesomplete > ul:empty {
+	display: none;
+}
+
+@supports (transform: scale(0)) {
+	div.awesomplete > ul {
+		transition: .3s cubic-bezier(.4,.2,.5,1.4);
+		transform-origin: 1.43em -.43em;
+	}
+
+	div.awesomplete > ul[hidden],
+	div.awesomplete > ul:empty {
+		opacity: 0;
+		transform: scale(0);
+		display: block;
+		transition-timing-function: ease;
+	}
+}
+
+	/* Pointer */
+	div.awesomplete > ul:before {
+		content: "";
+		position: absolute;
+		top: -.43em;
+		left: 1em;
+		width: 1px; height: 1px;
+		padding: .3em;
+		background: white;
+		border: inherit;
+		border-right: 0;
+		border-bottom: 0;
+		-webkit-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+
+	div.awesomplete > ul > li {
+		color: hsl(0,0%,50%);
+		position: relative;
+		padding: .2em .5em;
+		cursor: pointer;
+	}
+
+	div.awesomplete > ul > li:hover {
+		background: #effbff; /*#00aeef;*/
+		color: rgba(0,0,0,0.8);
+	}
+
+	div.awesomplete > ul > li:first-child {
+		border-top-left-radius: .2em;
+		border-top-right-radius: .2em;
+	}
+
+	div.awesomplete > ul > li:last-child {
+		border-bottom-left-radius: .2em;
+		border-bottom-right-radius: .2em;
+	}
+
+
+	div.awesomplete > ul > li[aria-selected="true"] {
+		background: #6fbff4;/* 0%, #00aeef*/
+		color: rgba(255,255,255,0.8);
+	}
+
+		div.awesomplete mark {
+			background: none;
+		}
+
+		div.awesomplete li:hover mark {
+			background: hsl(200, 40%, 80%);
+		}
+
+		div.awesomplete li[aria-selected="true"] mark {
+			background: hsl(205, 40%, 40%);
+			color: inherit;
+		}
diff --git a/css/main.css b/css/main.css
@@ -159,6 +159,17 @@ body{
 */  
 }
 
+.card .go-left {
+  position: relative;
+  float: left;
+  margin: 0;
+}
+
+.card .go-right {
+  position: relative;
+  float: right;
+  margin: 0;
+}
 
 .card div {
   margin-bottom: 5px;
@@ -253,6 +264,32 @@ h2 {
   text-overflow: ellipsis;
 }
 
+.card.dim {
+  opacity: 0.2;
+  transition: opacity 200ms ease;
+}
+
+.card .label-container {
+  position: absolute;
+  bottom: 17px;
+  right: 3px;
+  text-align: right;
+  height: 0px;
+}
+
+.card .label-container div {
+  text-transform: capitalize;
+  color: rgba(0,0,0,0.6);
+  padding: 1px 3px 0px 3px;
+  display: inline-block;
+  font-size: 6px;
+  min-height: 10px;
+  border-radius: 2px;
+  margin-left: 2px;
+}
+
+
+
 .card .synopsis {
   font-size: 10px;
   text-overflow: ellipsis;
@@ -315,7 +352,7 @@ h2 {
 
 #inspector input, textarea {
   display: block;
-  width: 100%;
+  width: 450px;
   outline: 0;
   padding-bottom: 10px;
   margin-bottom: 10px;

diff --git a/index.html b/index.html
@@ -6,13 +6,17 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" media="all" href="css/main.css">
+    <link rel="stylesheet" media="all" href="css/awesomplete.css">
   </head>
   <body>
-    <script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
-    <script src="https://www.gstatic.com/realtime/realtime-client-utils.js"></script>
+    <script src="http://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
+    <script src="http://www.gstatic.com/realtime/realtime-client-utils.js"></script>
     <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.36.min.js"></script>
     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+    <script src="js/tinycolor.js"></script> 
+    <script src="js/awesomplete.js"></script> 
+    <script src="js/utils.js"></script> 
     <script src="js/gamepad.js"></script> 
     <script src="js/realtimeModel.js"></script>
     <script src="js/stats.js"></script>
@@ -22,15 +26,16 @@
     <script src="js/main.js"></script> 
     <div id="inspector" class="hidden">
       <h1>Edit some shit.</h1>
-        <input type="text" name="" placeholder="Title">
-        <textarea name="" placeholder="Synopsis" rows="3"></textarea>
-        <input type="text" name="" placeholder="Image URL">
-        <input type="text" name="" placeholder="Setting">
-        <input type="text" name="" placeholder="Time of day">
-        <textarea name="" placeholder="Full text" rows="5"></textarea>
-        <input type="text" name="" placeholder="Tags">
-
-      type
+      <input type="text" id="title" placeholder="Title">
+      <textarea name="" id="synopsis" placeholder="Synopsis" rows="3"></textarea>
+      <input type="text" id="imageURL" placeholder="Image URL">
+      <input type="text" id="setting" class="setting" placeholder="Setting">
+      <input type="text" id="timeOfDay" class="timeOfDay" placeholder="Time of day">
+      <textarea id="text" placeholder="Full text" rows="5"></textarea>
+      <input id="tags" class="tags" placeholder="Tags">
+      <input id="actors" class="actors" placeholder="Actors">
+      <input id="duration" name="" placeholder="Duration in seconds">
+<!--       type
       title
       synopsis
       imageURL
@@ -41,12 +46,16 @@ <h1>Edit some shit.</h1>
       tags [list]
       actors
       duration (of node)
-      color
-
-
+      color -->
     </div>        
 
-
+<datalist id="frameworks">
+  <option value="MooTools">
+  <option value="Moobile">
+  <option value="Dojo Toolkit">
+  <option value="jQuery">
+  <option value="YUI">
+</datalist>