gilding the lily

4 files changed, 41 insertions, 7 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 3a314a2..63dea45 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -1,3 +1,7 @@
+* {
+	box-sizing: border-box;
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -138,7 +142,7 @@ label {
 .main.resource form select {
   display: block;
   float: left;
-  width: 20em;
+  width: 25em;
   font-size: 1.0em;
   color: #000;
   border: 1px solid #333;
@@ -149,11 +153,36 @@ label {
 .main.resource form .group {
   display: block;
   float: left;
-  width: 21em;
+  width: 31em;
+}
+.main.resource form .group label {
+  width: 5em;
+  color: #777;
+  font-size: 0.9em;
+  line-height: 1.4em;
+  margin-bottom: 0;
+  margin-left: -5.8em;
+  text-align: right;
+  border: 0;
+  display: none;
+}
+.main.resource form .group.loaded input:first-child,
+.main.resource form .group input:first-child {
+  display: block;
+  width: 25em;
+}
+.main.resource form .group.loaded label {
+  display: block;
+}
+.main.resource form .group.loaded input {
+  display: block;
+  width: 20.05em;
 }
 .main.resource form .group input {
+  display: none;
   margin-bottom: 0.1em;
 }
+.main.resource form .group.loaded input[hidden],
 .main.resource form input[hidden] {
   display: none;
 }
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 3abc347..8e99ad8 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -9,10 +9,12 @@ var OKAdmin = function(){
     var $el = $(this)
     var url = $el.val()
     Parser.parse( url, function(media){
-      $el.next(".video-type").val( media.type )
-      $el.next(".video-token").val( media.token )
-      $el.next(".video-title").val( media.title )
-      $el.next(".video-thumb").val( media.thumbnail )
+      console.log(url,media)
+      $el.parent().addClass("loaded")
+      $el.parent().find(".video-type").val( media.type )
+      $el.parent().find(".video-token").val( media.token )
+      $el.parent().find(".video-title").val( media.title )
+      $el.parent().find(".video-thumb").val( media.thumbnail )
     })
   })
   
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 42e459f..8eb0fa5 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -19,11 +19,13 @@
         {% endif %}
         name="{{name}}">{{spec.value}}</textarea>
     {% elsif type == 'video' %}
-      <div class="video group">
+      <div class="video group {% if spec.value.url %}loaded{% endif %}">
         <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
         <input name="{{name}}[type]" type="text" value="{{spec.value.title}}" class="video-type" hidden>
         <input name="{{name}}[token]" type="text" value="{{spec.value.title}}" class="video-token" hidden>
+        <label>Title</label>
         <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title" placeholder="Title">
+        <label>Thumbnail</label>
         <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb" placeholder="Thumbnail">
       </div>
     {% elsif type == 'enum' %}
diff --git a/themes/okadmin/templates/partials/tail.liquid b/themes/okadmin/templates/partials/tail.liquid
index 31da4ed..1c6bce5 100644
--- a/themes/okadmin/templates/partials/tail.liquid
+++ b/themes/okadmin/templates/partials/tail.liquid
@@ -3,5 +3,6 @@
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
   <script src="/_admin/js/upload.js"></script>
+  <script src="/_admin/js/parser.js"></script>
   <script src="/_admin/js/app.js"></script>
 </html>