Commit f967094f8a1c63acbbc9fa2c7300028c4d2e0fd9

Authored by Zambom
1 parent 8224dbd4

Adjusting category list accordion

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>&nbsp;{% 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>&nbsp;{% 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 %}
... ...