diff --git a/app/static/css/opaque.css b/app/static/css/opaque.css index dbb05de9a400d22ca119a19efe5010f2532d4575..f46e2f60039409b9f019e01d8ca78970e097a3a3 100644 --- a/app/static/css/opaque.css +++ b/app/static/css/opaque.css @@ -33,3 +33,43 @@ main { } } /* ### End sidenav-fixed offset ### */ + +/* CSS for clickable th elements in tables. Needed for sortable table data with +list js. On click on th header elements will be sorted accordingly. Also a caret +indicator will show up how the column is sorted right now.; */ +.sort { + cursor: pointer; +} +.sort:after { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid transparent; + content:""; + position: relative; + top:-10px; + right:-5px; +} +.sort.asc:after { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000000; + content:""; + position: relative; + top:13px; + right:-5px; +} +.sort.desc:after { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000000; + content:""; + position: relative; + top:-10px; + right:-5px; +} diff --git a/app/tables.py b/app/tables.py index 77f9a009dfb5052a97ea5513d13f548f475cc6f1..3a596c9a43a45489b328d766b11eaf3fe12067d3 100644 --- a/app/tables.py +++ b/app/tables.py @@ -6,14 +6,24 @@ class AdminUserTable(Table): Declares the table describing colum by column. """ classes = ['highlight', 'responsive-table'] - username = Col('Username', column_html_attrs={'class': 'username'}) - email = Col('Email', column_html_attrs={'class': 'email'}) - role_id = Col('Role', column_html_attrs={'class': 'role'}) - confirmed = Col('Confrimed Status', column_html_attrs={'class': 'confirmed'}) - id = Col('User Id', column_html_attrs={'class': 'id'}) + username = Col('Username', column_html_attrs={'class': 'username'}, + th_html_attrs={'class': 'sort', + 'data-sort': 'username'}) + email = Col('Email', column_html_attrs={'class': 'email'}, + th_html_attrs={'class': 'sort', + 'data-sort': 'email'}) + role_id = Col('Role', column_html_attrs={'class': 'role'}, + th_html_attrs={'class': 'sort', + 'data-sort': 'role'}) + confirmed = Col('Confrimed Status', column_html_attrs={'class': 'confirmed'}, + th_html_attrs={'class': 'sort', + 'data-sort': 'confirmed'}) + id = Col('User Id', column_html_attrs={'class': 'id'}, + th_html_attrs={'class': 'sort', + 'data-sort': 'id'}) url = LinkCol('Profile', 'admin.admin_user_page', - url_kwargs=dict(user_id='id'), - anchor_attrs={'class': 'waves-effect waves-light btn-small'}) + url_kwargs=dict(user_id='id'), + anchor_attrs={'class': 'waves-effect waves-light btn-small'}) class AdminUserItem(object): diff --git a/app/templates/admin/admin.html.j2 b/app/templates/admin/admin.html.j2 index c56732035f4c6743bdd66730e344a20ef9efd011..673f6cbc460d853c37a4a4718bfee47f82c9b104 100644 --- a/app/templates/admin/admin.html.j2 +++ b/app/templates/admin/admin.html.j2 @@ -2,7 +2,7 @@ {% block page_content %} <div class="col s12"> - <div class="card large"> + <div class="card"> <div class="card-content"> <span class="card-title">User list</span> <div id="users"> @@ -19,8 +19,8 @@ </div> <script type="text/javascript"> var options = { - valueNames: ['username', 'email', 'role', 'confirmed'], - page: 3, + valueNames: ['username', 'email', 'role', 'confirmed', 'id'], + page: 10, pagination: true }; var userList = new List('users', options);