stylesheet improvements

- hide navigation on mobile devices - transfer position property to stylesheet
bleistivt · Aug 27, 2014 · f824154 · f824154
1 parent 55eb14a
commit f824154
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/class.infinitescroll.plugin.php b/class.infinitescroll.plugin.php
@@ -51,8 +51,12 @@ public function Discussioncontroller_Render_Before($Sender) {
 				Anchor('&#x25b2;', '#', array('id' => 'InfScrollJTT'))
 				.$Index.$JumpTo
 				.Anchor('&#x25bc;', '#', array('id' => 'InfScrollJTB'));
+			$Position = array('TopRight', 'BottomRight', 'TopLeft', 'BottomLeft');
 
-			$Sender->AddAsset('Foot',Wrap($Controls, 'div', array('id' => 'InfScrollNav')));
+			$Sender->AddAsset('Foot',Wrap($Controls, 'div',
+				array('id' => 'InfScrollNav',
+					'class' => $Position[C('Plugins.InfiniteScroll.NavPosition', '0')])
+			));
 		}
 
 		//loading bar
@@ -112,12 +116,10 @@ private function Ressources($Sender) {
 		$Sender->AddJsFile($this->GetResource('js/infinitescroll.js', false, false));
 		$Sender->AddCssFile($this->GetResource('design/infinitescroll.css', false, false));
 
-		$pos = array('top:0;right:0;', 'bottom:0;right:0;', 'top:0;left:0;', 'bottom:0;left:0;');
-		$Position = '#InfScrollNav{'.$pos[C('Plugins.InfiniteScroll.NavPosition', '0')].'}';
 		$Color = '#InfScrollNav,#InfScrollNav a,#InfScrollNav a:hover{color:'
 			.htmlspecialchars(C('Plugins.InfiniteScroll.TextColor', 'rgba(0, 0, 0, 0.5)')).';}';
 
-		$Sender->Head->AddString('<style type="text/css">'.$Position.$Color.'</style>');
+		$Sender->Head->AddString('<style type="text/css">'.$Color.'</style>');
 	}
 
 	//user preference checkbox

diff --git a/design/infinitescroll.css b/design/infinitescroll.css
@@ -27,6 +27,22 @@
 	text-align: center;
 	font-size: 2.3em;
 }
+#InfScrollNav.TopRight {
+	top:0;
+	right:0;
+}
+#InfScrollNav.BottomRight {
+	bottom:0;
+	right:0;
+}
+#InfScrollNav.TopLeft {
+	top:0;
+	left:0;
+}
+#InfScrollNav.BottomLeft {
+	bottom:0;
+	left:0;
+}
 #InfScrollNav a {
 	color: black;
 	text-decoration: none;
@@ -71,3 +87,9 @@
 	-moz-animation: InfScrollHighlight .8s;
 	animation: InfScrollHighlight .8s;
 }
+@media only screen
+and (max-device-width : 480px) {
+	#InfScrollNav {
+		display: none;
+	}
+}