mirror of
				https://github.com/flynx/PortableMag.git
				synced 2025-10-31 12:00:11 +00:00 
			
		
		
		
	general repo cleanup and pruning...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									76499b6c8f
								
							
						
					
					
						commit
						4b0f7a88ce
					
				
							
								
								
									
										325
									
								
								editor.html
									
									
									
									
									
								
							
							
						
						
									
										325
									
								
								editor.html
									
									
									
									
									
								
							| @ -1,325 +0,0 @@ | ||||
| <!-- XXX for some reason a doctype kills the layout, need to investigate --> | ||||
| <!--DOCTYPE html--> | ||||
| <html> | ||||
| <head> | ||||
| <title>PortableMag</title> | ||||
| 
 | ||||
| <link rel="stylesheet" href="magazine.css"> | ||||
| <link rel="stylesheet" href="magazine-custom.css"> | ||||
| 
 | ||||
| <script src="ext-lib/jquery.js"></script> | ||||
| <script src="ext-lib/jquery.touchSwipe.js"></script> | ||||
| <script src="ext-lib/jstorage.js"></script> | ||||
| <!-- EXPERIMENTAL --> | ||||
| <!--  | ||||
| XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorganization  | ||||
| 	this might be a good idea/exersize sometime in the future... | ||||
| --> | ||||
| <!--script src="ext-lib/jquery.scrollto.js"></script--> | ||||
| 
 | ||||
| <script src="lib/jli.js"></script> | ||||
| 
 | ||||
| <script src="magazine.js"></script> | ||||
| <script src="navigator.js"></script> | ||||
| <script src="editor.js"></script> | ||||
| 
 | ||||
| <!-- configuration, keep this last... --> | ||||
| <script src="platform.js"></script> | ||||
| <script src="keybindings.js"></script> | ||||
| <script src="config.js"></script> | ||||
| 
 | ||||
| <script> | ||||
| 
 | ||||
| var DEBUG = true | ||||
| 
 | ||||
| $(document).ready(function(){ | ||||
| 
 | ||||
| 	if(DEBUG){ | ||||
| 		$('.splash').click(function(){ | ||||
| 			$('.splash').fadeOut() | ||||
| 		}) | ||||
| 	} | ||||
| 
 | ||||
| 	$(window) | ||||
| 		.resize(viewResizeHandler) | ||||
| 		.bind('hashchange', hashChangeHandler) | ||||
| 
 | ||||
| 	$(document) | ||||
| 		.keydown(makeKeyboardHandler(keybindings)) | ||||
| 
 | ||||
| 	$('.viewer') | ||||
| 		// setup internal events... | ||||
| 		.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState) | ||||
| 		.on('pageChanged', updatePageNumberIndicator) | ||||
| 		.on('magazineDataLoaded', loadMagazineChrome) | ||||
| 
 | ||||
| 		// templates... | ||||
| 		.on('pageCreated articleCreated magazineCreated ' + | ||||
| 				'pageMoved pageRemoved articleMoved articleRemoved', runMagazineTemplates) | ||||
| 
 | ||||
| 		// user interactions... | ||||
| 		.swipe({ | ||||
| 			swipeStatus: swipeHandler, | ||||
| 
 | ||||
| 			// XXX these get called instead of pinches... | ||||
| 			swipeUp: function(event, direction, distance, duration, fingerCount){ | ||||
| 				if(fingerCount == 2){ | ||||
| 					toggleBookmark() | ||||
| 				} else { | ||||
| 					togglePageView() | ||||
| 				} | ||||
| 			}, | ||||
| 			// XXX these get called instead of pinches... | ||||
| 			swipeDown: function(event, direction, distance, duration, fingerCount){ | ||||
| 				if(fingerCount == 2){ | ||||
| 					toggleBookmark() | ||||
| 				} else { | ||||
| 					togglePageView() | ||||
| 				} | ||||
| 			}, | ||||
| 
 | ||||
| 
 | ||||
| 			// XXX for some reasons these lose the competition with swipes... | ||||
| 			pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) { | ||||
| 				if(pinchZoom < distance){ | ||||
| 					return | ||||
| 				} | ||||
| 				if(fingerCount == 2){ | ||||
| 					togglePageView('on') | ||||
| 				} | ||||
| 			}, | ||||
| 			// XXX for some reasons these lose the competition with swipes... | ||||
| 			pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) { | ||||
| 				if(pinchZoom < distance){ | ||||
| 					return | ||||
| 				} | ||||
| 				if(fingerCount == 2){ | ||||
| 					togglePageView('off') | ||||
| 				} | ||||
| 			}, | ||||
| 
 | ||||
| 
 | ||||
| 			// XXX for some reason this deos not bubble up the nested elements... | ||||
| 			click: function(evt, elem){ | ||||
| 				elem = $(elem) | ||||
| 				// bubble up to nearest page... | ||||
| 				if(!elem.hasClass('page')  | ||||
| 						&& elem.parents('.page').length != 0){ | ||||
| 					elem = elem.parents('.page').first() | ||||
| 				} | ||||
| 
 | ||||
| 				// click current page to toggle full page view... | ||||
| 				if(elem.hasClass('current', 'page')  | ||||
| 						&& togglePageView('?') == 'off'){ | ||||
| 					togglePageView('on') | ||||
| 				// click any page to set it to current... | ||||
| 				} else if(elem.hasClass('page')){ | ||||
| 					setCurrentPage(elem) | ||||
| 				} | ||||
| 				return true | ||||
| 			}, | ||||
| 
 | ||||
| 			excludedElements: '.noSwipe, a, [contenteditable=true]', | ||||
| 			fingers: $.fn.swipe.fingers.ALL | ||||
| 			//fingers: $.fn.swipe.fingers.THREE | ||||
| 		}) | ||||
| 
 | ||||
| 	// XXX this will need to be repeated to newly created elements... | ||||
| 	$('[contenteditable=true]') | ||||
| 		.on('focus', function(){ | ||||
| 			toggleInlineEditorMode('on') | ||||
| 		}) | ||||
| 		.on('blur', function(){ | ||||
| 			toggleInlineEditorMode('off') | ||||
| 		}) | ||||
| 
 | ||||
| 
 | ||||
| 	// load state and setup everything that depends on it... | ||||
| 	// XXX load the data with loadJSON() | ||||
| 	loadState() | ||||
| 	// need to call this once per whole page load.... | ||||
| 	setupNavigator() | ||||
| 	// XXX STUB, needed untill we load everything frim JSON... | ||||
| 	$('.viewer').trigger('magazineDataLoaded') | ||||
| 
 | ||||
| 	// set default view... | ||||
| 	togglePageView('on') | ||||
| 
 | ||||
| 	// hide the splash screen... | ||||
| 	$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend', | ||||
| 		function(){ | ||||
| 			// NOTE: this will fix a bug on android -- the pages appear  | ||||
| 			//		to rendering quite a bit longer than loading, so on | ||||
| 			//		loadState() above the current page is set well before | ||||
| 			//		it is alligned correctly, so this will reset the  | ||||
| 			//		current page after everything is aligned... | ||||
| 			setTimeout(function(){ | ||||
| 				//updateView() | ||||
| 				setCurrentPage() | ||||
| 			}, 300) | ||||
| 			// hide the splash... | ||||
| 			setTimeout(function(){ | ||||
| 				$('.splash').fadeOut() | ||||
| 			}, 350) | ||||
| 		}) | ||||
| 	 | ||||
| 
 | ||||
| 	 | ||||
| }) | ||||
| 
 | ||||
| </script> | ||||
| </head> | ||||
| <body> | ||||
| 
 | ||||
| <div class="viewer"> | ||||
| 
 | ||||
| 	<!-- Splash screen --> | ||||
| 	<div class="splash noSwipe"> | ||||
| 		<!-- XXX replace this with a background-image logo... --> | ||||
| 		<table width="100%" height="100%"><tr><td align="center" valign="middle"> | ||||
| 			<h2><i>loading...</i></h2> | ||||
| 		</td></tr></table> | ||||
| 	</div> | ||||
| 
 | ||||
| 
 | ||||
| 	<!-- XXX Magazine title... --> | ||||
| 
 | ||||
| 	<div class="top-toolbar"> | ||||
| 		<div class="left-set"> | ||||
| 			<div class="button cover title"> | ||||
| 				<a href="#home"><span class="magazine-title-text">PortableMag</span> <small>(editor)</small></a> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 		<div class="right-set"> | ||||
| 			<div class="button prev-bookmark"> | ||||
| 				<a href="#prevBookmark"> | ||||
| 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"> | ||||
| 					 <g> | ||||
| 					  <title>Previous bookmark (S-Left)</title> | ||||
| 					  <path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/> | ||||
| 					 </g> | ||||
| 					</svg> | ||||
| 				</a> | ||||
| 			</div> | ||||
| 			<div class="button toggle-bookmark"> | ||||
| 				<a href="#bookmark"> | ||||
| 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"> | ||||
| 					 <g> | ||||
| 					  <title>Toggle bookmark (B)</title> | ||||
| 					  <rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/> | ||||
| 					  <path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/> | ||||
| 					 </g> | ||||
| 					</svg> | ||||
| 				</a> | ||||
| 			</div> | ||||
| 			<div class="button next-bookmark"> | ||||
| 				<a href="#nextBookmark"> | ||||
| 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"> | ||||
| 					 <g> | ||||
| 					  <title>Next bookmark (S-Right)</title> | ||||
| 					  <path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/> | ||||
| 					 </g> | ||||
| 					</svg> | ||||
| 				</a> | ||||
| 			</div> | ||||
| 			<div class="button info" style="opacity: 0.3"> | ||||
| 				<a href="javascript:alert('not implemented yet...')"> | ||||
| 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"> | ||||
| 					 <g> | ||||
| 					  <title>Info</title> | ||||
| 					  <g id="svg_3"> | ||||
| 					   <circle fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="20.341617" cy="20.120354" r="14.302816" id="svg_2" stroke="#ffffff"/> | ||||
| 					   <text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="19.914334" y="23.397665" id="svg_5" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" transform="matrix(1.02694 0 0 1.02694 -0.348556 4.34707)" stroke="#000000">i</text> | ||||
| 					  </g> | ||||
| 					 </g> | ||||
| 					</svg> | ||||
| 				</a> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 	<div class="bottom-toolbar"> | ||||
| 		<!-- this is just an example--> | ||||
| 		<div class="controls"> | ||||
| 			<a href="#home" title="(Home)">Cover</a> | ||||
| 			<a href="#prevBookmark" title="(S-Left)">< Bookmark</a> | ||||
| 			<a href="#prevArticle" title="(C-Left)">< Article</a> | ||||
| 			<a href="#prev" title="Previous page (Left)">< Pa</a><a href="#next" title="Next page (Right)">ge ></a> | ||||
| 			<a href="#nextArticle" title="(C-Right)">Article ></a> | ||||
| 			<a href="#nextBookmark" title="(S-Right)">Bookmark ></a> | ||||
| 			<a href="#end" title="(End)">End</a> | ||||
| 		</div> | ||||
| 		<!-- position indicator --> | ||||
| 		<div class="navigator"> | ||||
| 			<div class="bar"> | ||||
| 				<div class="indicator"></div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 		<div class="page-number">0/0</div> | ||||
| 	</div> | ||||
| 
 | ||||
| <div class="scaler"> | ||||
| <div class="aligner"> | ||||
| 	<div class="magazine" title="PortableMag Templates"> | ||||
| 		<div class="cover page current"> | ||||
| 			<div class="content"> | ||||
| 				<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1> | ||||
| 				<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1--> | ||||
| 
 | ||||
| 				<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> | ||||
| 				 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> | ||||
| 				 <g> | ||||
| 				  <title>PortableMag cover</title> | ||||
| 				  <defs> | ||||
| 				   <path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/> | ||||
| 				  </defs> | ||||
| 				  <text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/> | ||||
| 				  <g id="svg_1"> | ||||
| 				   <g id="svg_8"> | ||||
| 					<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text> | ||||
| 					<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text> | ||||
| 				   </g> | ||||
| 				   <text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text> | ||||
| 				  </g> | ||||
| 				 </g> | ||||
| 				</svg> | ||||
| 					 | ||||
| 			</div> | ||||
| 		</div> | ||||
| 
 | ||||
| 		<!-- XXX do we need a Magazine Credits page??? --> | ||||
| 
 | ||||
| 		<div class="article"> | ||||
| 			<div class="cover page"> | ||||
| 				<div class="content"> | ||||
| 					<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1> | ||||
| 
 | ||||
| 					Magazine title: <span class="magazine-title-text">[MAGAZINE NAME]</span><br> | ||||
| 
 | ||||
| 					<div class="article-index">[ARTICLE INDEX]</div> | ||||
| 
 | ||||
| 					<div class="page-number-text">[PAGE NUMBER]</div> | ||||
| 				</div> | ||||
| 			</div> | ||||
| 			<div class="page"> | ||||
| 				<div class="content"> | ||||
| 					<h1 contenteditable="true">Two column</h1> | ||||
| 					<div contenteditable="true" style="float:left; width: 45%; height: 100%; margin: 10px;"> | ||||
| 						Column 1 | ||||
| 					</div> | ||||
| 					<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;"> | ||||
| 						Column 2 | ||||
| 					</div> | ||||
| 
 | ||||
| 					<div class="page-number-text">[PAGE NUMBER]</div> | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| </div> | ||||
| </div> | ||||
| </div> | ||||
| 
 | ||||
| 
 | ||||
| </body> | ||||
| </html> | ||||
| <!-- vim:set ts=4 sw=4 nowrap : --> | ||||
							
								
								
									
										151
									
								
								index-old.html
									
									
									
									
									
								
							
							
						
						
									
										151
									
								
								index-old.html
									
									
									
									
									
								
							| @ -1,151 +0,0 @@ | ||||
| <html> | ||||
| <head> | ||||
| <title>layout template</title> | ||||
| <link rel="stylesheet" href="layout.css"> | ||||
| <script src="jquery.js"></script> | ||||
| <script src="jquery.touchSwipe.js"></script> | ||||
| <script src="jquery.exif.js"></script> | ||||
| 
 | ||||
| <script> | ||||
| 
 | ||||
| $(document).ready(function(){ | ||||
| 	$('.article').click(function(){ | ||||
| 		var name = $(this).attr('id') | ||||
| 		return setPageTo(name) | ||||
| 	}) | ||||
| 
 | ||||
| 	$('.viewer') | ||||
| 		//.click(toggleIndex) | ||||
| 		.swipe({ | ||||
| 			swipeLeft: nextPage, | ||||
| 			swipeRight: prevPage, | ||||
| 			swipeUp: showIndex, | ||||
| 			swipeDown: hideIndex | ||||
| 		}) | ||||
| }) | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| function getPages(){ | ||||
| 	return $('.article').map(function(e, v){return v.id}).toArray() | ||||
| } | ||||
| 
 | ||||
| function curPageIndex(){ | ||||
| 	var cur = $('.article.current').attr('id') | ||||
| 	return getPages().indexOf(cur) | ||||
| } | ||||
| 
 | ||||
| function setPageTo(name){ | ||||
| 	$('.view.current, .article.current').removeClass('current') | ||||
| 	$('#'+name).addClass('current') | ||||
| 	$('.view.'+name).addClass('current') | ||||
| 	return false | ||||
| } | ||||
| 
 | ||||
| function nextPage(){ | ||||
| 	var i = curPageIndex() | ||||
| 	var pages = getPages() | ||||
| 
 | ||||
| 	if(i+1 >= pages.length){ | ||||
| 		return | ||||
| 	} | ||||
| 
 | ||||
| 	setPageTo(pages[i+1]) | ||||
| } | ||||
| 
 | ||||
| function prevPage(){ | ||||
| 	var i = curPageIndex() | ||||
| 
 | ||||
| 	if(i <= 0){ | ||||
| 		return | ||||
| 	} | ||||
| 
 | ||||
| 	setPageTo(getPages()[i-1]) | ||||
| } | ||||
| 
 | ||||
| function showIndex(){ | ||||
| 	//$('.previews').fadeIn() | ||||
| 	$('.previews').slideDown(100) | ||||
| } | ||||
| 
 | ||||
| function hideIndex(){ | ||||
| 	//$('.previews').fadeOut() | ||||
| 	$('.previews').slideUp(100) | ||||
| } | ||||
| 
 | ||||
| function toggleIndex(){ | ||||
| 	if($('.previews').css('display') == 'none'){ | ||||
| 		showIndex() | ||||
| 	} else { | ||||
| 		hideIndex() | ||||
| 	} | ||||
| 	return false | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| </script> | ||||
| </head> | ||||
| <body> | ||||
| 	<div class="container"> | ||||
| 		<div class="content"> | ||||
| 			<div class="section main current"> | ||||
| 				<div class="viewer"> | ||||
| 					<div class="view A current"> | ||||
| 						<h1>Page A</h1> | ||||
| 						<p> | ||||
| 						The basic actions here are:<br> | ||||
| 						<br><b>swipe right</b> – show next page. | ||||
| 						<br><b>swipe left</b> – show previous page. | ||||
| 						<br><b>swipe up</b> – show page index. | ||||
| 						<br><b>swipe down</b> – hide page index. | ||||
| 						</p> | ||||
| 					</div> | ||||
| 					<div class="view B"> | ||||
| 						<div style="height: 95%; width: 95%; margin: 2%; border: 5px dotted gray;"> | ||||
| 							<h2>Page B</h2> | ||||
| 						</div> | ||||
| 
 | ||||
| 					</div> | ||||
| 					<div class="view C"> | ||||
| 						<h2>Page C</h2> | ||||
| 						<!-- images need caching... --> | ||||
| 						<!--img src="img.jpg" exif="true" onclick="alert($(this).exifPretty())"/--> | ||||
| 						<img src="img.jpg"/> | ||||
| 					</div> | ||||
| 					<div class="view D"> | ||||
| 						<h2>Page D</h2> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 				<!-- remove this... --> | ||||
| 				<div class="previews"> | ||||
| 					<div class="article current" id="A"> | ||||
| 						<div class="preview"></div> | ||||
| 						<div class="text"> | ||||
| 							Article A Title | ||||
| 						</div> | ||||
| 					</div> | ||||
| 					<div class="article" id="B"> | ||||
| 						<div class="preview"></div> | ||||
| 						<div class="text"> | ||||
| 							Article B Title | ||||
| 						</div> | ||||
| 					</div> | ||||
| 					<div class="article" id="C"> | ||||
| 						<div class="preview"></div> | ||||
| 						<div class="text"> | ||||
| 							Article C Title | ||||
| 						</div> | ||||
| 					</div> | ||||
| 					<div class="article" id="D"> | ||||
| 						<div class="preview"></div> | ||||
| 						<div class="text"> | ||||
| 							Article D Title | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| <!-- vim:set ts=4 sw=4 spell : --> | ||||
| </body> | ||||
| </html> | ||||
							
								
								
									
										158
									
								
								layout.css
									
									
									
									
									
								
							
							
						
						
									
										158
									
								
								layout.css
									
									
									
									
									
								
							| @ -1,158 +0,0 @@ | ||||
| .warning { | ||||
| 	font-weight: bold; | ||||
| 	font-size: 24px; | ||||
| 	color: yellow; | ||||
| 	padding-top: 25px; | ||||
| } | ||||
| 
 | ||||
| .animated,  | ||||
| .splash, | ||||
| .content, | ||||
| .section, | ||||
| .button, | ||||
| .article, | ||||
| .view { | ||||
| 	-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; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| body { | ||||
| 	text-align: center; | ||||
| 	margin: 0px; | ||||
| 	padding: 0px; | ||||
| 
 | ||||
| 	font-family: Arial; | ||||
| 	color: #a7a9ac; | ||||
| } | ||||
| 
 | ||||
| .current.button, .current.article { | ||||
| 	color: gray; | ||||
| 	font-weight: bold; | ||||
| } | ||||
| 
 | ||||
| .container { | ||||
| 	position: relative; | ||||
| 	width: 100%; | ||||
| 	display: inline-block; | ||||
| } | ||||
| 
 | ||||
| .header, .content, .footer { | ||||
| 	position: relative; | ||||
| 	width: 100%; | ||||
| 	height: auto; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| .section-buttons, .previews { | ||||
| 	width: 100%; | ||||
| 	font-size: 0px; | ||||
| 	white-space: nowrap; | ||||
| 	left: 0px; | ||||
| } | ||||
| 
 | ||||
| .section-buttons { | ||||
| 	bottom: 0px; | ||||
| 	position: absolute; | ||||
| } | ||||
| 
 | ||||
| .button, .article { | ||||
| 	display: inline-block; | ||||
| 	position: relative; | ||||
| 	width: 20%; | ||||
| 	cursor: hand; | ||||
| } | ||||
| 
 | ||||
| .button { | ||||
| 	height: 35px; | ||||
| 	font-size: 20px; | ||||
| 	width: 25%; | ||||
| } | ||||
| 
 | ||||
| .viewer { | ||||
| 	position: relative; | ||||
| 	width: 100%; | ||||
| 	height: 100%; | ||||
| 	overflow: hidden; | ||||
| } | ||||
| 
 | ||||
| .previews { | ||||
| 	display: none; | ||||
| 
 | ||||
| 	position: absolute; | ||||
| 	height: auto; | ||||
| 	bottom: 0px; | ||||
| 
 | ||||
| 	background-color: white; | ||||
| 	opacity: 0.8; | ||||
| } | ||||
| 
 | ||||
| .article { | ||||
| 	height: auto; | ||||
| 	font-size: 18px; | ||||
| 	text-align: left; | ||||
| 
 | ||||
| 	margin: 2.5%; | ||||
| 	margin-top: 5%; | ||||
| 	margin-bottom: 7%; | ||||
| } | ||||
| 
 | ||||
| .article:first-child { | ||||
| 	margin-left: 0px; | ||||
| } | ||||
| 
 | ||||
| .article:last-child { | ||||
| 	margin-right: 0px; | ||||
| } | ||||
| 
 | ||||
| .article .preview { | ||||
| 	position: relative; | ||||
| 	width: 100%; | ||||
| 	height: 100px; | ||||
| 	background-color: #d1d2d4; | ||||
| } | ||||
| 
 | ||||
| .article .text { | ||||
| 	padding: 5px; | ||||
| 	padding-top: 10px; | ||||
| } | ||||
| 
 | ||||
| .section { | ||||
| 	display: none; | ||||
| 	min-height: 400px; | ||||
| 	padding: 2.5%; | ||||
| 	padding-top: 10px; | ||||
| 	padding-bottom: 15px; | ||||
| 	opacity: 0; | ||||
| } | ||||
| 
 | ||||
| .section.current { | ||||
| 	display: block; | ||||
| 	opacity: 1; | ||||
| } | ||||
| 
 | ||||
| .section.main { | ||||
| 	padding: 0px; | ||||
| } | ||||
| 
 | ||||
| .view { | ||||
| 	position: absolute; | ||||
| 	width: 100%; | ||||
| 	height: 100%; | ||||
| 	left:-100%; | ||||
| 	/*opacity: 0;*/ | ||||
| 
 | ||||
| 	background-color: #d1d2d4; | ||||
| } | ||||
| 
 | ||||
| .view.current ~ .view { | ||||
| 	left:100%; | ||||
| } | ||||
| 
 | ||||
| .view.current { | ||||
| 	left: 0px; | ||||
| 	opacity: 1; | ||||
| } | ||||
| @ -140,7 +140,8 @@ $(document).ready(function(){ | ||||
| 				} | ||||
| 
 | ||||
| 			} | ||||
| 		}, function(k){console.log(k)})) | ||||
| 		},  | ||||
| 		function(k){console.log(k)})) | ||||
| 
 | ||||
| 	// expand the templates... | ||||
| 	runMagazineTemplates() | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user