Move idea up and down

canvas/css/canvas.css

@@ -220,6 +220,7 @@ ul.dropdown-menu a {
 /* Tooltip */
 
 .tooltip-inner {
+    background-color: red !important;
     padding: 7px 10px 7px 10px;
     text-align: left;
 }
@@ -289,11 +290,12 @@ li.added_item {
 /* ul.item_list textarea { */
 ul.item_list div {
     font-size: 0.95em;
+    margin-left: 14px;
+    margin-bottom: 5px;
     padding: 0.5em 0.5em 0.5em 1em;
     border-radius: 0.35em;;
     border: 1px solid rgba(255, 255, 255, 0.2);
-    width: 87%;
-    max-width: 87%;
+    width: 85% !important;
     outline: none;
     background-color: rgba(255, 255, 255, 0.6);
     /* For auto expansion jQuery code */
@@ -305,34 +307,22 @@ ul.item_list div {
    List item handles: Bootstrap Glyphicon
 ----------------------------------------------- */
 
-span.handle {
-    position: relative;
-    /* Necessary for handle in sortable to work */
-    top: -50px;                 /* Needs to be 40px in Safari */
-    right: -0.18em;
+ul.item_list span.glyphicon {
+    border-radius: 100%;
+    margin-right: 10px;
     color: #ffffff;
     font-size: 1.2em;
-    /* cursor: move; */
     cursor: pointer;
 }
-span.handle:hover {
+span.glyphicon:hover {
     color: rgba(0, 0, 0, 0.5);
 }
 
-/* The remove icon for each item */
+/* The handle icon for each item */
 
-span.remove {
-    top: -50px;                 /* Needs to be 40px in Safari */
-    right: 0px;
-    margin-right: -22px;
-    font-size: 1.2em;
-    font-weight: 400;
-    color: #ffffff;
-    border-radius: 100%;
-    cursor: pointer;
-}
-span.remove:hover {
-    color: rgba(0, 0, 0, 0.5);
+span.handle {
+    margin-left: 14px;
+    /* cursor: move; */
 }
 
 /* Placeholder for sorting items */
@@ -351,6 +341,7 @@ span.remove:hover {
 ----------------------------------------------- */
 
 p.tag-selected-term {
+    margin-top: 20px;
     display: none;
 }
 p.tag-selected-term a {
@@ -436,7 +427,7 @@ li.added_item span {
     box-sizing: border-box;
     /* remove the user resizing for the text fields */
     resize: none;
-    display: inline-block;
+    /* display: inline-block; */
     width: 75% !important;
 }
 .user-input span.chars {
@@ -1206,18 +1197,4 @@ div.dialog {
     input.proj_title {
         margin-right: -9px;
     }
-}
-
-/* ---------------- Added items icons Safari bug fix ---------------- */
-
-@media not all and (min-resolution: .001dpcm) {
-    @media {
-        span.handle {
-            top: 40px;
-        }
-        
-        span.remove {
-            top: 40px;
-        }
-    }
 }

canvas/js/canvas.js

@@ -844,7 +844,7 @@ $(document).ready(function() {
         return false;
     }
      */
-        
+    
     /* ================================================
         Serialize Form to JSON
     ================================================= */
@@ -935,13 +935,13 @@ $(document).ready(function() {
                             
                             itemListHTML +=
                                 // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + key + '">' + itm + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
-                                '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span>&nbsp;&nbsp;<div class="expandable" name="' + key + '" contenteditable="true">' + itm + '</div>&nbsp;<span class="remove glyphicon glyphicon-remove-circle"></span></li>';
+                                '<li class="added_item"><div class="expandable" name="' + key + '" contenteditable="true">' + itm + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                         });
                     }
                     else { // a single value string
                         itemListHTML +=
                             // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + key + '">' + value + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
-                            '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span>&nbsp;&nbsp;<div class="expandable" name="' + key + '" contenteditable="true">' + value + '</div>&nbsp;<span class="remove glyphicon glyphicon-remove-circle"></span></li>';
+                            '<li class="added_item"><div class="expandable" name="' + key + '" contenteditable="true">' + value + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                     }
                     /* Append the created list items/textatreas to the right field based on the "key"*/
                     /* the str.substr(start,length)
@@ -1084,7 +1084,7 @@ $(document).ready(function() {
             // The height of the newly added item = the height of the add new idea textarea
             $(this).closest('.card').find('ul.item_list').append(
                 // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + field_attr + '">' + new_item + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
-                '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span>&nbsp;&nbsp;<div class="expandable" name="' + field_attr + '" contenteditable="true">' + new_item + '</div>&nbsp;<span class="remove glyphicon glyphicon-remove-circle"></span></li>'
+                '<li class="added_item"><div class="expandable" name="' + field_attr + '" contenteditable="true">' + new_item + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
             );
             
             // Fix the heights only after a new item is added
@@ -1145,7 +1145,7 @@ $(document).ready(function() {
                 // The height of the newly added item = the height of the add new idea textarea
                 $(this).closest('.card').find('ul.item_list').append(
                     // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + field_attr + '">' + new_item + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>');
-                    '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span>&nbsp;&nbsp;<div class="expandable" name="' + field_attr + '" contenteditable="true">' + new_item + '</div>&nbsp;<span class="remove glyphicon glyphicon-remove-circle"></span></li>'
+                    '<li class="added_item"><div class="expandable" name="' + field_attr + '" contenteditable="true">' + new_item + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
                 );
                 // Fix the heights only after a new item is added
                 // fixHeights();
@@ -1177,14 +1177,14 @@ $(document).ready(function() {
     });
     
     /* ================================================
-    Moving items
+    Moving ideas to a different category
     ================================================= */
     
     // Declarations
     // var categoryUl = $("div#move-window ul");
     var categoryDestination;
-    var categoryOrigin;
     var categoryLis = $("div#move-window ul").html();
+    var categoryOrigin;
     var ideaLi;
     var linkLi;
     var linkText;
@@ -1293,7 +1293,41 @@ $(document).ready(function() {
     moveIdeaOnClick();
     
     /* ================================================
-    Deleting items
+    Moving ideas up
+    ================================================= */
+    
+    // When the user clicks on the "Up" button
+    $('.card').on('click', 'span.move-up', function() {
+        // Declarations
+        var ideaLiCurrent = $(this).parent();
+        var ideaLiPrevious = $(this).parent().prev();
+        
+        // Move the idea
+        if(ideaLiPrevious.is("li")) {
+            ideaLiCurrent.detach();
+            ideaLiPrevious.before(ideaLiCurrent);
+        }
+    });
+   
+    /* ================================================
+    Moving ideas down
+    ================================================= */
+    
+    // When the user clicks on the "Down" button
+    $('.card').on('click', 'span.move-down', function() {
+        // Declarations
+        var ideaLiCurrent = $(this).parent();
+        var ideaLiNext = $(this).parent().next();
+        
+        // Move the idea
+        if(ideaLiNext.is("li")) {
+            ideaLiCurrent.detach();
+            ideaLiNext.after(ideaLiCurrent);
+        }
+    });
+    
+    /* ================================================
+    Deleting ideas
     ================================================= */
     
     // when the cross beside the textarea is clicked (span.remove)
@@ -1309,7 +1343,7 @@ $(document).ready(function() {
     });
     
     /* ================================================
-    Sortable field items
+    Sortable field ideas
     ================================================= */
     
     // make items sortable in their fields and between fields