flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-29 03:00:09 +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;
}
/* vertical */
.vertical.magazine,
.vertical.article,
.vertical.group {
vertical-align: top;
}
.vertical .article,
.vertical .group,
.vertical .page {
display: block;
}
</style>
<script src="ext-lib/jquery.js"></script>
@ -389,7 +401,7 @@ $(document).ready(function(){
</div>
</div>
</div>
<div class="article">
<div class="article vertical">
<div class="cover page">
<div class="content">
<h1>Article Cover</h1>
@ -399,21 +411,31 @@ $(document).ready(function(){
</div>
</div>
<div class="page">
<div class="content">
Page
<div class="group">
<div class="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 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 class="article">
<!-- page set -->

6
layout.js
View File

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

4
magazine.css
View File

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