55
66{% block content %}
77
8- < div class ="d-sm-flex align-items-center justify-content-between mb-4 ">
9- < a href ="{% url 'permafrost:roles-manage' %} "> < h1 class ="h3 mb-0 text-gray-800 "> {% trans 'Roles & Permissions' %}</ h1 > </ a >
10- </ div >
8+ < h1 class ="my-3 text-gray-800 "> {% trans 'Roles & Permissions' %}</ h1 > </ a>
119
12- < div class ="row ">
10+ < div class ="row no-gutters shadow bg-white vh-main ">
11+ < div class ="col-3 d-flex flex-column flex-shrink-0 h-100 px-2 border-right-gray-300 ">
1312
14- < div class ="col-3 bg-light ">
15- < form >
16- < div class ="input-group ">
17- < input type ="text " class ="form-control " placeholder ="{% trans 'Search...' %} " aria-label ="{% trans 'Search...' %} " aria-describedby ="basic-addon2 ">
18- < div class ="input-group-append ">
19- < span class ="input-group-text " id ="basic-addon2 "> < i class ="fas fa-fw fa-search "> </ i > </ span >
13+ {% comment %}
14+ TODO: add administration search filters
15+ 1. replace p tag (line 38 belwo) with form below
16+ 2. hook up to django filter form
17+ < form class ="flex-shrink-0 px-1 ">
18+ < h4 class ="my-3 "> {% trans 'Roles' %}</ h4 >
19+ < p class ="text-success d-flex ">
20+ < i class ="fas fa-search disabled text-success " aria-label ="{% trans 'Search' %} "> </ i >
21+ < i class ="fas fa-filter " aria-label ="{% trans 'Filter' %} "> </ i >
22+ < a class ="ml-auto text-success font-weight-bold " href ="{% url 'permafrost:role-create' %} "
23+ role ="button "> < i class ="fas fa-plus mr-2 " aria-label ="{% trans 'Add Role' %} "> </ i > {% trans 'Add
24+ Role' %}</ a >
25+ </ p >
26+ < div class ="form-group mb-0 ">
27+ < div class ="input-group flex-nowrap ">
28+ < input type ="text " name ="user_filter " class ="textinput textInput form-control " id ="id_user_filter ">
29+ < div class ="input-group-append ">
30+ < button class ="btn bg-transparent close " type ="button " role ="close " aria-role ="close "
31+ id ="search_close " style ="margin-left: -1.5rem; z-index: 10; "> < i class ="fas fa-times "> </ i >
32+ </ button >
33+ </ div >
34+ < div class ="input-group-append "> < button class ="btn btn-success " type ="submit " style ="z-index: 15; ">
35+ < i class ="fas fa-search "> </ i >
36+ </ button >
37+ </ div >
2038 </ div >
2139 </ div >
2240 </ form >
23- < ul class ="list-group shadow-sm ">
41+ {% endcomment %}
42+
43+ < p class ="text-success d-flex px-1 ">
44+ < h4 > {% trans 'Roles' %}</ h4 >
45+ < a class ="ml-auto text-success font-weight-bold " href ="{% url 'permafrost:role-create' %} " role ="button ">
46+ < i class ="fas fa-plus mr-2 " aria-label ="{% trans 'Add Role' %} "> </ i > {% trans 'Add Role' %}
47+ </ a >
48+ </ p >
49+ < ul class ="list-group list-group-flush border-radius-0 flex-grow-1 overflow-auto ">
50+ {# TODO: Add infinite scroll to this list #}
2451 {% for role in object_list %}
25- < li class ="list-group-item "> < a href ="{{ role.get_absolute_url }} "> {{ role }}</ a > </ li >
52+ < li class ="px-2 list-group-item border-radius-0{% if object == role %} bg-gray-200{% endif %} ">
53+ < a class ="d-block text-gray-800 " href ="{{ role.get_absolute_url }} ">
54+ < div class ="font-weight-bold ">
55+ {{ role }}
56+ </ div >
57+ < label class ="small-meta mb-0 text-gray-600 "> {{ role.get_category_display }}</ label >
58+ </ a >
59+ </ li >
2660 {% endfor %}
2761 </ ul >
28- < a class =" btn btn-primary btn-block mt-3 shadow-sm " href =" {% url 'permafrost:role-create' %} " role =" button " > {% trans 'Add Role' %} </ a >
62+
2963 </ div >
3064
31- < div class ="col-9 ">
65+ < div class ="col-9 px-4 py-3 flex-column h-100 overflow-auto text-gray-800 ">
3266 {% if object %}
33- < div class ="card shadow mb-6 ">
34- < div class ="card-header py-3 ">
35- < h6 class ="m-0 mb-2 font-weight-bold text-primary "> {{ object.name }}</ h6 >
36- < p > {% trans 'Role Type' %}: {{ object.get_category_display}}</ p >
37- < a class ="btn btn-primary btn-sm " href ="{{ object.get_update_url }} "> {% trans 'Edit Role' %}</ a >
38- </ div >
39- < div class ="card-body ">
40-
41- {% if object.description %}
42- < p > {{ object.description }}</ p >
67+ < div class ="d-flex mb-3 ">
68+ < h2 > {{ object.name }}</ h2 >
69+ < a class ="ml-auto text-success " href ="{{ object.get_update_url }} " alt ="{% trans 'Edit Role' %} ">
70+ < i class ="fas fa-pen " aria-label ="{% trans 'Edit Role' %} "> </ i >
71+ </ a >
72+ </ div >
73+ {% if object.description %}
74+ < p > {{ object.description }}</ p >
75+ {% endif %}
76+ < p > {% trans 'Role Type' %}: < span class ="font-weight-bold "> {{ object.get_category_display }}</ span > </ p >
77+
78+ {% regroup permissions by content_type as content_type_list %}
79+
80+ < div class ="masonry d-flex flex-column flex-wrap h-100 ">
81+ {% for content_type, permission_list in content_type_list %}
82+ < div class ="masonry-brick w-50 mb-3 mr-3 d-inline-block ">
83+ < p class ="text-capitalize small font-weight-bold mb-1 text-gray-600 "> {{ content_type.name }}</ p >
84+ < p >
85+ {% for permission in permission_list %}
86+ {{ permission.name }}
87+ {% if not forloop.last %}
88+ < br >
4389 {% endif %}
44-
45- {% regroup permissions by content_type as content_type_list %}
46-
47- {% for content_type, permission_list in content_type_list %}
48- {% cycle 'odd' 'even' as col silent %}
49- {% if col == 'odd' %}
50- < div class ="row "> {# start .row #}
51- {% endif %}
52- < div class ="col-sm ">
53- < h6 class ="text-capitalize "> {{ content_type.name }}</ h6 >
54- < ul >
55- {% for permission in permission_list %}
56- < li > {{ permission.name }}</ li >
57- {% endfor %}
58- </ ul >
59- </ div >
60- {% if col == 'even' or forloop.last %}
61- </ div > {# end .row #}
62- {% endif %}
63-
64- {% if forloop.last %}
65- {% resetcycle col %}
66- {% endif %}
67-
6890 {% endfor %}
69-
70- </ div >
91+ </ p >
7192 </ div >
93+ {% endfor %}
7294
95+ </ div >
7396 {% endif %}
7497 </ div >
7598</ div >
99+ {% endblock %}
100+ {% block extra_js %}
101+
102+ {% comment %}
103+ # Possible placeholder for infinite scroll
104+ <!-- <script>
105+ const contextmenu = document.getElementById('contextmenu');
106+ const contextmenusb = document.querySelector('#contextmenu .scrollbox');
107+ let contextmenuIsScrolling = false;
108+
109+ function setFade(event) {
110+ if (!contextmenuIsScrolling) {
111+ window.requestAnimationFrame(function() {
112+ if (event.target.scrollTop < 160) {
113+ contextmenu.classList.add('off-bottom');
114+ }
115+ else {
116+ contextmenu.classList.remove('off-bottom');
117+ }
118+ contextmenuIsScrolling = false;
119+ });
120+ contextmenuIsScrolling = true;
121+ }
122+ }
123+
124+ contextmenusb.addEventListener('scroll', setFade);
125+ </script> -->
126+ {% endcomment %}
127+
76128{% endblock %}
0 commit comments