From f967094f8a1c63acbbc9fa2c7300028c4d2e0fd9 Mon Sep 17 00:00:00 2001
From: Zambom <erikzambom@hotmail.com>
Date: Thu, 29 Dec 2016 16:20:28 -0200
Subject: [PATCH] Adjusting category list accordion

---
 amadeus/static/css/base/amadeus.css       |  13 ++++++++-----
 amadeus/static/js/course.js               |  22 ++++++++++++++++++++++
 categories/templates/categories/home.html |  23 +++++++++++------------
 categories/templates/categories/list.html | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------
 4 files changed, 118 insertions(+), 116 deletions(-)

diff --git a/amadeus/static/css/base/amadeus.css b/amadeus/static/css/base/amadeus.css
index 5a6c9de..b630d58 100755
--- a/amadeus/static/css/base/amadeus.css
+++ b/amadeus/static/css/base/amadeus.css
@@ -32,10 +32,11 @@
 }
 
 .category-header i{
-  color: white;
-  float:right;
-  font-size: 25px;
-  margin-right: 10px;
+    color: white;
+}
+
+.cat-selector {
+    margin: 0;
 }
 
 #create-category{
@@ -655,10 +656,12 @@ ul, li {
   margin-bottom: 1%;
 }
 .data_register_course p{ color: grey; }
+
 .category-course-link{
     font-size: 16px;
     color: #FFFFFF !important;
-    font-family: Roboto Regular;
+    font-family: Roboto;
+    font-weight: normal;
 }
 
 .category-course-link:hover{
diff --git a/amadeus/static/js/course.js b/amadeus/static/js/course.js
index 540053f..20cbadf 100755
--- a/amadeus/static/js/course.js
+++ b/amadeus/static/js/course.js
@@ -85,6 +85,7 @@ var delete_course = {
     });
   }
 };
+
 /*
 *
 * Function to load create course's form
@@ -99,3 +100,24 @@ function replicate_course(url, course) {
         }
     });
 }
+
+/*
+*
+* Functions to control category marker
+*
+*/
+$('.collapse').on('show.bs.collapse', function (e) {
+    if($(this).is(e.target)){
+        var btn = $(this).parent().find('.fa-angle-right');
+        
+        btn.switchClass("fa-angle-right", "fa-angle-down", 250, "easeInOutQuad");
+    }
+});
+
+$('.collapse').on('hide.bs.collapse', function (e) {
+    if($(this).is(e.target)){
+        var btn = $(this).parent().find('.fa-angle-down');
+        
+        btn.switchClass("fa-angle-down", "fa-angle-right", 250, "easeInOutQuad");
+    }
+});
\ No newline at end of file
diff --git a/categories/templates/categories/home.html b/categories/templates/categories/home.html
index 5890cb9..bf4fc02 100755
--- a/categories/templates/categories/home.html
+++ b/categories/templates/categories/home.html
@@ -2,29 +2,28 @@
 
 {% load static i18n django_bootstrap_breadcrumbs permission_tags %}
 
-
-
 {% block breadcrumbs %}
-  {% clear_breadcrumbs %}
-  {% breadcrumb 'Home' 'categories:index' %}
+    {% clear_breadcrumbs %}
+    {% breadcrumb 'Home' 'categories:index' %}
 {% endblock %}
 
 
 {% block render_breadcrumbs %}
-  {% render_breadcrumbs %}
+    {% render_breadcrumbs %}
 {% endblock %}
 
 {% block content %}
     {% if user|has_role:'system_admin' %}
-                <h3>{% trans 'categories' %}</h3>
-                <div id="timeline">
-                    {% include page_template %}
-                </div>
+        <h3>{% trans 'categories' %}</h3>
+        <div id="timeline">
+            {% include page_template %}
+        </div>
     {% else %}
-               <div id="timeline">
-                   {% include page_template %}
-               </div>
+        <div id="timeline">
+            {% include page_template %}
+        </div>
     {% endif %}
+
     <div id="loading" class="alert alert-primary" role="alert" style="display: none">
         <center>
             <span class="fa fa-spin fa-circle-o-notch"></span>
diff --git a/categories/templates/categories/list.html b/categories/templates/categories/list.html
index a4153ad..2be5dd1 100755
--- a/categories/templates/categories/list.html
+++ b/categories/templates/categories/list.html
@@ -4,116 +4,94 @@
 {% load django_bootstrap_breadcrumbs %}
 
 {% block javascript%}
-  {{ block.super }}
+    {{ block.super }}
 {% endblock%}
 
 {% block breadcrumbs %}
-
-{{ block.super }}
-{% breadcrumb 'categories' 'categories:index' %}
- 
+    {{ block.super }}
+    {% breadcrumb 'Categories' 'categories:index' %}
 {% endblock %}
 
 {% block content %}
-{% if messages %}
-{% for message in messages %}
-  <script type="text/javascript">
-    alertify.success('{{message}}');
-  </script>
-{% endfor %}
-{% endif %}
-
-{% if user.is_staff %}
-  <a href="{% url 'categories:create' %}"><button id="create-category"> {% trans "Create Category" %}</button></a>
-
-{% endif %}
-
-<div id="core-subjects-options-div">
-  <ul class="core-subjects-options">
-    <li class="active">{% trans "My subjects" %}</li>
-    <li>{% trans "all subjects" %}</li>
-  </ul>
-</div>
+    {% if messages %}
+        {% for message in messages %}
+            <script type="text/javascript">
+                alertify.success('{{message}}');
+            </script>
+        {% endfor %}
+    {% endif %}
 
-<!-- Code for listing categories -->
-<div class="col-md-12 cards-content">
-  {% for category in categories  %}
-  <div class="panel-group course-card-group">
-    <div class="panel panel-info">
-      <div class="panel-heading">
-        <div class="row">
-          <div class="col-md-12 category-header">
-            <h4 class="panel-title">
-              <a  class="category-course-link" data-toggle="collapse" href="#{{category.slug}}">{{category.name}}</a>
-            </h4>
+    {% if user.is_staff %}
+        <a href="{% url 'categories:create' %}"><button id="create-category"> {% trans "Create Category" %}</button></a>
+    {% endif %}
 
-         
-           
+    <div id="core-subjects-options-div">
+        <ul class="core-subjects-options">
+            <li class="active">{% trans "My subjects" %}</li>
+            <li>{% trans "all subjects" %}</li>
+        </ul>
+    </div>
 
-            {% if user.is_staff or user in category.coordinators.all %}
-               <div class="col-xs-1 col-md-1 divMoreActions" >
-                <div class="btn-group">
-                  <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
-                   </button>
-                  <ul class="dropdown-menu pull-right" aria-labelledby="moreActions">
-                    {% if user.is_staff %}
-                         <li><a href="{% url 'categories:replicate' category.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>{% trans 'Replicate' %}</a></li>
-                    {% endif %}
-                   
-                    <li><a href="{% url 'categories:update' category.slug %}"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>{% trans 'Edit' %}</a></li>
-                    <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>
-                  </ul>
+    <!-- Code for listing categories -->
+    <div class="col-md-12 cards-content">
+        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+            {% for category in categories  %}
+                <div class="panel panel-info">
+                    <div class="panel-heading">
+                        <div class="row">
+                            <div class="col-md-12 category-header">
+                                <h4 class="panel-title">
+                                    <a class="category-course-link pull-left" data-parent="#accordion" data-toggle="collapse" href="#{{category.slug}}">
+                                        <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}}
+                                    </a>
+                                </h4>
+                                {% if user.is_staff or user in category.coordinators.all %}
+                                    <div class="col-xs-1 col-md-1 divMoreActions">
+                                        <div class="btn-group">
+                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                                <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
+                                            </button>
+                                            <ul class="dropdown-menu pull-right" aria-labelledby="moreActions">
+                                                {% if user.is_staff %}
+                                                    <li><a href="{% url 'categories:replicate' category.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>{% trans 'Replicate' %}</a></li>
+                                                {% endif %}
+                                                <li><a href="{% url 'categories:update' category.slug %}"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>{% trans 'Edit' %}</a></li>
+                                                <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>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                {% endif %}
+                                {% if not user.is_staff  %}
+                                    <div class="col-md-5 pull-right">
+                                        <a href="" ><i class="fa fa-list" aria-hidden="true"></i></a>
+                                        <a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
+                                        <a href=""><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></a>
+                                        <a href=""><i class="fa fa-bar-chart" aria-hidden="true"></i></a>
+                                    </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                    <div id="{{category.slug}}" class="panel-collapse collapse category-panel-content">
+                        <h4>  {% trans "Coordinator(s): " %}
+                            {% for coordinator in category.coordinators.all %}
+                                {{coordinator.username}}
+                            {% endfor %}
+                        </h4>
+                        {{category.description|safe}}
+                    </div>
+                    {% comment %}
+                        <div id="{{category.slug}}" class="panel-collapse collapse">
+                            {% for subject in subjects %}
+                                {% include "categories/category_card.html" %}
+                            {% endfor %}
+                        </div>
+                    {% endcomment %}
                 </div>
-            </div>
-            {% endif %}
-
-             {% if not user.is_staff  %}
-            <div class="col-md-5 pull-right">
-            
-              <a href="" ><i class="fa fa-list" aria-hidden="true"></i></a>
-              <a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
-
-              <a href=""><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></a>
-              <a href=""><i class="fa fa-bar-chart" aria-hidden="true"></i></a>
-
-            
-            </div>
-            {% endif %}
-            
-         
-          </div>
-        </div>
-      </div>
-    
-        
-      
-        <div id="{{category.slug}}" class="panel-collapse collapse category-panel-content">
-             <h4>  {% trans "Coordinator(s): " %}
-            {% for coordinator in category.coordinators.all %}
-              {{coordinator.username}}
             {% endfor %}
-            </h4>
-             {{category.description|safe}}
         </div>
-     
-      {% comment %}
-        
-      
-      <div id="{{category.slug}}" class="panel-collapse collapse">
-
-        {% for subject in subjects %}
-          {% include "categories/category_card.html" %}
-        {% endfor %}
-      </div>
-      {% endcomment %}
-       
     </div>
-  </div>
-  {% endfor %}
-</div>
-<div id="modal_course">
-
-</div>
-<script type="text/javascript" src="{% static 'js/course.js' %}"></script>
+    <div id="modal_course">
+    </div>
+    <script type="text/javascript" src="{% static 'js/course.js' %}"></script>
 {% endblock %}
--
libgit2 0.21.2