Ajout d'une barre de navigation en version mobile

Fix issue #57 : pas d'effet de slide (effet trop bling-bling) mais
ajout d'une barre de navigation permettant d'aller à l'article
suivant / précédent ou de remonter en haut de la page

app/layout/nav_entries.phtml

@@ -0,0 +1,5 @@
+<ul class="nav_entries">
+	<li class="item"><a class="previous_entry" href="#"><i class="icon i_prev"></i></a></li>
+	<li class="item"><a href="#"><i class="icon i_up"></i></a></li>
+	<li class="item"><a class="next_entry" href="#"><i class="icon i_next"></i></a></li>
+</ul>

app/views/helpers/normal_view.phtml

@@ -107,6 +107,8 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 	<?php $this->entryPaginator->render ('pagination.phtml', 'next'); ?>
 </div>
 
+<?php $this->partial ('nav_entries'); ?>
+
 <?php } else { ?>
 <div class="alert alert-warn">
 	<span class="alert-head"><?php echo Translate::t ('no_feed_to_display'); ?></span>

app/views/javascript/main.phtml

@@ -105,6 +105,32 @@ function mark_favorite (active) {
 	});
 }
 
+function prev_entry() {
+	old_active = $(".flux.active");
+	last_active = $(".flux:last");
+	new_active = old_active.prevAll (".flux:first");
+
+	if (new_active.hasClass("flux")) {
+		toggleContent (new_active, old_active);
+	} else if (old_active[0] === undefined &&
+	           new_active[0] === undefined) {
+		toggleContent (last_active, old_active);
+	}
+}
+
+function next_entry() {
+	old_active = $(".flux.active");
+	first_active = $(".flux:first");
+	new_active = old_active.nextAll (".flux:first");
+
+	if (new_active.hasClass("flux")) {
+		toggleContent (new_active, old_active);
+	} else if (old_active[0] === undefined &&
+	           new_active[0] === undefined) {
+		toggleContent (first_active, old_active);
+	}
+}
+
 function init_img () {
 	$(".flux_content .content img").each (function () {
 		if ($(this).width () > ($(".flux_content .content").width()) / 2) {
@@ -206,18 +232,7 @@ function init_shortcuts () {
 	});
 
 	// Touches de navigation
-	shortcut.add("<?php echo $s['prev_entry']; ?>", function () {
-		old_active = $(".flux.active");
-		last_active = $(".flux:last");
-		new_active = old_active.prevAll (".flux:first");
-
-		if (new_active.hasClass("flux")) {
-			toggleContent (new_active, old_active);
-		} else if (old_active[0] === undefined &&
-		           new_active[0] === undefined) {
-			toggleContent (last_active, old_active);
-		}
-	}, {
+	shortcut.add("<?php echo $s['prev_entry']; ?>", prev_entry, {
 		'disable_in_input':true
 	});
 	shortcut.add("shift+<?php echo $s['prev_entry']; ?>", function () {
@@ -230,18 +245,7 @@ function init_shortcuts () {
 	}, {
 		'disable_in_input':true
 	});
-	shortcut.add("<?php echo $s['next_entry']; ?>", function () {
-		old_active = $(".flux.active");
-		first_active = $(".flux:first");
-		new_active = old_active.nextAll (".flux:first");
-
-		if (new_active.hasClass("flux")) {
-			toggleContent (new_active, old_active);
-		} else if (old_active[0] === undefined &&
-		           new_active[0] === undefined) {
-			toggleContent (first_active, old_active);
-		}
-	}, {
+	shortcut.add("<?php echo $s['next_entry']; ?>", next_entry, {
 		'disable_in_input':true
 	});
 	shortcut.add("shift+<?php echo $s['next_entry']; ?>", function () {
@@ -281,6 +285,17 @@ function init_shortcuts () {
 	});
 }
 
+function init_nav_entries() {
+	$('.nav_entries a.previous_entry').click(function() {
+		prev_entry();
+		return false;
+	});
+	$('.nav_entries a.next_entry').click(function() {
+		next_entry();
+		return false;
+	});
+}
+
 $(document).ready (function () {
 	if(is_reader_mode()) {
 		hide_posts = false;
@@ -288,4 +303,5 @@ $(document).ready (function () {
 	init_posts ();
 	init_column_categories ();
 	init_shortcuts ();
+	init_nav_entries();
 });

public/theme/freshrss.css

@@ -426,6 +426,11 @@
 	.pagination:last-child .item {
 		border-top: 1px solid #aaa;
 	}
+
+.nav_entries {
+	display: none;
+}
+
 .loading {
 	background: url("loader.gif") center center no-repeat;
 	font-size: 0;
@@ -538,6 +543,9 @@
 		font-size: 120%;
 	}
 
+	.pagination {
+		margin: 0 0 40px;
+	}
 	.pagination .pager-previous, .pagination .pager-next {
 		width: 100px;
 	}
@@ -574,4 +582,29 @@
 		.aside .categories {
 			margin: 30px 0;
 		}
+
+	.nav_entries {
+		display: table;
+		width: 100%;
+		height: 40px;
+		position: fixed;
+		bottom: 0;
+		margin: 0;
+		background: #fff;
+		border-top: 1px solid #ddd;
+		text-align: center;
+		line-height: 40px;
+		table-layout: fixed;
+	}
+		.nav_entries .item {
+			display: table-cell;
+			width: 30%;
+		}
+			.nav_entries .item a {
+				display: block;
+			}
+			.nav_entries .item .icon.i_up {
+				margin: 5px 0 0;
+				vertical-align: top;
+			}
 }

public/theme/global.css

@@ -517,6 +517,14 @@ input, select, textarea {
 		background-image: url("icons/up.png");
 		background-image: url("icons/up.svg");
 	}
+	.icon.i_next {
+		background-image: url("icons/next.png");
+		background-image: url("icons/next.svg");
+	}
+	.icon.i_prev {
+		background-image: url("icons/previous.png");
+		background-image: url("icons/previous.svg");
+	}
 	.icon.i_help {
 		background-image: url("icons/help.png");
 		background-image: url("icons/help.svg");

public/theme/icons/next.svg

@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8' standalone='no'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:dc='http://purl.org/dc/elements/1.1/' sodipodi:docname='go-next-symbolic.svg' height='16' id='svg7384' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' inkscape:version='0.48.4 r9939' version='1.1' width='16' xmlns='http://www.w3.org/2000/svg'>
+  <metadata id='metadata90'>
+    <rdf:RDF>
+      <cc:Work rdf:about=''>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/>
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:bbox-nodes='false' inkscape:bbox-paths='true' bordercolor='#666666' borderopacity='1' inkscape:current-layer='layer12' inkscape:cx='78.648774' inkscape:cy='9.99302' gridtolerance='10' inkscape:guide-bbox='true' guidetolerance='10' id='namedview88' inkscape:object-nodes='false' inkscape:object-paths='false' objecttolerance='10' pagecolor='#3a3b39' inkscape:pageopacity='1' inkscape:pageshadow='2' showborder='false' showgrid='false' showguides='true' inkscape:snap-bbox='true' inkscape:snap-bbox-midpoints='false' inkscape:snap-global='true' inkscape:snap-grids='true' inkscape:snap-nodes='false' inkscape:snap-others='false' inkscape:snap-to-guides='true' inkscape:window-height='1408' inkscape:window-maximized='1' inkscape:window-width='2560' inkscape:window-x='0' inkscape:window-y='0' inkscape:zoom='1'>
+    <inkscape:grid empspacing='2' enabled='true' id='grid4866' originx='120px' originy='530px' snapvisiblegridlinesonly='true' spacingx='1px' spacingy='1px' type='xygrid' visible='true'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g inkscape:groupmode='layer' id='layer9' inkscape:label='status' style='display:inline' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer10' inkscape:label='devices' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer11' inkscape:label='apps' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer13' inkscape:label='places' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer14' inkscape:label='mimetypes' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer15' inkscape:label='emblems' style='display:inline' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='g71291' inkscape:label='emotes' style='display:inline' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='g4953' inkscape:label='categories' style='display:inline' transform='translate(-121.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer12' inkscape:label='actions' style='display:inline' transform='translate(-121.0002,-747)'>
+    
+    <path inkscape:connector-curvature='0' d='m 125.0004,749 1,0 c 0.0104,-1.2e-4 0.0208,-4.6e-4 0.0313,0 0.25495,0.0112 0.50987,0.12858 0.6875,0.3125 l 6.29767,5.71875 -6.29772,5.71875 c -0.18816,0.18819 -0.45346,0.28125 -0.71875,0.28125 l -1,0 0,-1 c 0,-0.26529 0.0931,-0.53058 0.28125,-0.71875 l 4.82897,-4.28125 -4.82897,-4.28125 c -0.21074,-0.19463 -0.30316,-0.46925 -0.28125,-0.75 z' id='path10839-9-9-5-9' sodipodi:nodetypes='ccsccccccccccc' style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono'/>
+  </g>
+</svg>

public/theme/icons/previous.svg

@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8' standalone='no'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:dc='http://purl.org/dc/elements/1.1/' sodipodi:docname='go-next-rtl-symbolic.svg' height='16' id='svg7384' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' inkscape:version='0.48.4 r9939' version='1.1' width='16' xmlns='http://www.w3.org/2000/svg'>
+  <metadata id='metadata90'>
+    <rdf:RDF>
+      <cc:Work rdf:about=''>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/>
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:bbox-nodes='false' inkscape:bbox-paths='true' bordercolor='#666666' borderopacity='1' inkscape:current-layer='layer12' inkscape:cx='-101.35123' inkscape:cy='9.99302' gridtolerance='10' inkscape:guide-bbox='true' guidetolerance='10' id='namedview88' inkscape:object-nodes='false' inkscape:object-paths='false' objecttolerance='10' pagecolor='#3a3b39' inkscape:pageopacity='1' inkscape:pageshadow='2' showborder='false' showgrid='false' showguides='true' inkscape:snap-bbox='true' inkscape:snap-bbox-midpoints='false' inkscape:snap-global='true' inkscape:snap-grids='true' inkscape:snap-nodes='false' inkscape:snap-others='false' inkscape:snap-to-guides='true' inkscape:window-height='1408' inkscape:window-maximized='1' inkscape:window-width='2560' inkscape:window-x='0' inkscape:window-y='0' inkscape:zoom='1'>
+    <inkscape:grid empspacing='2' enabled='true' id='grid4866' originx='-60px' originy='530px' snapvisiblegridlinesonly='true' spacingx='1px' spacingy='1px' type='xygrid' visible='true'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g inkscape:groupmode='layer' id='layer9' inkscape:label='status' style='display:inline' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer10' inkscape:label='devices' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer11' inkscape:label='apps' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer13' inkscape:label='places' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer14' inkscape:label='mimetypes' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer15' inkscape:label='emblems' style='display:inline' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='g71291' inkscape:label='emotes' style='display:inline' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='g4953' inkscape:label='categories' style='display:inline' transform='translate(-301.0002,-747)'/>
+  <g inkscape:groupmode='layer' id='layer12' inkscape:label='actions' style='display:inline' transform='translate(-301.0002,-747)'>
+    
+    <path inkscape:connector-curvature='0' d='m 313.01372,749 -1,0 c -0.0104,-1.2e-4 -0.0208,-4.6e-4 -0.0313,0 -0.25495,0.0112 -0.50987,0.12858 -0.6875,0.3125 l -6.29767,5.71875 6.29772,5.71875 c 0.18816,0.18819 0.45346,0.28125 0.71875,0.28125 l 1,0 0,-1 c 0,-0.26529 -0.0931,-0.53058 -0.28125,-0.71875 l -4.82897,-4.28125 4.82897,-4.28125 c 0.21074,-0.19463 0.30316,-0.46925 0.28125,-0.75 z' id='path5441' sodipodi:nodetypes='ccsccccccccccc' style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono'/>
+  </g>
+</svg>