Sortable sidebar (experimental)

client/css/style.css

@@ -127,7 +127,7 @@ button {
 	bottom: 52px;
 	left: 0;
 	overflow: hidden;
-	overflow-y: auto;
+	/*overflow-y: auto;*/
 	-webkit-overflow-scrolling: touch;
 	position: absolute;
 	top: 0;
@@ -149,13 +149,14 @@ button {
 }
 #sidebar .networks {
 	min-height: 100%;
-	padding: 20px 30px 40px;
+	padding: 20px 30px 0;
 }
 #sidebar .networks:empty {
 	padding: 0;
 }
-#sidebar .network + .network {
-	margin-top: 30px;
+#sidebar .network,
+#sidebar .network-placeholder {
+	margin-bottom: 30px;
 }
 #sidebar .empty {
 	color: #9ca5b4;
@@ -165,15 +166,19 @@ button {
 	padding: 20px 40px;
 	text-align: center;
 }
-#sidebar .chan {
+#sidebar .chan,
+#sidebar .chan-placeholder {
 	display: block;
 	margin: 1px -10px;
 	padding: 6px 10px 8px;
 	position: relative;
 	text-align: left;
-	transition: all .2s;
+	transition: color .2s;
 	width: 180px;
 }
+#sidebar .chan-placeholder {
+	padding-bottom: 10px;
+}
 #sidebar .chan:first-child {
 	color: #84ce88;
 	font-size: 15px;

client/js/shout.js

@@ -147,6 +147,8 @@ $(function() {
 				$("#footer").find(".connect").trigger("click");
 			}
 		}
+
+		sortable();
 	});
 
 	socket.on("join", function(data) {
@@ -221,6 +223,7 @@ $(function() {
 			.prop("disabled", false)
 			.end();
 		confirmExit();
+		sortable();
 	});
 
 	socket.on("nick", function(data) {
@@ -671,6 +674,32 @@ $(function() {
 		return date;
 	}
 
+	function sortable() {
+		sidebar.sortable({
+			axis: "y",
+			containment: "parent",
+			cursor: "grabbing",
+			items: ".network",
+			handle: ".lobby",
+			placeholder: "network-placeholder",
+			forcePlaceholderSize: true,
+			update: function() {
+				// ..
+			}
+		});
+		sidebar.find(".network").sortable({
+			axis: "y",
+			containment: "parent",
+			cursor: "grabbing",
+			items: ".chan:not(.lobby)",
+			placeholder: "chan-placeholder",
+			forcePlaceholderSize: true,
+			update: function() {
+				// ..
+			}
+		});
+	}
+
 	document.addEventListener(
 		"visibilitychange",
 		function() {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "A web IRC client",
-  "version": "0.32.5",
+  "version": "0.33.0",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {