diff options
| -rw-r--r-- | examples/db.json | 63 | ||||
| -rw-r--r-- | themes/okadmin/public/css/main.css | 65 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 43 | ||||
| -rw-r--r-- | themes/okadmin/templates/index.liquid | 20 | ||||
| -rw-r--r-- | themes/okadmin/templates/resource.liquid | 2 | ||||
| -rw-r--r-- | themes/okadmin/templates/resource_new.liquid | 2 |
6 files changed, 168 insertions, 27 deletions
diff --git a/examples/db.json b/examples/db.json index 148391a..20d4510 100644 --- a/examples/db.json +++ b/examples/db.json @@ -3,8 +3,8 @@ "bread": [ { "type": "pretzel", - "description": "really a very tasty bread! yup yes", - "color": "green", + "description": "really a very tasty bread!", + "color": "red", "id": "pretzel", "title": "Pretzel Chips", "images": [ @@ -23,7 +23,8 @@ "token": "", "title": "", "thumb": "" - } + }, + "__index": 0 }, { "type": "bagel", @@ -38,31 +39,73 @@ "token": "112498725", "title": "FW14-2H-VIDEO-V4 2", "thumb": "http://i.vimeocdn.com/video/497493142_640.jpg" - } + }, + "__index": 1 }, { "type": "pumpernickel", - "description": "grandma's recipe", + "description": "yup", "id": "pumpernickel", - "title": "Pumpernickel", + "title": "ok", "images": [ { "uri": "cool", "caption": "cool" } - ] + ], + "color": "red", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "__index": 2 + }, + { + "type": "cracker", + "title": "", + "description": "once upon a time this noble creature etc", + "color": "red", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "__index": 4, + "id": "cracker" + }, + { + "type": "croissant", + "title": "", + "description": "wow just wow", + "color": "red", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "__index": 3, + "id": "croissant" } ], "page": [ { "title": "About Us", "body": "Just a small bakery", - "id": "about" + "id": "about", + "__index": 1 }, { - "title": "contact", + "title": "ok...", "body": "2406 Old Rd, San Juan Bautista", - "id": "contact" + "id": "contact", + "__index": 0 } ] }
\ No newline at end of file diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index 73f9735..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; diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 4d13bb2..1ab9956 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -50,7 +50,7 @@ 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(/\[[0-9]*\]/, "[" + index + "]") @@ -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 830fb2e..0672613 100644 --- a/themes/okadmin/templates/index.liquid +++ b/themes/okadmin/templates/index.liquid @@ -8,19 +8,27 @@ {% assign resource = pair[1] %} <section class="resource-category {{name}}"> - <form action="{{resource.type}}/batch/" method="POST"> + <form action="{{resource.type}}/__batch/" method="POST"> <header> <h2>{{name | capitalize}}</h2> </header> <input type="hidden" name="_method" value="PUT"> - <ul class="resource-list"> + <ol class="resource-list"> {% for data in resource.data %} - <li><a href="{{resource.type}}/{{data.id}}/">{{data.id}}</a></li> - <input type="hidden" name="{{resource.type}}[{{forloop.index0}}]" value='{{data | stringify}}'> + <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 %} - </ul> + </ol> <footer> - <a class="add-new" href="{{resource.type}}/new/">+</a> + <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> diff --git a/themes/okadmin/templates/resource.liquid b/themes/okadmin/templates/resource.liquid index 53cd83e..8078778 100644 --- a/themes/okadmin/templates/resource.liquid +++ b/themes/okadmin/templates/resource.liquid @@ -2,7 +2,7 @@ {% 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 8e80171..d059445 100644 --- a/themes/okadmin/templates/resource_new.liquid +++ b/themes/okadmin/templates/resource_new.liquid @@ -2,7 +2,7 @@ {% include 'partials/flash' %} -<nav> +<nav class="resource-nav"> <a href="../..">Back</a> </nav> |