flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-11-04 05:50:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

more styling changes...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-29 19:37:54 +04:00
parent e280c399e0
commit bb1de0f5f4
2 changed files with 94 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
index.html
View File

@ -406,35 +406,92 @@ $(document).ready(function(){
<div class="content">
<h1 name="config">Configuration demo</h1>
<div>
Pages in ribbon:
<input id="PAGES_IN_RIBBON" type="text"><button onclick="saveSettings()">save</button>
</div>
<div>
Fit page to view:
<button id="FIT_PAGE_TO_VIEW" onclick="toggleSetting(this)"></button>
</div>
<div>
Animate window resize:
<button id="ANIMATE_WINDOW_RESIZE" onclick="toggleSetting(this)"></button>
</div>
<div>
Drag in full page view:
<button id="DRAG_FULL_PAGE" onclick="toggleSetting(this)"></button>
</div>
<div>
Toggle viewer animation (affects transition to and from full page view):
<button id="viewer_transition_state" onclick="toggleViewerAnimation()"></button>
</div>
<div>
Enable different size pages (still flaky):
<button id="USE_REAL_PAGE_SIZES" onclick="toggleSetting(this)"></button>
</div>
<p>
NOTE: this is not an actual configuration page, just a live demo
of some of the available configuration option effects.
</p>
<hr noshade color="silver">
<style>
.settings tr td:first-child {
text-align: right;
vertical-align: middle;
padding-right: 10px;
}
.settings tr {
height: 30px;
}
.settings button, .settings input {
background: white;
height: 20px;
}
.settings input {
border: solid silver 1px;
}
.settings button {
border: solid gray 1px;
cursor: hand;
padding-left: 15px;
padding-right: 15px;
}
</style>
<table class="settings" width="100%">
<tr>
<td width="50%">
Pages in ribbon:
</td>
<td>
<input id="PAGES_IN_RIBBON" type="text" size="8" style="text-align:center" disabled>
<button onclick="$('#PAGES_IN_RIBBON').attr('value', parseInt($('#PAGES_IN_RIBBON').attr('value'))+1); saveSettings()">+</button>
<button onclick="$('#PAGES_IN_RIBBON').attr('value', parseInt($('#PAGES_IN_RIBBON').attr('value'))-1); saveSettings()">-</button>
</td>
</tr>
<tr>
<td>
Fit page to view:
</td>
<td>
<button id="FIT_PAGE_TO_VIEW" onclick="toggleSetting(this)"></button>
</td>
</tr>
<tr>
<td>
Animate window resize:
</td>
<td>
<button id="ANIMATE_WINDOW_RESIZE" onclick="toggleSetting(this)"></button>
</td>
</tr>
<tr>
<td>
Drag in full page view:
</td>
<td>
<button id="DRAG_FULL_PAGE" onclick="toggleSetting(this)"></button>
</td>
</tr>
<tr>
<td>
Toggle viewer animation (affects transition to and from full page view):
</td>
<td>
<button id="viewer_transition_state" onclick="toggleViewerAnimation()"></button>
</td>
</tr>
<tr>
<td>
Enable different size pages (still flaky):
</td>
<td>
<button id="USE_REAL_PAGE_SIZES" onclick="toggleSetting(this)"></button>
</td>
</tr>
<table/>
<hr noshade color="silver">
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
<a href="#back">go back</a>, or return to <a href="#home">magazine cover...</a><br>
</div>
@ -462,7 +519,14 @@ $(document).ready(function(){
function saveSettings(){
var v = parseInt($('#PAGES_IN_RIBBON').attr('value'))
PAGES_IN_RIBBON = v == null ? PAGES_IN_RIBBON : v
// ignore bad values...
v = v == null ? PAGES_IN_RIBBON : v
// can't be less that 1...
v = v < 1 ? 1 : v
PAGES_IN_RIBBON = v
// we need to reset the visible value in case it was wrong...
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
FIT_PAGE_TO_VIEW = $('#FIT_PAGE_TO_VIEW').text() == 'true' ? true : false
ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false

10
magazine.css
View File

@ -245,14 +245,14 @@ body {
text-align: center;
overflow: hidden;
background: black;
opacity: 0.4;
background: #555;
opacity: 0.9;
height: 50px;
left: 0px;
font-size: 14px;
color: white;
color: silver;
}
.top-toolbar .title,
.bottom-toolbar .title {
@ -269,7 +269,7 @@ body {
text-align: right;
}
.top-toolbar a, .bottom-toolbar a {
color: white;
color: silver;
text-decoration: none;
}
.top-toolbar .controls, .bottom-toolbar .controls {
@ -287,7 +287,6 @@ body {
}
.button {
display: inline-block;
color: white;
font-size: 25px;
font-weight: bold;
@ -309,6 +308,7 @@ body {
/* navigator... */
.navigator {
opacity: 0.6;
}
.navigator .bar {
position: relative;