added sidebar longpost fix #1

main.js

@@ -13,18 +13,34 @@ function setLongPostListener(){
 	jQuery("#list-view-2").on( "click", ".badge-evt.post-read-more", function( event ) {
 		event.preventDefault();
 		post = jQuery(event.target);
-		var image = post.parent().find("img");
-		image = jQuery(image);
+		// var image = post.parent().find("img");
+		var sidebar = jQuery("#sidebar-longPost");
+		sidebar.removeClass("closed");
+		sidebar.html("<img>");
+		var image = jQuery("#sidebar-longPost img");
+
 		image.on('error', function(){
 			image.attr("src", post.attr('href').replace("/gag/", "http://img-9gag-fun.9cache.com/photo/") + "_700b.jpg");
 		});
 		
 		image.attr("src", post.attr('href').replace("/gag/", "http://img-9gag-fun.9cache.com/photo/") + "_700b_v1.jpg");
-		post.remove();
+		// post.remove();
+
+	});
 
+	jQuery(document).on('scroll', function(){
+		var sidebar = jQuery("#sidebar-longPost");
+		if( !sidebar.hasClass('closed') ){
+			sidebar.addClass('closed');
+		}
 	});
 
 }
+function setupLongPostSidebar(){
+	jQuery(".badge-page.page .main-wrap  ").after("<div id='sidebar-longPost' class='closed'></div>");
+	var pageHeight = jQuery(window).height();
+	jQuery("#sidebar-longPost").css({"height": pageHeight});
+}
 //clean wake up overlay
 function cleanWakeUp(){
 	jQuery("#overlay-container").remove();
@@ -55,6 +71,9 @@ function nightMode(){
 	}
 
 }
+function enableSoftTransitions( element ){
+	jQuery(element).addClass("softTransitions");
+}
 
 function toggleNight( command ){
 	nightClass = "night";
@@ -95,6 +114,8 @@ jQuery(document).ready(function() {
 	cleanWakeUp();
 	currentVideo = setupVideoObject();
 	setVideoListener();
+	enableSoftTransitions(jQuery("#container"));
+	setupLongPostSidebar();
 	nightMode();
 	console.log("9gag Mod Successfully Loaded!");
 

style.css

@@ -1,8 +1,38 @@
+.softTransitions{
+	 -webkit-transition: all .7s ease-in-out;
+}
 #container.night{
 	 background-color: white;
-	 -webkit-transition: all 0.3s ease-in-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
 	 -webkit-filter: invert(100%);
 }
 #container.night img, #container.night video{
 	-webkit-filter: invert(100%);
+}
+#sidebar-longPost{
+	overflow-y: scroll;
+	float: left;
+	position: fixed;
+	height: 70%;
+	width: 40%;
+	right: 0px;
+	background-color: #333;
+	z-index: 9999;
+	padding: 20px;
+
+
+}
+#sidebar-longPost *{
+	box-sizing: border-box;
+}
+#sidebar-longPost img{
+	width: 100%;
+	padding-bottom: 700px;
+}
+#sidebar-longPost.closed, .closed{
+	width: 0px;
+	background: white;
+
+}
+.hidden{
+	display: none;
 }