Redesign org list

templates/organization/list.html

@@ -1,59 +1,69 @@
-{% extends "base.html" %}
-{% block js_media %}
-    <script src="{{ static('libs/tablesorter.js') }}" type="text/javascript"></script>
+{% extends "user/base-users-three-col.html" %}
+{% block users_js_media %}
     <script type="text/javascript">
-        $(function () {
-            $("#organization-table").tablesorter();
-            {% if request.user.is_authenticated %}
-            $('#show-my-org-checkbox').click(function() {
-                let checked = $('#show-my-org-checkbox').is(':checked');
-                if (checked) {
-                    $('.other-organization').hide();
-                    $('.my-organization').last().find('td').css({'border-bottom-width': 
-                        '1px', 'border-color': '#ccc'});
-                }
-                else {
-                    $('.other-organization').show();
-                    $('.my-organization').last().find('td').css({'border-bottom-width': 
-                        '', 'border-color': ''});
-                }
-            })
-            $('#show-my-org-checkbox').click()
-            {% endif %}
+        $(function(){
+            register_all_toggles();
         });
     </script>
 {% endblock %}
 
+{% block users_media %}
+    <style>
+        .organization-row {
+            display: block;
+            padding: 0.5em;
+            border-bottom: 1px gray solid;
+            border-top: none;            
+            color: black;
+            font-weight: bold;
+        }
+        .organization-container .organization-row:last-child {
+            border-bottom: none;
+        }
+        .organization-row:hover {
+            background-color: #f3f3f3;
+        }
+        .organization-container {
+            border: 1px gray solid;
+            margin-bottom: 3em;
+        }
+        .org-logo {
+            vertical-align: middle;
+            height: 2em;
+            width: 2em;
+            display: inline-block;
+            margin-right: 1em;
+            margin-left: 0.5em;
+        }
+        .toggle {
+            cursor: pointer;
+        }
+    </style>
+{% endblock %}
+
 {% block title_ruler %}{% endblock %}
 
-{% block title_row %}
-    {% set tab = 'organizations' %}
-    {% set title = _('Groups') %}
-    {% include "user/user-list-tabs.html" %}
+{% block left_sidebar %}
+    {% include "user/user-left-sidebar.html" %}
 {% endblock %}
 
-{% block body %}
-    {% if request.user.is_authenticated %}
-    <div style="margin-bottom: 0.5em">
-        <input id="show-my-org-checkbox" type="checkbox" style="vertical-align: bottom;">
-        <label for="show-my-org-checkbox" style="vertical-align: bottom; margin-right: 1em;">{{ _('Show my groups only') }}</label>
-    </div>
+{% macro org_list(title, queryset) %}
+    {% if queryset %}
+        <h3 style="padding-bottom: 1em" class="toggle open"><i class="fa fa-chevron-right fa-fw"></i> {{title}} ({{queryset.count()}})</h3>
+        <div class="organization-container toggled">
+            {% for org in queryset %}
+                <a href="{{ org.get_absolute_url() }}" class="organization-row" title="{{org.about}}">
+                    <img class="org-logo" src="{{ org.logo_override_image or static('icons/icon.png') }}">
+                    <span>{{ org.name }}</span>
+                    <span style="font-weight: normal; float:right"><i>{{ org.member_count }} {{_('members')}}</i></span>
+                </a>
+            {% endfor %}
+        </div>
     {% endif %}
-    
-    <table id="organization-table" class="table">
-        <thead>
-        <tr>
-            <th style="width:85%">{{ _('Name') }}</th>
-            <th>{{ _('Members') }}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for org in organizations %}
-            <tr class="{{ 'my-organization' if org in my_organizations else 'other-organization'}}">
-                <td><a href="{{ org.get_absolute_url() }}">{{ org.name }}</a></td>
-                <td><a href="{{ org.get_users_url() }}">{{ org.member_count }}</a></td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+{% endmacro %}
+
+{% block users_table %}
+    {{ org_list(_('My groups'), my_organizations) }}
+    {{ org_list(_('Open groups'), open_organizations) }}
+    {{ org_list(_('Private groups'), private_organizations) }}
 {% endblock %}