Revise UI for dragging-and-dropping to order channels. It now follows…

… the example of the menu arranging UI in WordPress (Appearance -> Menus)

css/yarns_microsub_server_admin.css

@@ -52,7 +52,7 @@
 
 /* Channel list table - css for sortable  table*/
 
-#yarns-channels td.order:hover {
+#yarns-channels #the-list tr:hover {
     cursor:move;
 }
 

includes/class-yarns-microsub-channel-list-table.php

@@ -9,8 +9,7 @@ public function get_columns() {
 		return array(
 			'channel_name' => __( 'Channel Name', 'yarns_microsub' ),
 			'n_feeds'      => __( 'Number of feeds', 'yarns_microsub' ),
-			'order' => __( 'Order', 'yarns_microsub' ),
-			// Removed for now, add back once I figure out the best method .
+
 		);
 	}
 
@@ -24,7 +23,7 @@ public function get_sortable_columns() {
 	public function prepare_items() {
 		$columns = $this->get_columns();
 		$hidden  = array();
-		//$this->process_action();
+
 		$this->_column_headers = array( $columns, $hidden, $this->get_sortable_columns() );
 		$this->items           = array();
 
@@ -49,13 +48,6 @@ public function prepare_items() {
 				$value['channel_name'] = '';
 			}
 
-			if ( isset( $channel['order'] ) ) {
-				$value['order'] = $channel['order'];
-			} else {
-				$value['order'] = null;
-			}
-			$value['order'] = '<div class="order_handle">️️️️</div>';
-
 			// Get the number of feeds in this channel.
 			if ( isset( $channel['items'] ) && is_array( $channel['items'] ) ) {
 				$value['n_feeds'] = count( $channel['items'] );
@@ -93,9 +85,7 @@ public function column_n_feeds( $item ) {
 		return $item['n_feeds'];
 	}
 
-	public function column_order( $item ) {
-		return $item['order'];
-	}
+
 
 
 }

js/yarns_microsub_server.js

@@ -1,17 +1,22 @@
 ( function ( $ ) {
 
 		/**
-		 * Remove links from items that will use javascript instead.
+		 * Functions to run on document.ready
 		 */
 		$( document ).ready(
 			function () {
+				/**
+				 * Remove links from items that will use javascript instead.
+				 */
 				$( '.yarns-feed-unfollow' ).removeAttr( 'href' )
 				$( '.yarns-feed-preview' ).removeAttr( 'href' )
 
-				// Make channel rows in channel list table sortable.
+				/**
+				 * Make channel rows in channel list table sortable.
+				 */
 				$( '#yarns-channels #the-list' ).sortable(
 					{
-						handle: '.order',
+						/*handle: 'tr',*/
 						update: function ( event, ui ) {
 							clear_notices() // Clear any errors that are showing from a previous function.
 
@@ -42,7 +47,7 @@
 					}
 				)
 
-				$( '.sortable' ).sortable( { handle: '.handle' } )
+				/*$( '.sortable' ).sortable( { handle: '.handle' } )*/
 			}
 		)
 

templates/yarns-microsub-general-settings.php

@@ -7,9 +7,12 @@
 
 
 <h2> Channels </h2>
-<ul id='yarns-channels'>
+<div id='yarns-channels'>
+
+	Drag each item into the order you prefer. Click the channel name to manage feeds and access other options.
+
 	<?php echo static::list_channels(); ?>
-</ul>
+</div>
 
 <h3>Add a new channel</h3>
 <input id="yarns-new-channel-name" type="text" placeholder="New channel name">