Converting FAM list to use DataTables code

1 files changed, 12 insertions, 8 deletions

diff --git a/themes/clouds/style.css b/themes/clouds/style.css
index fe8b152c7f..1a24695e8d 100644
--- a/themes/clouds/style.css
+++ b/themes/clouds/style.css
@@ -1861,6 +1861,8 @@ html[dir='rtl'] .ui-tabs .ui-tabs-nav li.ui-state-default {float:right;}
 .dataTables_length select, .dataTables_filter input {font-size:11px; padding:1px;}
 .dt-clear {clear:both;}
 #loading {text-align:center;}
+.DataTables_sort_wrapper {position:relative;margin-left:20px;}
+.DataTables_sort_wrapper span {left:0; margin-left:-20px; margin-top:-8px; position:absolute; top:50%;}
 
 html[dir='rtl'] .css_right {float:right;}
 html[dir='rtl'] .dataTables_paginate {float:right;}
@@ -1868,14 +1870,16 @@ html[dir='rtl'] .dataTables_processing {float:right;}
 html[dir='rtl'] .dataTables_filter  {float:left;}
 html[dir='rtl'] .dataTables_info {float:right}
 html[dir='rtl'] .dataTables_length {float:left;}
+html[dir='rtl'] .DataTables_sort_wrapper {margin-right:20px;}
+html[dir='rtl'] .DataTables_sort_wrapper span {left:auto; right:0; margin-right:-20px;}
 
 /* ========= List styles ================= */
-.source-list, .note-list, .repo-list, .media-list, .indi-list  {margin:5px auto; visibility:hidden; text-align:center; width:98%;}
-.source-list table, .note-list table, .repo-list table, .media-list table, .indi-list table  {width:100%;}
-.source-list td, .note-list td, .repo-list td, .media-list td, .indi-list td {padding:2px 5px;}
-.indi-list td {color:#555;}
-.indi-list .stats {margin:0 auto; width:auto;}
-.source-list th, .note-list th, .repo-list th, .media-list th, .indi-list th {cursor:pointer; white-space: nowrap;}
+.source-list, .note-list, .repo-list, .media-list, .indi-list, .fam-list  {margin:5px auto; text-align:center; width:98%;}
+.source-list table, .note-list table, .repo-list table, .media-list table, .indi-list table, .fam-list table  {width:100%;}
+.source-list td, .note-list td, .repo-list td, .media-list td, .indi-list td, .fam-list td {padding:2px 5px;}
+.indi-list td, .fam-list td {color:#555;}
+.indi-list .stats, .fam-list .stats {margin:0 auto; width:auto;}
+.source-list th, .note-list th, .repo-list th, .media-list th, .indi-list th, .fam-list th {cursor:pointer; white-space: nowrap;}
 .source-list th:last-child, .note-list th:last-child, .repo-list th:last-child {margin:0 -2px 1px 1px; padding:3px 0 4px; width:24px;}
 #source-details h2, #note-details h2, #repo-details h2, #media-details h2 {margin-bottom:20px; text-align:center;}
 #source-tabs, #note-tabs, #repo-tabs, #media-tabs {margin:auto; visibility:hidden; width:80%;}
@@ -1883,9 +1887,9 @@ html[dir='rtl'] .dataTables_length {float:left;}
 .media-list img {display:block; height:40px; margin:3px auto;}
 .SEX_M, .SEX_F, .SEX_U {height:20px;}
 .SEX_M img, .SEX_F img, .SEX_U img {vertical-align:top;}
-.gender, .years, .given, .parents, .charts, .reset {background-color:lightgrey; display:inline; margin:0 6px 0 0; padding:0 0 1px 0;}
+.fam-filters, .fam-filters, .gender, .years, .given, .parents, .charts, .reset {background-color:lightgrey; display:inline; margin:0 6px 0 0; padding:0 0 1px 0;}
 .gender {padding:2px 0;}
-.years button, .given button, .parents input, .charts input, .reset button {margin: 1px; padding:1px 6px;}
+.fam-filters button, .years button, .given button, .parents input, .charts input, .reset button {margin: 1px; padding:1px 6px;}
 
 html[dir='rtl'] .source-list th:last-child, html[dir='rtl'] .note-list th:last-child, html[dir='rtl'] .repo-list th:last-child {margin:0 1px 1px -2px;}
 html[dir='rtl'] .gender, html[dir='rtl'] .years, html[dir='rtl'] .given, html[dir='rtl'] .parents, html[dir='rtl'] .charts, html[dir='rtl'] .reset {margin:0 0 0 6px;}