diff --git a/editor.js b/editor.js index bb23ed3..dd77951 100755 --- a/editor.js +++ b/editor.js @@ -172,7 +172,7 @@ function movePageTo(page, position){ } else { page.insertAfter(target) } - setCurrentPage() + setCurrentPage(page) $('.viewer').trigger('pageMoved', page) return page } diff --git a/index.html b/index.html index d852251..c87a704 100755 --- a/index.html +++ b/index.html @@ -67,45 +67,79 @@ opacity: 0.8; - -webkit-transition: all 0.3s ease; - -moz-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - -ms-transition: all 0.3s ease; - transition: all 0.3s ease; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; } .editor .current-page-indicator { display: block; } -.editor .right-button, -.editor .left-button { - display: block; +.editor .current-page-indicator .button { position: relative; + display: block; width: 100px; height: 100px; + + margin: 15px; + + font-size: 50px; + + background: white; + color: black; + border: solid black 5px; + border-radius: 50px; + + box-shadow: 2px 2px 7px 0px black; } -.editor.page-fit-to-viewer .right-button, -.editor.page-fit-to-viewer .left-button { +.editor.page-fit-to-viewer .current-page-indicator .button { width: 50px; height: 50px; + + border: solid black 2px; + border-radius:25px; + font-size: 25px; } -.editor .left-button { - float: left; - left: -50px; -} -.editor.page-fit-to-viewer .left-button { - left: 0px; -} - -.editor .right-button { - float: right; - right: -50px; -} -.editor.page-fit-to-viewer .right-button { +.editor .current-page-indicator .button.remove { + position: absolute; + margin: -50px; + top: 0px; right: 0px; } +.editor.page-fit-to-viewer .current-page-indicator .button.remove { + margin: -25px; + margin: 15px; +} + +.editor .current-page-indicator .left-toolbar, +.editor .current-page-indicator .right-toolbar { + position: absolute; + + top: 30%; +} +.editor.page-fit-to-viewer .current-page-indicator .left-toolbar, +.editor.page-fit-to-viewer .current-page-indicator .right-toolbar { + top: 40%; +} +.editor .current-page-indicator .left-toolbar { + left: 0px; + margin-left: -60px; +} +.editor .current-page-indicator .right-toolbar { + right: 0px; + margin-right: -60px; +} +.editor.page-fit-to-viewer .current-page-indicator .left-toolbar{ + margin: 0px; +} +.editor.page-fit-to-viewer .current-page-indicator .right-toolbar { + margin: 0px; +} + @@ -130,24 +164,43 @@ function setupEditor(){ var indicator = $('.current-page-indicator') - // remove - $('') + + // the toolbars... + var left_bar = $('
').appendTo(indicator) + var right_bar = $('
').appendTo(indicator) + + + + $('') .appendTo(indicator) .click(function(){ - shiftPageLeft() + setTransitionDuration($('.magazine'), 0) + removePage() }) - $('') - .appendTo(indicator) + + + $('') + .appendTo(right_bar) .click(function(){ shiftPageRight() }) - - $('') - .appendTo(indicator) + $('') + .appendTo(right_bar) .click(function(){ - removePage() }) + + $('') + .appendTo(left_bar) + .click(function(){ + shiftPageLeft() + }) + $('') + .appendTo(left_bar) + .click(function(){ + }) + + } function clearEditor(){ $('.current-page-indicator').children().remove() @@ -315,131 +368,6 @@ $(document).ready(function(){ - -
- - - - New Magazine - - - - - + - - - - M - - - - -
- -
- - - New Article - - - - - + - - - - A - - - - - - - - Shift Article Left - - - - - - - - - A - - - - - - - - Shift Article Right - - - - - - A - - - -
- -
- -
- - - New Page - - - - - + - - - - P - - - - - - - - Shift Page Left - - - - - - - - - P - - - - - - - - Shift Page Right - - - - - - P - - - -
- -
- - -
@@ -955,7 +883,8 @@ $(document).ready(function(){ -
+
+
diff --git a/magazine.css b/magazine.css index 72a5c64..dd63bba 100755 --- a/magazine.css +++ b/magazine.css @@ -371,10 +371,12 @@ body { } +/* .inline-editor-mode .left-toolbar, .left-toolbar { display: none; } +*/ .settings.page { display: none; } @@ -382,6 +384,7 @@ body { display: inline-block; } +/* .editor-mode .left-toolbar { position: absolute; display: block; @@ -409,7 +412,7 @@ body { display: block; cursor: hand; } - +*/ /* navigator... */