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,10 +32,11 @@ | ||
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | .category-header i{ | 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 | #create-category{ | 42 | #create-category{ |
| @@ -655,10 +656,12 @@ ul, li { | @@ -655,10 +656,12 @@ ul, li { | ||
| 655 | margin-bottom: 1%; | 656 | margin-bottom: 1%; |
| 656 | } | 657 | } |
| 657 | .data_register_course p{ color: grey; } | 658 | .data_register_course p{ color: grey; } |
| 659 | + | ||
| 658 | .category-course-link{ | 660 | .category-course-link{ |
| 659 | font-size: 16px; | 661 | font-size: 16px; |
| 660 | color: #FFFFFF !important; | 662 | color: #FFFFFF !important; |
| 661 | - font-family: Roboto Regular; | 663 | + font-family: Roboto; |
| 664 | + font-weight: normal; | ||
| 662 | } | 665 | } |
| 663 | 666 | ||
| 664 | .category-course-link:hover{ | 667 | .category-course-link:hover{ |
amadeus/static/js/course.js
| @@ -85,6 +85,7 @@ var delete_course = { | @@ -85,6 +85,7 @@ var delete_course = { | ||
| 85 | }); | 85 | }); |
| 86 | } | 86 | } |
| 87 | }; | 87 | }; |
| 88 | + | ||
| 88 | /* | 89 | /* |
| 89 | * | 90 | * |
| 90 | * Function to load create course's form | 91 | * Function to load create course's form |
| @@ -99,3 +100,24 @@ function replicate_course(url, course) { | @@ -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 | \ No newline at end of file | 124 | \ No newline at end of file |
categories/templates/categories/home.html
| @@ -2,29 +2,28 @@ | @@ -2,29 +2,28 @@ | ||
| 2 | 2 | ||
| 3 | {% load static i18n django_bootstrap_breadcrumbs permission_tags %} | 3 | {% load static i18n django_bootstrap_breadcrumbs permission_tags %} |
| 4 | 4 | ||
| 5 | - | ||
| 6 | - | ||
| 7 | {% block breadcrumbs %} | 5 | {% block breadcrumbs %} |
| 8 | - {% clear_breadcrumbs %} | ||
| 9 | - {% breadcrumb 'Home' 'categories:index' %} | 6 | + {% clear_breadcrumbs %} |
| 7 | + {% breadcrumb 'Home' 'categories:index' %} | ||
| 10 | {% endblock %} | 8 | {% endblock %} |
| 11 | 9 | ||
| 12 | 10 | ||
| 13 | {% block render_breadcrumbs %} | 11 | {% block render_breadcrumbs %} |
| 14 | - {% render_breadcrumbs %} | 12 | + {% render_breadcrumbs %} |
| 15 | {% endblock %} | 13 | {% endblock %} |
| 16 | 14 | ||
| 17 | {% block content %} | 15 | {% block content %} |
| 18 | {% if user|has_role:'system_admin' %} | 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 | {% else %} | 21 | {% else %} |
| 24 | - <div id="timeline"> | ||
| 25 | - {% include page_template %} | ||
| 26 | - </div> | 22 | + <div id="timeline"> |
| 23 | + {% include page_template %} | ||
| 24 | + </div> | ||
| 27 | {% endif %} | 25 | {% endif %} |
| 26 | + | ||
| 28 | <div id="loading" class="alert alert-primary" role="alert" style="display: none"> | 27 | <div id="loading" class="alert alert-primary" role="alert" style="display: none"> |
| 29 | <center> | 28 | <center> |
| 30 | <span class="fa fa-spin fa-circle-o-notch"></span> | 29 | <span class="fa fa-spin fa-circle-o-notch"></span> |
categories/templates/categories/list.html
| @@ -4,116 +4,94 @@ | @@ -4,116 +4,94 @@ | ||
| 4 | {% load django_bootstrap_breadcrumbs %} | 4 | {% load django_bootstrap_breadcrumbs %} |
| 5 | 5 | ||
| 6 | {% block javascript%} | 6 | {% block javascript%} |
| 7 | - {{ block.super }} | 7 | + {{ block.super }} |
| 8 | {% endblock%} | 8 | {% endblock%} |
| 9 | 9 | ||
| 10 | {% block breadcrumbs %} | 10 | {% block breadcrumbs %} |
| 11 | - | ||
| 12 | -{{ block.super }} | ||
| 13 | -{% breadcrumb 'categories' 'categories:index' %} | ||
| 14 | - | 11 | + {{ block.super }} |
| 12 | + {% breadcrumb 'Categories' 'categories:index' %} | ||
| 15 | {% endblock %} | 13 | {% endblock %} |
| 16 | 14 | ||
| 17 | {% block content %} | 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 | </div> | 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 | {% endfor %} | 91 | {% endfor %} |
| 96 | - </h4> | ||
| 97 | - {{category.description|safe}} | ||
| 98 | </div> | 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 | </div> | 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 | {% endblock %} | 97 | {% endblock %} |