diff --git a/index.html b/index.html index 1d1d4e7..88a0559 100755 --- a/index.html +++ b/index.html @@ -741,32 +741,41 @@ $(document).ready(function(){ -
-
- +
+
+
[PAGE NUMBER]
+
+
+
+
+
[PAGE NUMBER]
-
-
-
- - -
[PAGE NUMBER]
-
-
-
- -
+
+
[PAGE NUMBER]
+
+
+ +
+
+ +
[PAGE NUMBER]
diff --git a/layout.js b/layout.js index ace9087..9247a64 100755 --- a/layout.js +++ b/layout.js @@ -11,7 +11,6 @@ var DEFAULT_TRANSITION_DURATION = 200 var INNERTIA_SCALE = 0.25 - /********************************************************** layout ***/ var toggleThemes = createCSSClassToggler('.chrome', [ @@ -22,6 +21,13 @@ var toggleThemes = createCSSClassToggler('.chrome', [ ]) +// NOTE: this should not change anything unless the screen size changes... +function fitScreenSizedPages(){ + var s = getPageTargetScale(1) + var W = $('.viewer').width() + $(SCREEN_SIZED_PAGES).width(W / s) +} + var togglePageFitMode = createCSSClassToggler( '.chrome', 'page-fit-to-viewer', @@ -35,6 +41,7 @@ var togglePageFitMode = createCSSClassToggler( var n = getPageNumber() $(RESIZABLE_PAGES).width('') } + fitScreenSizedPages() setCurrentPage(n) }) @@ -99,20 +106,24 @@ function handleClick(evt, data){ // Click on caption... function handleCaption(evt, data){ elem = $(data.orig_event.target) - if(elem.is('.vertical-image-fit, .horizontal-image-fit') - || elem.parents('.vertical-image-fit, .horizontal-image-fit').length > 0){ + if(elem.is('.image-fit-height, .image-fit') + || elem.parents('.image-fit-height, .image-fit').length > 0){ // prevent doing anything in ribbon mode.. if(togglePageView('?') == 'off'){ return } - if(elem.hasClass('caption')){ - elem.toggleClass('hidden') - return + if(!elem.hasClass('caption')){ + elem = elem.parents('.page').find('.caption') } - elem.parents('.page').find('.caption').toggleClass('hidden') + // hide and do not show empty captions... + if(elem.text().trim() != ''){ + elem.toggleClass('hidden') + } else { + elem.addClass('hidden') + } } } diff --git a/magazine-editor.css b/magazine-editor.css index 8f8dca1..473c87b 100755 --- a/magazine-editor.css +++ b/magazine-editor.css @@ -6,6 +6,8 @@ display: none; position: absolute; box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; opacity: 0.8; -webkit-transition: all 0.3s ease; @@ -193,10 +195,12 @@ /* allways show captions in editor's full page mode */ +.full-page-view-mode.editor .current.page.image-fit .caption, .full-page-view-mode.editor .current.page.horizontal-image-fit .caption, .full-page-view-mode.editor .current.page.vertical-image-fit .caption { opacity: 0.8; height: auto; + min-height: 100px; } diff --git a/magazine.css b/magazine.css index 4617e08..89011b7 100755 --- a/magazine.css +++ b/magazine.css @@ -38,11 +38,13 @@ body { background: white; + /* -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; + */ } .page .content { @@ -61,11 +63,13 @@ body { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; + /* -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; + */ } .page .bookmark { @@ -526,6 +530,8 @@ body { padding-right: 15px; box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; } .overlay > div:last-child { position: absolute; @@ -589,6 +595,8 @@ div.page-number-text { left: 0px; box-sizing: border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; padding: 15px; padding-bottom: 30px; @@ -787,41 +795,21 @@ div.page-number-text { overflow: hidden; } -/* XXX fin a universal way to do this... +/* image-fit */ .page.image-fit .content { - display: table-cell; - vertical-align: middle; - width: auto; - min-width: 400px; - max-width: 800px; -} -.page.image-fit .content img { - height: auto; - max-height: 100%; - width: auto; - max-width: 100%; - - cursor: hand; -} -*/ - -.page.vertical-image-fit .content { - width: auto; -} -.page.vertical-image-fit .content img { + width: 100%; height: 100%; cursor: hand; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; } -.page.horizontal-image-fit .content > div { - display: table-cell; - /* XXX this is ugly... */ - width: 800px; - height: 600px; - vertical-align: middle; +.page.image-fit-height .content { + width: auto; } -.page.horizontal-image-fit .content img { - width: 100%; +.page.image-fit-height .content img { + height: 100%; cursor: hand; } diff --git a/magazine.js b/magazine.js index ac34873..91bb6f5 100755 --- a/magazine.js +++ b/magazine.js @@ -74,6 +74,15 @@ var NON_RESIZABLE_PAGES = $(NO_RESIZE_CLASSES) .toArray() .join(', ') +var SCREEN_SIZED_PAGE_CLASSES = [ + 'screen-size', + 'image-fit', +] +var SCREEN_SIZED_PAGES = $(SCREEN_SIZED_PAGE_CLASSES) + .map(function(_, e){ return '.page.' + e + '' }) + .toArray() + .join(', ') + /*********************************************************** modes ***/