add images button and styling shit

1 files changed, 21 insertions, 9 deletions

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 %}