add images button and styling shit

2 files changed, 54 insertions, 9 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index d67d312..8e01e49 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -202,15 +202,48 @@ label {
   margin-top: 1.0em;
 }
 
+.main.resource form ol {
+  margin: 0;
+  padding: 0;
+}
+.main.resource form li {
+  list-style-type: none;
+}
 .main.resource form img {
   width: 10em;
   max-height: 10em;
   border: 0;
+  cursor: -webkit-grab;
+  cursor: grab;
 }
 .main.resource form textarea.caption {
   width: 15em;
   height: 9em;
 }
+.add-image-button {
+  background: #ddd;
+  clear: left;
+  text-align: left;
+  padding: 10px;
+  width: 15em;
+  position: relative;
+}
+.add-image-button:hover {
+  background: #def;
+}
+.add-image-button input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  cursor: pointer;
+}
+li.image-element:hover .remove-image {
+  display: block;
+}
+.remove-image {
+  display: none;
+}
 
 .template {
   display: none;
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 25aef30..dab6243 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -39,18 +39,30 @@
         <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
       </div>
     {% elsif type == 'captioned-image-list' %}
-      <ol>
-        {% for image in spec.value %}
+      <div class="image group loaded">
+        <ol>
+          {% for image in spec.value %}
+            <li class="image-element">
+              <input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
+              <textarea class="caption" name="{{name}}[][caption]">{{image.caption}}</textarea>
+              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <button class="remove-image">♲</button>
+            </li>
+          {% endfor %}
+        </ol>
+        <div class="add-image-button">
+          <input id="file" type="file" accept="image/*">
+          <span>+ Add images</span>
+        </div>
+        <script type="text/html" id="captioned-image-template">
           <li class="image-element">
-            <img src="{{image.uri}}" alt="{{image.caption}}">
-            <input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
-            <textarea class="caption" name="{{name}}[][caption]">{{image.caption}}</textarea>
+            <img src="" alt="{{image.caption}}">
+            <input type="hidden" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <button class="remove-image">-</button>
           </li>
-        {% endfor %}
-      </ol>
-      <input class="file-upload" style="display: none;" type="file" accept="image/*">
-      <button class="add-image">+</button>
+        </script>
+      </div>
     {% else %}
       <p><pre style="color: red">Admin template doesn't support '{{type}}' properties!</pre></p>
     {% endif %}