diff options
| -rw-r--r-- | themes/okadmin/public/css/main.css | 33 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 30 |
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 %} |