#49 a little bit of animation

WiSchLabs · Dec 3, 2016 · 3657e46 · 3657e46
1 parent c696a10
commit 3657e46
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/core/static/core/css/main.css b/core/static/core/css/main.css
@@ -218,26 +218,24 @@ ul.nav-sub {  padding-left: 10%; }
 
 .clear_filter .alert-danger { background-color: transparent; }
 
-#checklist_items { width: 100%; }
+.panel-title span.glyphicon { width: 50px; }
 
+#checklist_items { width: 100%; }
 .checklist_item {
     display: inline-block;
     width: 80%;
     margin: 5px 5px;
 }
-
-#new_checklist_item { margin: 5px; }
-
+#add_checklist_item { margin: 5px; }
 .delete_checklist_item {
     background-color: transparent;
     padding: 5px;
     margin: 0 10px;
     cursor: default;
-    font-size: 2em;
+    font-size: 1.5em;
     vertical-align: middle;
 }
-
-.delete_checklist_item:hover { cursor: pointer; }
+    .delete_checklist_item:hover { cursor: pointer; }
 
 
 footer.footer {

diff --git a/core/templates/core/account/settings.html b/core/templates/core/account/settings.html
@@ -14,7 +14,8 @@ <h1 class="page-header">Einstellungen</h1>
         <div class="panel-heading" role="tab" id="headingAccountData">
           <h4 class="panel-title">
             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseAccountData" aria-expanded="true" aria-controls="collapseAccountData">
-              Registrierungsdaten
+                <span class="glyphicon glyphicon-pencil"></span>
+                Registrierungsdaten
             </a>
           </h4>
         </div>
@@ -54,9 +55,7 @@ <h4 class="panel-title">
         <div class="panel-heading" role="tab" id="headingOFMData">
           <h4 class="panel-title">
             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOFMData" aria-expanded="false" aria-controls="collapseOFMData">
-                <span class="glyphicon glyphicon-ofm">
-                    <img src="{% static 'core/img/OFM_icon.png' %}"/>
-                </span>
+                <span class="glyphicon glyphicon-ofm"><img src="{% static 'core/img/OFM_icon.png' %}"/></span>
                 OFM-Zugangsdaten
             </a>
           </h4>
@@ -99,7 +98,8 @@ <h4 class="panel-title">
         <div class="panel-heading" role="tab" id="headingParserSettings">
           <h4 class="panel-title">
             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseParserSettings" aria-expanded="false" aria-controls="collapseParserSettings">
-              Parser-Einstellung
+                <span class="glyphicon glyphicon-download"></span>
+                Parser-Einstellung
             </a>
           </h4>
         </div>
@@ -114,20 +114,18 @@ <h4 class="panel-title">
         <div class="panel-heading" role="tab" id="headingChecklistSettings">
           <h4 class="panel-title">
             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseChecklistSettings" aria-expanded="false" aria-controls="collapseChecklistSettings">
-              Checkliste
+                <span class="glyphicon glyphicon-list"></span>
+                Tägliche Checkliste
             </a>
           </h4>
         </div>
         <div id="collapseChecklistSettings" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingChecklistSettings">
           <div class="panel-body">
             <span>Du hast noch keine Einträge in deiner täglichen Checkliste.</span>
               <div id="checklist_items">
-                {% if checklist_items|length > 1 %}
-                {% else %}
-                {% endif %}
               </div>
-              <a href="#" id="new_checklist_item" class="btn btn-success">
-                  <span class="glyphicon glyphicon-plus "></span>
+              <a href="#" id="add_checklist_item" class="btn btn-success">
+                  <span class="glyphicon glyphicon-plus"></span>
                   neuer Eintrag
               </a>
           </div>
@@ -140,10 +138,12 @@ <h4 class="panel-title">
         $('document').ready( function (){
             function addChecklistItem(item) {
                 $('#checklist_items').append(
-                    "<div id='" + item['id'] + "' >" +
+                    "<div id='" + item['id'] + "' style='opacity:0;'>" +
                     "<input type='text' class='form-control checklist_item' name='" + item['id'] + "' value='" + item['name'] + "'>" +
-                    "<span class='delete_checklist_item alert-danger glyphicon glyphicon-remove'></span>" +
-                    "</div>");
+                    "<span class='delete_checklist_item alert-danger glyphicon glyphicon-trash'></span>" +
+                    "</div>"
+                );
+                $('#checklist_items').find('.checklist_item').parent('div').animate({opacity:1}, 'fast');
             }
 
             $('#headingChecklistSettings').click(function(){
@@ -160,10 +160,10 @@ <h4 class="panel-title">
                 }
             });
 
-            $('#new_checklist_item').click( function(event) {
+            $('#add_checklist_item').click( function(event) {
                 event.stopPropagation();
                 event.preventDefault();
-                $.get("{% url 'core:settings_new_checklist_item' %}",
+                $.get("{% url 'core:settings_add_checklist_item' %}",
                     function (data) {
                         addChecklistItem(data);
                         $('#collapseChecklistSettings').find('span').html('');
@@ -185,8 +185,10 @@ <h4 class="panel-title">
                     checklist_item_id: checklist_item.attr('id')
                 };
                 $.post("{% url 'core:settings_delete_checklist_item' %}", params);
-                checklist_item.slideToggle();
-                checklist_item.remove();
+                checklist_item.animate({opacity:0, height:0}, 200);
+                setTimeout(function() {
+                    checklist_item.remove();
+                }, 200);
             });
         })
     </script>

diff --git a/core/urls.py b/core/urls.py
@@ -16,7 +16,7 @@
 
     url(r'^settings/?$', views.settings_view, name='settings'),
     url(r'^settings_get_checklist_items/?$', GetChecklistItemsView.as_view(), name='settings_get_checklist_items'),
-    url(r'^settings_new_checklist_item/?$', CreateChecklistItemView.as_view(), name='settings_new_checklist_item'),
+    url(r'^settings_add_checklist_item/?$', CreateChecklistItemView.as_view(), name='settings_add_checklist_item'),
     url(r'^settings_update_checklist_item/?$', UpdateChecklistItemView.as_view(), name='settings_update_checklist_item'),
     url(r'^settings_delete_checklist_item/?$', DeleteChecklistItemView.as_view(), name='settings_delete_checklist_item'),