Add sort icon to table2 (attempt)

CDLUC3 · Feb 23, 2016 · 347ee03 · 347ee03
1 parent b4db828
commit 347ee03
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 15 deletions.
diff --git a/code/ui_manage.py b/code/ui_manage.py
@@ -30,6 +30,8 @@ def index(request):
   """ Manage Page, listing all Ids owned by user """
   d = { 'menu_item' : 'ui_manage.index' }
   isPublicSearch=False
+  # import pdb; pdb.set_trace()
+  # d['coowners'] = policy.getReverseCoOwners(request.session["auth"].user)
   if request.method == "GET":
     d['form'] = form_objects.ManageSearchIdForm() # Build an empty form
     noConstraintsReqd =True 

diff --git a/dev/images/sort.png b/dev/images/sort.png
diff --git a/dev/images/sort_asc.png b/dev/images/sort_asc.png
diff --git a/dev/images/sort_desc.png b/dev/images/sort_desc.png
diff --git a/dev/includes/table2.html b/dev/includes/table2.html
@@ -2,12 +2,12 @@
 <table class="table2">
 	<thead>
 		<tr>
-			<th>Object Title</th>
-			<th>Object Creator</th>
-			<th>Identifier</th>
-			<th>Object Publisher</th>
-			<th>Object <abbr title="Publication">Pub</abbr> Date</th>
-			<th>Object Type</th>
+			<th class="sorting" aria-label="Object Title: activate to sort column ascending">Object Title</th>
+			<th class="sorting" aria-label="Object Creator: activate to sort column ascending">Object Creator</th>
+			<th class="sorting" aria-label="Identifier: activate to sort column ascending">Identifier</th>
+			<th class="sorting" aria-label="Object Publisher: activate to sort column ascending">Object Publisher</th>
+			<th class="sorting" aria-label="Object Pub Date: activate to sort column ascending">Object <abbr title="Publication">Pub</abbr> Date</th>
+			<th class="sorting" aria-label="Object Type: activate to sort column ascending">Object Type</th>
 		</tr>
 	</thead>
 	<tbody>

diff --git a/dev/index.html b/dev/index.html
@@ -41,9 +41,9 @@ <h2>Components</h2>
         <li><a href="component_showhide.html">Show / Hide</a></li>
         <li><a href="component_sidebox.html">Side Box</a></li>
         <li><a href="component_tab.html">Tab</a></li>
-        <li><a href="component_table.html">Table - Stackable</a></li>
-        <li><a href="component_table3.html">Table - Stackable v.2</a></li>
-        <li><a href="component_table2.html">Table - Scrollable</a></li>
+        <li><a href="component_table.html">Table - Stackable (Used on Learn page)</a></li>
+        <li><a href="component_table2.html">Table - Scrollable (For large result sets)</a></li>
+        <li><a href="component_table3.html">Table - Stackable v.2 (For large result sets)</a></li>
     </ul>
     </ul>
 
@@ -69,4 +69,4 @@ <h2>Elements</h2>
     <!-- endbuild -->
 
 </body>
-</html>
+</html>
diff --git a/dev/scss/_table2.scss b/dev/scss/_table2.scss
@@ -22,6 +22,22 @@
 		display: block;
 		background: $design-secondary-lightest;
 		text-align: left;
+
+		.sorting:after {
+			position: absolute;
+			top: 0;
+			right: 6px;
+			bottom: 0;
+			left: auto;
+			height: 11px;
+			margin: auto;
+			line-height: 1;
+			content: url('../images/sort.png');
+			// background-image: url('../images/sort.png');
+			// background-position: right center;
+			// background-size: 9px 11px;
+		}
+
 	}
 
 	tbody {

diff --git a/static/stylesheets/main2.css b/static/stylesheets/main2.css
diff --git a/static/stylesheets/main2.min.css b/static/stylesheets/main2.min.css
diff --git a/templates/includes/_pagination.html b/templates/includes/_pagination.html
@@ -33,14 +33,15 @@
   // page selection input field: submit on enter 
   $("#page-directselect-{{ select_position }}").keyup(function(e){ 
     var code = e.which;
-    if(code==13)e.preventDefault();
+    // if(code==13)e.preventDefault();
     if(code==32||code==13||code==188||code==186){
       // Remove values from other buttons in this form since 
       // we only want to submit value from thsi input field
-      // $('#p-{{ select_position }} :button').attr('name', '');
-      var b = $('p-{{ select_position }}').getElementsByTagName("button");
-      for(var i=0;i<b.length;i++)
+      var b = $('#p-{{ select_position }} :button');
+      for(var i=0;i<b.length;i++) {
         b[i].value = '';
+        b[i].disable(true);
+      }
       $("#p-{{ select_position }}").submit();
     }
   });