Miscellaneous minor fixes

canvas/css/canvas.css

@@ -218,7 +218,6 @@ ul.dropdown-menu a {
 ----------------------------------------------- */
 
 /* Tooltip */
-
 .tooltip-inner {
     padding: 7px 10px 7px 10px;
     text-align: left;
@@ -461,6 +460,7 @@ div#shadow {
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 2;
     background-color: rgba(0, 0, 0, 0.5);
 }
 
@@ -470,7 +470,7 @@ div#shadow {
 
 div.window {
     position: fixed;
-    z-index: 1;
+    z-index: 3;
     top: 20%;
     border-radius: 10px;
     padding: 1em 1.5em 1em 1em;
@@ -497,8 +497,8 @@ div.window p {
 ----------------------------------------------- */
 
 div#move-window {
-    left: 37.5%;
-    width: 25%;
+    left: 35%;
+    width: 30%;
 }
 div#move-window .move-window-button {
     background-color: transparent;
@@ -517,6 +517,7 @@ div#move-window h2 {
 div#move-window ul {
     list-style-type: none;
     padding-left: 0;
+    margin-bottom: 0;
 }
 
 /* ----------------------------------------------
@@ -614,6 +615,8 @@ div.card {
 
 .imp-exp-btn {
     margin-top: 2.5em;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 button.json_exp, button.share_canvas, .pdf_exp {
     border: none;
@@ -622,9 +625,12 @@ button.json_exp, button.share_canvas, .pdf_exp {
     width: 60%;
     outline: none;
 }
-button.json_exp:hover, button.share_canvas:hover, .pdf_exp:hover {
+button.json_exp:hover, button.share_canvas:hover {
     opacity: 0.6;
 }
+.pdf_exp:hover {
+    text-decoration: underline;
+}
 button.json_exp {
     background-color: #aed581;
     margin: 1em auto 0 auto;
@@ -677,27 +683,27 @@ a.login-to-save {
 .share_canvas{
 }
 .share_canvas_email{
-  display: none;
+    display: none;
 }
 .share_canvas_email input{
-  width: 80%;
-  padding: 1em;
-  border-radius: 5px;
-  border: 1px solid #444;
+    width: 80%;
+    padding: 1em;
+    border-radius: 5px;
+    border: 1px solid #444;
 }
 .share_canvas_email input:focus{
-outline: none;
+    outline: none;
 }
 
 /* The send btn */
 .share_canvas_send{
-  border: none;
-  border-radius: 0.5em;
-  padding: 1em 0;
-  width: 25%;
-  outline: none;
-  background-color: #546e7a;
-  color: #ffffff;
+    border: none;
+    border-radius: 0.5em;
+    padding: 1em 0;
+    width: 25%;
+    outline: none;
+    background-color: #546e7a;
+    color: #ffffff;
 }
 
 /* ----------------------------------------------
@@ -890,6 +896,15 @@ div.dialog {
         margin-top: 1.85em;
     }
     /* Jump to */
+    .jump-to-click-area {
+        position: fixed;
+        top: 0;
+        margin-left: -15px;
+        height: 48px;
+        width: 100%;
+        z-index: 2;
+        cursor: pointer;
+    }
     .jump-to {
         position: fixed;
         top: 0;
@@ -902,12 +917,29 @@ div.dialog {
         padding-top: 2em;
         display: none;
     }
-    .jump-to ul {
-        width: 100%;
+    .jump-to div div {
         display: none;
     }
+    .jump-to hr {
+        color: rgb(222, 222, 222);
+        margin-top: 0.2em;
+        margin-bottom: 0.2em;
+        margin-left: auto;
+        margin-right: auto;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .jump-to ul {
+        margin-top: 5px;
+        width: 110%;
+        margin-left: -15px;
+        margin-bottom: -5px;
+        padding-top: 5px;
+        padding-left: 15px;
+        padding-bottom: 10px;
+    }
     .jump-to img {
-        margin-right: 1px;
+        margin-right: 5px;
         height: 18px;
         width: 18px;
     }
@@ -927,7 +959,6 @@ div.dialog {
         transform: rotate(0deg);
         transition: .3s;
     }
-    
     /* Saved tags */
     .saved-tags {
         padding: 1em 1em 0.3em 1em;
@@ -938,6 +969,11 @@ div.dialog {
     .saved-tags p {
         display: block;
     }
+    /* Move window */
+    div#move-window {
+        left: 15%;
+        width: 70%;
+    }
     /* Tag window */
     div#tag-window textarea#tag-description {
         width: 100%;
@@ -1024,6 +1060,11 @@ div.dialog {
     .saved-tags p {
         display: block;
     }
+    /* Move window */
+    div#move-window {
+        left: 25%;
+        width: 50%;
+    }
     /* Tag window */
     div#tag-window textarea#tag-description {
         width: 100%;

canvas/index.php

@@ -87,42 +87,46 @@
                 </div>
                 
                 <!-- Jump to -->
+                <div class="jump-to-click-area">&nbsp;</div>
                 <div class="jump-to row">
                     <div class="col-s-12">
-                        <a href="#"><label class="jump_to"><img class="jump-to-arrow-0" src="icons/glyphicon-chevron-right.gif" />&nbsp;Jump to...</label></a>
+                        <label class="jump_to"><img class="jump-to-arrow-0" src="icons/glyphicon-chevron-right.gif" />Jump to...</label>
                         <!-- <a href="#"><label class="jump_to"><span class="jump-to-arrow glyphicon glyphicon-chevron-right"></span> Jump to...</label></a> -->
-                        <ul>
-                            <li>
-                                <a href="#row_saved_tags">Saved tags</a>
-                            </li>
-                            <li>
-                                <a href="#panel_01">1.&nbsp;&nbsp;Individuals Affected</a>
-                            </li>
-                            <li>
-                                <a href="#panel_02">2.&nbsp;&nbsp;Groups Affected</a>
-                            </li>
-                            <li>
-                                <a href="#panel_03">3.&nbsp;&nbsp;Behaviour</a>
-                            </li>
-                            <li>
-                                <a href="#panel_04">4.&nbsp;&nbsp;Relations</a>
-                            </li>
-                            <li>
-                                <a href="#panel_05">5.&nbsp;&nbsp;Worldviews</a>
-                            </li>
-                            <li>
-                                <a href="#panel_06">6.&nbsp;&nbsp;Group Conflicts</a>
-                            </li>
-                            <li>
-                                <a href="#panel_07">7.&nbsp;&nbsp;Product or Service Failure</a>
-                            </li>
-                            <li>
-                                <a href="#panel_08">8.&nbsp;&nbsp;Problematic Use of Resources</a>
-                            </li>
-                            <li>
-                                <a href="#panel_09">9.&nbsp;&nbsp;What can we do?</a>
-                            </li>
-                        </ul>
+                        <div>
+                            <hr />
+                            <ul>
+                                <li>
+                                    <a href="#row_saved_tags">Saved tags</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_01">1.&nbsp;&nbsp;Individuals Affected</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_02">2.&nbsp;&nbsp;Groups Affected</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_03">3.&nbsp;&nbsp;Behaviour</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_04">4.&nbsp;&nbsp;Relations</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_05">5.&nbsp;&nbsp;Worldviews</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_06">6.&nbsp;&nbsp;Group Conflicts</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_07">7.&nbsp;&nbsp;Product or Service Failure</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_08">8.&nbsp;&nbsp;Problematic Use of Resources</a>
+                                </li>
+                                <li>
+                                    <a href="#panel_09">9.&nbsp;&nbsp;What can we do?</a>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
                 
@@ -714,7 +718,7 @@
 
                         <p class="text-center">
                             <!-- Export JSON and also save the canvas for the registered user -->
-                            <a class="login-to-save"  href="../index.html">Sign up or login to save your canvas</a>
+                            <a class="login-to-save"  href="../index.html">Sign&nbsp;up&nbsp;or&nbsp;login to&nbsp;save&nbsp;your&nbsp;canvas</a>
                         </p>
                         <?php }?>
 
@@ -736,6 +740,7 @@
                         <span aria-hidden="true">&times;</span>
                     </button>
                     <h2>Move idea</h2>
+                    <p>Please select a category to move this&nbsp;idea&nbsp;to...</p>
                     <ul>
                         <li>
                             <a href="#">1.&nbsp;&nbsp;Individuals Affected</a>

canvas/js/canvas.js

@@ -117,22 +117,25 @@ $(document).ready(function() {
             // Declarations
             var scrollPosition = $(window).scrollTop();
             // var firstFieldPosition = $("div.field_01").offset().top;
-            var firstFieldPosition = $("div.saved-tags").offset().top;
+            var firstItemPosition = $("div.saved-tags").offset().top;
             
             // If the user has scrolled down to the first field
-            if(scrollPosition >= firstFieldPosition) {
+            if(scrollPosition >= firstItemPosition) {
                 $("div.jump-to").css("display", "block");
             }
             else {
                 $("div.jump-to").css("display", "none");
             }
         }
+        else {
+            $("div.jump-to").css("display", "none");
+        }
     });
     
     // When the user clicks on "Jump to", show menu
-    $("div.jump-to > div > a").on("click", function() {
+    $("div.jump-to-click-area").on("click", function() {
         // Toggle the menu
-        $("div.jump-to ul").slideToggle(300);
+        $("div.jump-to div div").slideToggle(300);
         
         // Rotate arrow
         // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-180");
@@ -151,7 +154,7 @@ $(document).ready(function() {
         var scrollPositionNew;
         
         // Toggle the menu
-        $("div.jump-to ul").slideToggle(300);
+        $("div.jump-to div div").slideToggle(300);
         
         // Rotate arrow
         // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-180");