Commit f967094f8a1c63acbbc9fa2c7300028c4d2e0fd9
1 parent
8224dbd4
Exists in
master
and in
3 other branches
Adjusting category list accordion
Showing
4 changed files
with
118 additions
and
116 deletions
Show diff stats
amadeus/static/css/base/amadeus.css
... | ... | @@ -32,10 +32,11 @@ |
32 | 32 | } |
33 | 33 | |
34 | 34 | .category-header i{ |
35 | - color: white; | |
36 | - float:right; | |
37 | - font-size: 25px; | |
38 | - margin-right: 10px; | |
35 | + color: white; | |
36 | +} | |
37 | + | |
38 | +.cat-selector { | |
39 | + margin: 0; | |
39 | 40 | } |
40 | 41 | |
41 | 42 | #create-category{ |
... | ... | @@ -655,10 +656,12 @@ ul, li { |
655 | 656 | margin-bottom: 1%; |
656 | 657 | } |
657 | 658 | .data_register_course p{ color: grey; } |
659 | + | |
658 | 660 | .category-course-link{ |
659 | 661 | font-size: 16px; |
660 | 662 | color: #FFFFFF !important; |
661 | - font-family: Roboto Regular; | |
663 | + font-family: Roboto; | |
664 | + font-weight: normal; | |
662 | 665 | } |
663 | 666 | |
664 | 667 | .category-course-link:hover{ | ... | ... |
amadeus/static/js/course.js
... | ... | @@ -85,6 +85,7 @@ var delete_course = { |
85 | 85 | }); |
86 | 86 | } |
87 | 87 | }; |
88 | + | |
88 | 89 | /* |
89 | 90 | * |
90 | 91 | * Function to load create course's form |
... | ... | @@ -99,3 +100,24 @@ function replicate_course(url, course) { |
99 | 100 | } |
100 | 101 | }); |
101 | 102 | } |
103 | + | |
104 | +/* | |
105 | +* | |
106 | +* Functions to control category marker | |
107 | +* | |
108 | +*/ | |
109 | +$('.collapse').on('show.bs.collapse', function (e) { | |
110 | + if($(this).is(e.target)){ | |
111 | + var btn = $(this).parent().find('.fa-angle-right'); | |
112 | + | |
113 | + btn.switchClass("fa-angle-right", "fa-angle-down", 250, "easeInOutQuad"); | |
114 | + } | |
115 | +}); | |
116 | + | |
117 | +$('.collapse').on('hide.bs.collapse', function (e) { | |
118 | + if($(this).is(e.target)){ | |
119 | + var btn = $(this).parent().find('.fa-angle-down'); | |
120 | + | |
121 | + btn.switchClass("fa-angle-down", "fa-angle-right", 250, "easeInOutQuad"); | |
122 | + } | |
123 | +}); | |
102 | 124 | \ No newline at end of file | ... | ... |
categories/templates/categories/home.html
... | ... | @@ -2,29 +2,28 @@ |
2 | 2 | |
3 | 3 | {% load static i18n django_bootstrap_breadcrumbs permission_tags %} |
4 | 4 | |
5 | - | |
6 | - | |
7 | 5 | {% block breadcrumbs %} |
8 | - {% clear_breadcrumbs %} | |
9 | - {% breadcrumb 'Home' 'categories:index' %} | |
6 | + {% clear_breadcrumbs %} | |
7 | + {% breadcrumb 'Home' 'categories:index' %} | |
10 | 8 | {% endblock %} |
11 | 9 | |
12 | 10 | |
13 | 11 | {% block render_breadcrumbs %} |
14 | - {% render_breadcrumbs %} | |
12 | + {% render_breadcrumbs %} | |
15 | 13 | {% endblock %} |
16 | 14 | |
17 | 15 | {% block content %} |
18 | 16 | {% if user|has_role:'system_admin' %} |
19 | - <h3>{% trans 'categories' %}</h3> | |
20 | - <div id="timeline"> | |
21 | - {% include page_template %} | |
22 | - </div> | |
17 | + <h3>{% trans 'categories' %}</h3> | |
18 | + <div id="timeline"> | |
19 | + {% include page_template %} | |
20 | + </div> | |
23 | 21 | {% else %} |
24 | - <div id="timeline"> | |
25 | - {% include page_template %} | |
26 | - </div> | |
22 | + <div id="timeline"> | |
23 | + {% include page_template %} | |
24 | + </div> | |
27 | 25 | {% endif %} |
26 | + | |
28 | 27 | <div id="loading" class="alert alert-primary" role="alert" style="display: none"> |
29 | 28 | <center> |
30 | 29 | <span class="fa fa-spin fa-circle-o-notch"></span> | ... | ... |
categories/templates/categories/list.html
... | ... | @@ -4,116 +4,94 @@ |
4 | 4 | {% load django_bootstrap_breadcrumbs %} |
5 | 5 | |
6 | 6 | {% block javascript%} |
7 | - {{ block.super }} | |
7 | + {{ block.super }} | |
8 | 8 | {% endblock%} |
9 | 9 | |
10 | 10 | {% block breadcrumbs %} |
11 | - | |
12 | -{{ block.super }} | |
13 | -{% breadcrumb 'categories' 'categories:index' %} | |
14 | - | |
11 | + {{ block.super }} | |
12 | + {% breadcrumb 'Categories' 'categories:index' %} | |
15 | 13 | {% endblock %} |
16 | 14 | |
17 | 15 | {% block content %} |
18 | -{% if messages %} | |
19 | -{% for message in messages %} | |
20 | - <script type="text/javascript"> | |
21 | - alertify.success('{{message}}'); | |
22 | - </script> | |
23 | -{% endfor %} | |
24 | -{% endif %} | |
25 | - | |
26 | -{% if user.is_staff %} | |
27 | - <a href="{% url 'categories:create' %}"><button id="create-category"> {% trans "Create Category" %}</button></a> | |
28 | - | |
29 | -{% endif %} | |
30 | - | |
31 | -<div id="core-subjects-options-div"> | |
32 | - <ul class="core-subjects-options"> | |
33 | - <li class="active">{% trans "My subjects" %}</li> | |
34 | - <li>{% trans "all subjects" %}</li> | |
35 | - </ul> | |
36 | -</div> | |
16 | + {% if messages %} | |
17 | + {% for message in messages %} | |
18 | + <script type="text/javascript"> | |
19 | + alertify.success('{{message}}'); | |
20 | + </script> | |
21 | + {% endfor %} | |
22 | + {% endif %} | |
37 | 23 | |
38 | -<!-- Code for listing categories --> | |
39 | -<div class="col-md-12 cards-content"> | |
40 | - {% for category in categories %} | |
41 | - <div class="panel-group course-card-group"> | |
42 | - <div class="panel panel-info"> | |
43 | - <div class="panel-heading"> | |
44 | - <div class="row"> | |
45 | - <div class="col-md-12 category-header"> | |
46 | - <h4 class="panel-title"> | |
47 | - <a class="category-course-link" data-toggle="collapse" href="#{{category.slug}}">{{category.name}}</a> | |
48 | - </h4> | |
24 | + {% if user.is_staff %} | |
25 | + <a href="{% url 'categories:create' %}"><button id="create-category"> {% trans "Create Category" %}</button></a> | |
26 | + {% endif %} | |
49 | 27 | |
50 | - | |
51 | - | |
28 | + <div id="core-subjects-options-div"> | |
29 | + <ul class="core-subjects-options"> | |
30 | + <li class="active">{% trans "My subjects" %}</li> | |
31 | + <li>{% trans "all subjects" %}</li> | |
32 | + </ul> | |
33 | + </div> | |
52 | 34 | |
53 | - {% if user.is_staff or user in category.coordinators.all %} | |
54 | - <div class="col-xs-1 col-md-1 divMoreActions" > | |
55 | - <div class="btn-group"> | |
56 | - <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
57 | - <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i> | |
58 | - </button> | |
59 | - <ul class="dropdown-menu pull-right" aria-labelledby="moreActions"> | |
60 | - {% if user.is_staff %} | |
61 | - <li><a href="{% url 'categories:replicate' category.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>{% trans 'Replicate' %}</a></li> | |
62 | - {% endif %} | |
63 | - | |
64 | - <li><a href="{% url 'categories:update' category.slug %}"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>{% trans 'Edit' %}</a></li> | |
65 | - <li><a href="javascript:delete_course.get('{% url 'categories:delete' category.slug %}?view=index','#category','#modal_course')"><i class="fa fa-trash fa-fw" aria-hidden="true"></i> {% trans 'Remove' %}</a></li> | |
66 | - </ul> | |
35 | + <!-- Code for listing categories --> | |
36 | + <div class="col-md-12 cards-content"> | |
37 | + <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> | |
38 | + {% for category in categories %} | |
39 | + <div class="panel panel-info"> | |
40 | + <div class="panel-heading"> | |
41 | + <div class="row"> | |
42 | + <div class="col-md-12 category-header"> | |
43 | + <h4 class="panel-title"> | |
44 | + <a class="category-course-link pull-left" data-parent="#accordion" data-toggle="collapse" href="#{{category.slug}}"> | |
45 | + <button class="btn btn-default btn-xs text-center cat-selector"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></button> {{category.name}} | |
46 | + </a> | |
47 | + </h4> | |
48 | + {% if user.is_staff or user in category.coordinators.all %} | |
49 | + <div class="col-xs-1 col-md-1 divMoreActions"> | |
50 | + <div class="btn-group"> | |
51 | + <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
52 | + <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i> | |
53 | + </button> | |
54 | + <ul class="dropdown-menu pull-right" aria-labelledby="moreActions"> | |
55 | + {% if user.is_staff %} | |
56 | + <li><a href="{% url 'categories:replicate' category.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>{% trans 'Replicate' %}</a></li> | |
57 | + {% endif %} | |
58 | + <li><a href="{% url 'categories:update' category.slug %}"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>{% trans 'Edit' %}</a></li> | |
59 | + <li><a href="javascript:delete_course.get('{% url 'categories:delete' category.slug %}?view=index','#category','#modal_course')"><i class="fa fa-trash fa-fw" aria-hidden="true"></i> {% trans 'Remove' %}</a></li> | |
60 | + </ul> | |
61 | + </div> | |
62 | + </div> | |
63 | + {% endif %} | |
64 | + {% if not user.is_staff %} | |
65 | + <div class="col-md-5 pull-right"> | |
66 | + <a href="" ><i class="fa fa-list" aria-hidden="true"></i></a> | |
67 | + <a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a> | |
68 | + <a href=""><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></a> | |
69 | + <a href=""><i class="fa fa-bar-chart" aria-hidden="true"></i></a> | |
70 | + </div> | |
71 | + {% endif %} | |
72 | + </div> | |
73 | + </div> | |
74 | + </div> | |
75 | + <div id="{{category.slug}}" class="panel-collapse collapse category-panel-content"> | |
76 | + <h4> {% trans "Coordinator(s): " %} | |
77 | + {% for coordinator in category.coordinators.all %} | |
78 | + {{coordinator.username}} | |
79 | + {% endfor %} | |
80 | + </h4> | |
81 | + {{category.description|safe}} | |
82 | + </div> | |
83 | + {% comment %} | |
84 | + <div id="{{category.slug}}" class="panel-collapse collapse"> | |
85 | + {% for subject in subjects %} | |
86 | + {% include "categories/category_card.html" %} | |
87 | + {% endfor %} | |
88 | + </div> | |
89 | + {% endcomment %} | |
67 | 90 | </div> |
68 | - </div> | |
69 | - {% endif %} | |
70 | - | |
71 | - {% if not user.is_staff %} | |
72 | - <div class="col-md-5 pull-right"> | |
73 | - | |
74 | - <a href="" ><i class="fa fa-list" aria-hidden="true"></i></a> | |
75 | - <a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a> | |
76 | - | |
77 | - <a href=""><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></a> | |
78 | - <a href=""><i class="fa fa-bar-chart" aria-hidden="true"></i></a> | |
79 | - | |
80 | - | |
81 | - </div> | |
82 | - {% endif %} | |
83 | - | |
84 | - | |
85 | - </div> | |
86 | - </div> | |
87 | - </div> | |
88 | - | |
89 | - | |
90 | - | |
91 | - <div id="{{category.slug}}" class="panel-collapse collapse category-panel-content"> | |
92 | - <h4> {% trans "Coordinator(s): " %} | |
93 | - {% for coordinator in category.coordinators.all %} | |
94 | - {{coordinator.username}} | |
95 | 91 | {% endfor %} |
96 | - </h4> | |
97 | - {{category.description|safe}} | |
98 | 92 | </div> |
99 | - | |
100 | - {% comment %} | |
101 | - | |
102 | - | |
103 | - <div id="{{category.slug}}" class="panel-collapse collapse"> | |
104 | - | |
105 | - {% for subject in subjects %} | |
106 | - {% include "categories/category_card.html" %} | |
107 | - {% endfor %} | |
108 | - </div> | |
109 | - {% endcomment %} | |
110 | - | |
111 | 93 | </div> |
112 | - </div> | |
113 | - {% endfor %} | |
114 | -</div> | |
115 | -<div id="modal_course"> | |
116 | - | |
117 | -</div> | |
118 | -<script type="text/javascript" src="{% static 'js/course.js' %}"></script> | |
94 | + <div id="modal_course"> | |
95 | + </div> | |
96 | + <script type="text/javascript" src="{% static 'js/course.js' %}"></script> | |
119 | 97 | {% endblock %} | ... | ... |