diff options
Diffstat (limited to 'themes')
| -rw-r--r-- | themes/okadmin/public/css/main.css | 69 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 45 | ||||
| -rw-r--r-- | themes/okadmin/templates/index.liquid | 37 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/flash.liquid (renamed from themes/okadmin/templates/partials/errors.liquid) | 9 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 24 | ||||
| -rw-r--r-- | themes/okadmin/templates/resource.liquid | 4 | ||||
| -rw-r--r-- | themes/okadmin/templates/resource_new.liquid | 4 |
7 files changed, 154 insertions, 38 deletions
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index ad940e8..3762fd4 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -14,11 +14,12 @@ html, body { background-attachment: scroll; } -ul { +ul, ol { padding: 0; list-style: none; } +.main.index .resource-category button, a { color: #A200FF; text-decoration: none; @@ -26,6 +27,7 @@ a { text-transform: uppercase; } +.main.index .resource-category button:hover, a:hover { border-bottom: 1px solid #A200FF; } @@ -65,7 +67,12 @@ a:visited { border: 2px solid #ddd; } -nav { +.main.index .resource-category.active li:before { + content: "፧"; + margin-right: 1em; +} + +.resource-nav { background: white; width: 10%; margin: 2.5em 1em; @@ -89,21 +96,63 @@ h2 { transform: rotate(-1deg); } -.main.index .resource-category a.add-new { - border-bottom: 3px solid rgba(0, 0, 0, 0); +.main.index .resource-category nav { float: right; - font-size: 1.5em; +} + +.main.index .resource-category.active ol { + cursor: -webkit-grab; + cursor: grab; +} + +.main.index .resource-category.active li a { + pointer-events: none; +} + + /* Makes the button look like a link */ +.main.index .resource-category button { + background: none !important; + height: 1.5em; + border: none; + padding: 0 !important; + font: inherit; + cursor: pointer; +} + +.main.index .resource-category .btn { + border-bottom: 3px solid rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.25); + line-height: 20px; } -.main.index .resource-category li { - margin: 1em 0; +.main.index .resource-category .btn { + display: none; +} + +.main.index .resource-category .btn.active { + display: inline; } -.main.index .resource-category a.add-new:hover { +.main.index .resource-category .btn:hover { border-bottom: 3px solid rgba(0, 0, 0, 0.25); } +.main.index .resource-category .btn { + margin-right: 1em; +} + +.main.index .resource-category .btn:last-child { + margin-right: 0; +} +.main.index .resource-category .add-btn { + font-size: 20px; +} + +.main.index .resource-category li { + margin: 1em 0; +} + + .main.resource { float: left; margin-top: 2em; @@ -278,3 +327,7 @@ li.image-element .remove-image:hover { .clear { clear: both; } + +.hidden { + display: none; +} diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 441172f..1ab9956 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -50,10 +50,10 @@ var OKAdmin = function(){ })) // fix post indexing in list-driven inputs - $("form").submit(function(){ + $(".main.resource form").submit(function(){ $(".image-element").each(function(index){ $(this).find("input,textarea").each(function(){ - var field = $(this).attr("name").replace(/\[\]/, "[" + index + "]") + var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]") $(this).attr("name", field) }) }) @@ -67,6 +67,47 @@ var OKAdmin = function(){ e.preventDefault() } }) + + $(".resource-category").on("click", ".edit-btn", function(e) { + e.preventDefault(); + var $parent = $(e.delegateTarget); + var $editBtn = $parent.find(".edit-btn"); + var $cancelBtn = $parent.find(".cancel-btn"); + var $saveBtn = $parent.find(".save-btn"); + var $ol = $parent.find("ol"); + var toggles = [$parent, $cancelBtn, $saveBtn, $editBtn]; + + $ol.sortable(); + $ol.disableSelection(); + toggle(); + + $cancelBtn.one("click", function(e) { + $ol.sortable("cancel"); + $ol.enableSelection(); + toggle(); + }); + + $saveBtn.one("click", function(e) { + $ol.sortable(); + toggle(); + }); + + function toggle() { + toggles.forEach(function($el) { + $el.toggleClass('active'); + }) + } + }); + + $(".resource-category").on("submit", "form", function(e) { + var $parent = $(e.delegateTarget); + $parent.find(".resource-input").each(function(index) { + var $input = $(this); + var parsed = JSON.parse($input.val()); + parsed.__index = index; + $input.val(JSON.stringify(parsed)); + }) + }); function pressEnter(fn){ return function(e){ diff --git a/themes/okadmin/templates/index.liquid b/themes/okadmin/templates/index.liquid index 95c64dd..0672613 100644 --- a/themes/okadmin/templates/index.liquid +++ b/themes/okadmin/templates/index.liquid @@ -1,23 +1,36 @@ {% include 'partials/head' %} +{% include 'partials/flash' %} + <section class="index main"> {% for pair in resources %} {% assign name = pair[0] %} {% assign resource = pair[1] %} - {% assign spec = resource.spec %} <section class="resource-category {{name}}"> - <header> - <h2>{{name | capitalize}}</h2> - </header> - <ul class="resource-list"> - {% for data in resource.data %} - <li><a href="{{resource.type}}/{{data.id}}/">{{data.id}}</a></li> - {% endfor %} - </ul> - <footer> - <a class="add-new" href="{{resource.type}}/new/">+</a> - </footer> + <form action="{{resource.type}}/__batch/" method="POST"> + <header> + <h2>{{name | capitalize}}</h2> + </header> + <input type="hidden" name="_method" value="PUT"> + <ol class="resource-list"> + {% for data in resource.data %} + <li> + <a href="{{resource.type}}/{{data.id}}/">{{data.id}}</a> + <input class="resource-input" type="hidden" name="{{resource.type}}[{{forloop.index0}}]" value='{{data | stringify}}'> + </li> + {% endfor %} + </ol> + <footer> + <nav> + <a class="btn cancel-btn" href="#">cancel</a> + <button type="submit" + class="btn save-btn" href="#">save</button> + <a class="btn edit-btn active" href="#">edit</a> + <a class="btn add-btn active" href="{{resource.type}}/new/">+</a> + </nav> + </footer> + </form> </section> {% endfor %} diff --git a/themes/okadmin/templates/partials/errors.liquid b/themes/okadmin/templates/partials/flash.liquid index cdb0b25..1980ab5 100644 --- a/themes/okadmin/templates/partials/errors.liquid +++ b/themes/okadmin/templates/partials/flash.liquid @@ -1,10 +1,13 @@ +<div class="success"> + {% for info in success %} + <div class="message">{{info.action}}</div> + {% endfor %} +</div> <div class="errors"> {% for error in errors %} <div class="error"> <div class="message">{{error.message}}</div> - <div class="assertion"> - Expected {{error.expected}} but got {{error.actual}} - </div> </div> {% endfor %} </div> + diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 7d23c9e..99258f3 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -4,24 +4,28 @@ {% assign type = spec.type %} <div class="property {{type}}"> - <label for="{{name}}">{{name | capitalize}}</label> + <label + {% if spec.hidden %} + class="hidden" + {% endif %} + for="{{name}}">{{name | capitalize}}</label> {% if type == 'string' %} <input - {% if spec.disabled %} - disabled="true" + {% if spec.hidden %} + class="hidden" {% endif %} name="{{name}}" type="text" value="{{spec.value}}"> {% elsif type == 'text' %} <textarea - {% if spec.disabled %} - disabled="true" + {% if spec.hidden %} + class="hidden" {% endif %} name="{{name}}">{{spec.value}}</textarea> {% elsif type == 'enum' %} <select - {% if spec.disabled %} - disabled="true" + {% if spec.hidden %} + class="hidden" {% endif %} name="{{name}}"> {% for option in spec.options %} @@ -43,8 +47,8 @@ <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> + <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}"> + <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea> <img src="{{image.uri}}" alt="{{image.caption}}"> <button class="remove-image">♲</button> </li> @@ -64,6 +68,8 @@ </li> </script> </div> + {% elsif type == 'meta' %} + <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}"> {% else %} <p><pre style="color: red">Admin template doesn't support '{{type}}' properties!</pre></p> {% endif %} diff --git a/themes/okadmin/templates/resource.liquid b/themes/okadmin/templates/resource.liquid index c321e8a..8078778 100644 --- a/themes/okadmin/templates/resource.liquid +++ b/themes/okadmin/templates/resource.liquid @@ -1,8 +1,8 @@ {% include 'partials/head' %} -{% include 'partials/errors' %} +{% include 'partials/flash' %} -<nav> +<nav class="resource-nav"> <a href="../..">Back</a> </nav> diff --git a/themes/okadmin/templates/resource_new.liquid b/themes/okadmin/templates/resource_new.liquid index c57dd83..d059445 100644 --- a/themes/okadmin/templates/resource_new.liquid +++ b/themes/okadmin/templates/resource_new.liquid @@ -1,8 +1,8 @@ {% include 'partials/head' %} -{% include 'partials/errors' %} +{% include 'partials/flash' %} -<nav> +<nav class="resource-nav"> <a href="../..">Back</a> </nav> |