flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-12-23 12:01:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

added a different full screen style...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-21 20:05:05 +04:00
parent c3906bbb2a
commit 5aa2d28b05
2 changed files with 81 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@ -169,6 +169,11 @@ function setElementScale(elem, scale){
/*********************************************************************/
togglePageDragging = createCSSClassToggler(
'.viewer',
'dragging')
togglePageView = createCSSClassToggler(
'.viewer',
'page-view-mode',
@ -316,10 +321,15 @@ function swipeUpdate(evt, phase, direction, distance){
}
setTimeout(function(){mag.removeClass('unanimated')}, 5)
} else if ( phase == 'start') {
togglePageDragging('on')
} else if ( phase == 'cancel') {
togglePageDragging('off')
setCurrentPage()
} else if ( phase =='end' ) {
togglePageDragging('off')
// see which page is closer to the middle of the screen and set it...
// do this based on how much we dragged...
var p = Math.ceil((distance/scale)/cur.width())
@ -435,7 +445,9 @@ function createPage(article, template){
<div class="aligner">
<div class="magazine">
<div class="cover page current">
Magazine Cover
<div class="content">
Magazine Cover
</div>
</div>
<!-- XXX do we need a Magazine Credits page??? -->
@ -451,70 +463,85 @@ function createPage(article, template){
<!-- XXX do we need an Article Credits page??? -->
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
</div>
<div class="article">
<div class="cover page">
Article Cover
<div class="content">
Article Cover
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
</div>
<div class="article">
<div class="cover page">
Article Cover
<div class="content">
Article Cover
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
</div>
</div>
<div class="article">
<div class="cover page">
Article Cover
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
<div class="content">
Page
</div>
</div>
</div>
</div>

27
magazine.css
View File

@ -42,7 +42,12 @@ body {
/* change to relative units... */
margin-top: -300px;
border: solid red 1px;
-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;
}
/* general layout */
@ -58,6 +63,11 @@ body {
background: gray;
-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;
}
.scaler {
@ -123,13 +133,22 @@ body {
/* modes */
.page-view-mode .viewer {
.page-view-mode.viewer {
background: white;
}
.page-view-mode .page {
.page-view-mode .page .content {
opacity: 0;
}
.page-view-mode .current.page {
.page-view-mode .current.page .content {
opacity: 1;
}
.page-view-mode.viewer.dragging {
background: silver;
}
.page-view-mode.dragging .page .content {
opacity: 0.5;
}