flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 20:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

added vertical page align to layout, minor tweeks to magazine.css...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-12 03:45:39 +04:00
parent 076d2a0228
commit eed633a02a
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
layout.html
View File

@ -37,6 +37,18 @@
transition: none; transition: none;
} }
/* vertical */
.vertical.magazine,
.vertical.article,
.vertical.group {
vertical-align: top;
}
.vertical .article,
.vertical .group,
.vertical .page {
display: block;
}
</style> </style>
<script src="ext-lib/jquery.js"></script> <script src="ext-lib/jquery.js"></script>
@ -389,7 +401,7 @@ $(document).ready(function(){
</div> </div>
</div> </div>
</div> </div>
<div class="article"> <div class="article vertical">
<div class="cover page"> <div class="cover page">
<div class="content"> <div class="content">
<h1>Article Cover</h1> <h1>Article Cover</h1>
@ -399,21 +411,31 @@ $(document).ready(function(){
</div> </div>
</div> </div>
<div class="page"> <div class="group">
<div class="content"> <div class="page">
Page <div class="content">
Page
<div class="page-number-text">[PAGE NUMBER]</div> <div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div>
<div class="page">
<div class="content">
Page
<div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div>
<div class="page">
<div class="content">
Page<br>
<a href="#home">home</a><br>
<div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div> </div>
</div> </div>
<div class="page">
<div class="content">
Page<br>
<a href="#home">home</a><br>
<div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div>
</div> </div>
<div class="article"> <div class="article">
<!-- page set --> <!-- page set -->

6
layout.js
View File

@ -41,6 +41,7 @@ function getPageNumber(page){
if(!NAVIGATE_RELATIVE_TO_VISIBLE){ if(!NAVIGATE_RELATIVE_TO_VISIBLE){
return $('.page').index($('.current.page')) return $('.page').index($('.current.page'))
} else { } else {
// XXX this gets crazy when magazine is scaled...
var s = $('.viewer').scrollLeft() var s = $('.viewer').scrollLeft()
var W = $('.viewer').width() var W = $('.viewer').width()
var scale = getMagazineScale() var scale = getMagazineScale()
@ -56,6 +57,7 @@ function getPageNumber(page){
} }
} }
function getMagazineScale(){ function getMagazineScale(){
return getElementScale($('.magazine')) return getElementScale($('.magazine'))
} }
@ -67,6 +69,7 @@ function setMagazineScale(scale){
mag.css({ mag.css({
'margin-left': m, 'margin-left': m,
'margin-right': m 'margin-right': m
// XXX also add margins at top and bottom for vertical elements...
}) })
setElementScale(mag, scale) setElementScale(mag, scale)
setCurrentPage() setCurrentPage()
@ -74,8 +77,6 @@ function setMagazineScale(scale){
/********************************************************* actions ***/ /********************************************************* actions ***/
function setCurrentPage(n){ function setCurrentPage(n){
@ -104,6 +105,7 @@ function setCurrentPage(n){
var offset = $('.viewer').width()/2 - (cur.width()/2)*scale var offset = $('.viewer').width()/2 - (cur.width()/2)*scale
} }
cur.ScrollTo({ cur.ScrollTo({
offsetTop: $('.viewer').height()/2 - (cur.height()/2)*scale,
offsetLeft: offset offsetLeft: offset
}) })
} }

4
magazine.css
View File

@ -24,7 +24,7 @@ body {
/* XXX make this browser-sized... */ /* XXX make this browser-sized... */
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: middle;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
@ -175,7 +175,7 @@ body {
.magazine { .magazine {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: middle;
top: 50%; top: 50%;
min-width: 200px; min-width: 200px;