css fix for ordering

app/assets/stylesheets/admin/web_links.css

@@ -1,4 +1,79 @@
-/*
-  Place all the styles related to the matching controller here.
-  They will automatically be included in application.css.
-*/
+  /*reset*/
+h1, h2, h3, h4, h5, p{
+  margin: 0;
+  padding: 0;
+}
+br{
+  display: block;
+  margin: 0 0 5px;
+}
+ol, ul{
+  margin: 0;
+  padding: 0;
+}
+li{
+  list-style: none;
+}
+body > img {
+  display: none;
+}
+
+img{
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  outline: none;
+  text-decoration: none !important; 
+}
+
+table, tr, td{
+  padding: 0;
+  border-spacing: 0;
+}
+
+/*reset end *//* CSS Document */
+
+#web_resource_order_table{
+	border-collapse: unset !important;
+	position: relative;
+	width: 593px;
+	margin: 40px auto;
+}
+
+#web_resource_order_table th{
+	background-color: #454545;
+	color: #fff;
+}
+.position-text{
+	position: relative;
+	width: 85px;
+}
+
+#web_resource_order_table .editable-input{
+	position: relative;
+	width: 25px;
+	margin-bottom: 0;
+	padding: 0px 0px 0px 5px;
+}
+
+.position-text-div{
+	height: 22px;
+}
+
+.order-edit-notification{
+	background-color: #ffffd5;
+	z-index: 10;
+	display: none;
+	height: 25px;
+	left: 40%;
+	position: fixed;
+	text-align: center;
+	margin-top: 5px;
+	top: 85px;
+	width: 400px;
+	font-size: 13px;
+}
+

app/views/admin/web_resources/order.html.erb

@@ -1,10 +1,12 @@
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "admin/web_links" %>
 <% end %>
-<table width="100%" id="web_resource_order_table">
+<div class="order-edit-notification">Please click "Save Order" button when you done.</div>
+<table width="100%" id="web_resource_order_table" class="table table-striped" class="web_soursce_table">
 	<thead>
-		<th>Position</th>
-		<th>Link</th>
+		<tr>
+			<th>Position</th>
+			<th>Link</th>
 	</thead>
 	<tbody>
 		<% @links.each_with_index do |link,i| %>
@@ -30,6 +32,7 @@
 	var makeEditable = function(){
 		var input_box = $("<input type='text'/>"),
 			el = $(this);
+		input_box.addClass("editable-input");
 		input_box.val(el.data("value"));
 		input_box.attr("data-old-id",el.data("value"));
 		input_box.on("blur",function(){
@@ -56,6 +59,7 @@
 			div.on("click",makeEditable);
 			el.parent().html(div);
 			$("#save-order-button").removeClass("disabled");
+			$(".order-edit-notification").slideDown();
 			sortTable(el.data("old-id"),current_value);
 		}else{
 			var div = $("<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>");
@@ -108,6 +112,7 @@
 				type  : "post"
 			}).done(function(){
 				el.addClass("disabled");
+				$(".order-edit-notification").slideUp();
 			})
 		}
 	})