Reduced top space in hierarchy and removed commented (shifted) code

2 files changed, 92 insertions, 386 deletions

diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
index 2864bba..26aa45d 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
@@ -5,25 +5,23 @@
 
 <style>
 
-  	/*#app-set-item li { padding:0.5em }*/
-
 	.jqtree-closed > .jqtree-element i.icon-folder-open:before {
         content: "\f07b";
     }
 
     .jqtree-tree i {
-        margin-right: 4px;
+		margin-right: 4px;
     }
 
     ul.jqtree-tree ul.jqtree_common {
     	margin-left: 36px;
     }
+    
 </style>
 
 
 <script type="text/javascript">
 
-  	// $(document).ready(function() {
   	function plotHierarchyTree() {
 		// Funtion for loading tree for showing collection list left side panel
 		doc();
@@ -31,7 +29,6 @@
 		// Function for manipulating tree when user visits to page directly via browser url
 		{% if selected %} TreeTillNode(); {% endif %}
     }
-    // });
 
 
   	function TreeTillNode () {
@@ -553,71 +550,4 @@
 		});
 
 
-  </script>
-
-
-	{% if themes_hierarchy %}  <!-- bool -->
-
-		<h2> {{node.name}}</h2> 
-		<div class="row">
-		<div class="large-4 columns">
-
-			{% if user_access == "allow" %}
-
-	          <a class="button tiny" data-reveal-id="view_add_page" title="Add Theme Item">
-	            +&nbsp;Add Theme Item
-	          </a>
-
-	          <div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> 
-
-	              <h3>Add New Theme Item:</h3>
-	              <!-- To enter name of theme item -->
-	              <div>
-	                <input class="name_id" name="name" type="text" placeholder="Enter name...">
-	              </div>   <br/>           
-
-	              <input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/>
-
-	              <a class="close-reveal-modal">&#215;</a>
-
-	          </div>          
-	        {% endif %}
-	    </div>
-
-        <div class="large-4 columns">
-
-			<a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Tree Browser" %} </b></a> &nbsp;&nbsp;&nbsp;
-			<ul id="hover1" class="f-dropdown" data-dropdown-content>
-				<li><a class="fold"><i class="fi-plus"></i> {% trans "Fold" %} </a></li> 
-				<li><a class="unfold"><i class="fi-minus"></i> {% trans "Unfold" %} </a></li>  
-			</ul> 
-			
-			<a class="collapsible_tree" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Collapsible Tree" %} </b></a>
-
-		</div>
-
-		<div class="large-4 columns">
-		{% if user.is_authenticated %}
-    		{% if user_access == "allow" %}
-    		
-    			<input class="button tiny deleteObjects right" type="button" value="Delete">
-    			<span class="right"><input class="checkedAll" type="checkbox"> Select All &nbsp;&nbsp;</span>
-
-    			<div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> 
-        
-			        <h3>{% trans "Are you sure you want to delete? All of the related items for the following themes also will be deleted:" %}</h3> 
-			        
-			        <input class="button confirmDeleteObjects" type="button" value="Confirm">
-			        <input class="button cancelDeleteObjects" type="button" value="Cancel">
-			        <div id="deletion_results"></div>
-			        <a class="close-reveal-modal">&#215;</a>
-
-		      	</div>		
-
-    		{% endif %}
-		{% endif %}
-		</div>
-		</div>
-		<hr/>
-
-	{% endif %}
+</script>
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
index 7fa7240..33ac64b 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
@@ -21,325 +21,17 @@
 	<link href="/static/ndf/bower_components/jqtree/jqtree.css" rel="stylesheet"> 
 	<script src="/static/ndf/bower_components/jqtree/tree.jquery.js"></script>
 
-<!-- 	<script type="text/javascript">
-
-  	$(document).ready(function() {
-
-		// Funtion for loading tree for showing collection list left side panel
-		doc();
-
-		// Function for manipulating tree when user visits to page directly via browser url
-		{% if selected %} TreeTillNode(); {% endif %}
-    });
-
-
-  	function TreeTillNode () {
-
-		// This gives the last hierarchy node id from browser url.
-		var url = "{{selected}}";
-
-		var tree_build = $(".themes").not(".jqtree-loading");
-		var node = tree_build.tree('getNodeById', url);
-		tree_build.tree('openNode', node);
-
-		// Javascript function to be used for checking objects in specific time of interval
-		setTimeout(function(){
-
-		// console.log($(".themes"))
-		if( ($(".themes").length > 0) ) { TreeTillNode() }
-		}, 100 );
-    }
-
-
-	function doc() {
-		
-		var $tree = $('.themes');
-		var user = "{{user.is_authenticated}}";
-		var unfold = "{{unfold}}";
-
-		if(unfold == "true"){
-			unfold = true
-		}
-		else{
-			unfold = false
-		}
-
-		$tree.tree({
-			autoOpen: unfold,
-
-    		onCreateLi: function(node, $li) {
-					
-				if (node.node_type == "Topic"){
-					$li.find('.jqtree-title').before('&nbsp <span class="fi-page"></span> &nbsp;');				        	
-				}
-				else{
-					$li.find('.jqtree-title').before('&nbsp <span class="fi-folder" style="color:orange"></span> &nbsp;');				        		
-				}
-    			   
-				if (node.node_type == "Topic"){        					
-					$li.find('.jqtree-element').append(
-
-            				'&nbsp;&nbsp;<a id='+node.id+' name='+node.name+' class="topic" href="/{{groupid}}/topics/'+node.id+'/"> </a>' 
-        			);	            			
-				}
-				else{
-					if (user == "True"){
-
-    					$li.find('.jqtree-element').append(
-        					{% user_access_policy groupid request.user as user_access %}
-        					{% if user_access == "allow" %}
-
-                				'&nbsp;&nbsp;<a href="/{{groupid}}/topics/'+node.id+'/"> <i class="fi-pencil edit"></i></a> &nbsp;&nbsp; <a id='+node.id+' class="objectsCheckbox"> <input type="checkbox"> </a>' 
-                			
-                			{% endif %}
-        				);
-					}
-				}
-    		}
-		});
-		
-		// bind 'tree.click' event
-		$tree.bind(
-		    'tree.click',
-		    function(event) {
-		        // The clicked node is 'event.node'
-		        var node = event.node;
-
-		        var parent_arr = [];
-	            var parent_node = node;
-	            parent_arr.push(node.id);
-
-	            // Bellow code manipulates the parent hierarchy of clicked node in a tree
-	            while (parent_node) {
-	                if (parent_node.name !== undefined){           
-	                  $tree.tree('openNode', parent_node);
-	                  parent_node = parent_node.parent;
-	                  if (parent_node.name !== undefined){
-	                    parent_arr.push(parent_node.id);                                          
-	                  }
-	                }
-	                else{
-	                  break;
-	                }
-	            }
-	            var nav_list = parent_arr.reverse();
-		        // alert(nav_list);
-
-		        // If its topic node i.e no children of this node then show the detail view for topic
-		  		if( node.children[0] == null ){
-
-		  			if (node.node_type == "Topic"){
-		  				location.href = "/{{group_name_tag}}/topic_details/"+node.id+"?nav_li="+nav_list+"";
-		  			}
-			        
-		  		}
-		  		
-		    }
-		);
-
-		$tree.bind(
-		    'tree.contextmenu',
-		    function(event) {
-		        // The clicked node is 'event.node'
-		        var node = event.node;
-		        {% user_access_policy groupid request.user as user_access %}
-        		{% if user_access == "allow" %}
-			        var msg = confirm("Do you want to delete this topic ?");
-			        if (msg == true) {
-
-			        	$.ajax({
-			            	url: "{% url 'delete_themes' groupid %}",
-			             	type: 'POST',
-			             	data:{
-			             		deleteobj: node.id,
-			             		csrfmiddlewaretoken: '{{ csrf_token }}'
-			             	},
-			             	success: function(result){
-			             		alert("Topic "+node.name+" deleted successfully");
-			             		location.reload(true);
-			             	},
-			             	
-			            });
-
-					}
-				{% endif %} 
-
-		    }
-		);
-                 
-
-	};
-
-
-	// method to handle hover on topics
-	function showTopicStats(){
-      // Javascript function to be used for checking objects in specific time of interval
-      setTimeout(function(){
-      	//  On hover of topic node manipulate resources only once
-
-		$(".jqtree-title.jqtree_common").hover( function(){
-
-			topic_id = $(this).siblings("a").attr("id");
-			// var topic_name = $(this).siblings("a").attr("name");
-			var data_info = $(this).attr("data-info");
-			var hover_context = this;
-			if ( ! data_info && topic_id ){
-				$(".topic_stats").css("display", "none");
-
-				$.ajax({
-	            	url: "{% url 'get_topic_contents' groupid %}",
-	             	type: 'POST',
-	             	data:{
-	             		node_id: topic_id,
-	             		csrfmiddlewaretoken: '{{ csrf_token }}'
-	             	},
-	             	success: function(data){
-	             		
-	             		count = display_top_res(data)
-
-	             		if (data != "{}"){
-
-	             			$(".topic_stats").html(count);
-	             			$(hover_context).attr("data-info", data)
-
-	             			$(".topic_stats").css("display", "block");
-	             			
-	             		}
-	             		else{
-	             			$(hover_context).attr("data-info", data);	             			
-	             		}
-
-	             	},
-	             	
-	            });
-
-
-			}
-			else{ 
-				
-				if (topic_id){
-					var data = $(this).attr("data-info");
-					count = display_top_res(data)
-					$(".topic_stats").html(count);
-	     			$(".topic_stats").css("display", "block");
-				}
-
-			}
-		});
-		
-        // console.log($(".jqtree-element.jqtree_common"))
-        if( ($(".jqtree-title.jqtree_common").length <= 0) ) { 
-        	showTopicStats() 
-        }
-
-      }, 1000 );
-	}
-
-
-	function display_top_res(data){
-		data_obj = JSON.parse(data);
- 		count = ""
-
- 		if (data != "{}"){
- 			var k = Object.keys(data_obj); // To get the keys from incomming data
-
- 			for (var m = 0; m < k.length; m++) { 
- 				var key = k[m];  
- 				var len = data_obj[key].length;  // length of list as a value of key
- 				// alert(key+": "+len);
- 				count += key+": "+len+"<br/>";
- 			} 			
-
- 		}
- 		else{
- 			count += "No Resources !<br/>";
- 		}
-
- 		return count
-
-	}
-
-	showTopicStats();
-
-  </script>
- -->
   <style>
-/*
-  	#app-set-item li { padding:0.5em }
-
-	.jqtree-closed > .jqtree-element i.icon-folder-open:before {
-        content: "\f07b";
-    }
-    .jqtree-tree i {
-        margin-right: 4px;
-    }
-*/    /* for reingold tilford tree */
-/*
-	.node {
-	  cursor: pointer;
-	}
-
-	.node circle {
-	  fill: #fff;
-	  stroke: green;
-	  stroke-width: 1.5px;
-	}
-
-	.node text {
-	  font: 12px sans-serif;
-	}
-
-	.link {
-	  fill: none;
-	  stroke: #ccc;
-	  stroke-width: 1.5px;
-	}
-	*/
-	/* for reingold tilford tree -- end */
-
-	/*.node {
-    cursor: pointer;
-  }*/
-/*
-  .node circle {
-    fill: #fff;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-  }
-*/   
-  /*.node text {
-    font-size:10px; 
-    font-family:sans-serif;
-  }*/
-/*   
-  .link {
-    fill: none;
-    stroke: #ccc;
-    stroke-width: 1.5px;
-  }
-*/
+
   #theme-drag-zoom-tree-container{
   	border: medium dashed #D8BFD8;
   	border-radius: 5px;
   }
 
-/*  .templink {
-    fill: none;
-    stroke: red;
-    stroke-width: 3px;
-  }
-*/
-  /*.ghostCircle.show{
-      display:block;
-  }*/
-/*
-  .ghostCircle, .activeDrag .ghostCircle{
-       display: none;
-  }*/
-
   .download-graph{
   	color: gray
   }
+
   .download-graph:hover {
   	color: black;
   	background-color: #e5e5e5;
@@ -349,10 +41,24 @@
   	transition: all 1s;
   }
 
+  .themes {
+  	margin: 2rem 5rem;
+  }
+
+  .highlight {
+  	background-color: #efefef;
+	padding: 0 1em;
+	border: solid #e5e5e5;
+  }
+
+  #hover1.f-dropdown {
+  	width: 10em;
+  }
+
   </style>
 {% endblock%}
 
-
+<!-- 
 {% comment %}
 	{% block shelf_content %}
 	  {% if user.is_authenticated %}
@@ -362,6 +68,7 @@
 	  {% endif %}  
 	{% endblock %}
 {% endcomment %}
+ -->
 
 {% block meta_content %}
 	<a  class="Tp" href="{% url 'topics' group_name_tag %}" title="Click to go to themes card view">
@@ -400,12 +107,61 @@
 	        </div>
 	      </li>
 	  
-	</ul>
+		</ul>
 	</div>
 
 	{% endif %}
+	<br/>
+	<div>
+	{% if user_access == "allow" %}
+
+		<a class="button tiny expand" data-reveal-id="view_add_page" title="Add Theme Item">
+			+ Add Theme Item
+		</a>
+
+		<div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> 
+
+			<h3>Add New Theme Item:</h3>
+			<!-- To enter name of theme item -->
+			<div>
+				<input class="name_id" name="name" type="text" placeholder="Enter name...">
+			</div>
+			<br/>           
+
+			<input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/>
+
+			<a class="close-reveal-modal">&#215;</a>
+
+		</div>          
+
+	{% endif %}
+				
+    </div>
+    <!-- <br/> -->
+    <div>
+		{% if user.is_authenticated %}
+    		{% if user_access == "allow" %}
+    		
+    			<span><input class="checkedAll" type="checkbox"> Select All</span>
+    			<input class="button tiny deleteObjects right" type="button" value="Delete">
+
+    			<div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> 
+        
+			        <h3>{% trans "Are you sure you want to delete? All of the related items for the following themes also will be deleted:" %}</h3> 
+			        
+			        <input class="button confirmDeleteObjects" type="button" value="Confirm">
+			        <input class="button cancelDeleteObjects" type="button" value="Cancel">
+			        <div id="deletion_results"></div>
+			        <a class="close-reveal-modal">&#215;</a>
+
+		      	</div>		
+
+    		{% endif %}
+		{% endif %}
+	</div>
 
 	<div class="topic_stats panel" style="display:none; position:fixed; background-color:#ddd;border: 1px solid #1a1a1a;"> </div>
+
 {% endblock %}
 
 
@@ -413,9 +169,29 @@
 
 	{% user_access_policy groupid request.user as user_access %}
 
-
 	{% if themes_hierarchy and node %}
 
+		<div style="float:left; font-size: 2em; line-height: 0.8;"> {{node.name}}</div> 
+
+        <div style="float:right;  margin:0 2em;">
+
+			<a class="collapsible_tree {% if tree == 'collapsible' or not tree %} highlight {% endif %}" style="">
+				{% trans "Collapsible Tree" %}
+			</a>
+			
+			<a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser {% if tree == 'hierarchical' %} highlight {% endif %}" style="margin-left:2em;">
+				{% trans "Tree Browser" %}
+			</a>
+			
+			<ul id="hover1" class="f-dropdown" data-dropdown-content style="width: 7em;">
+				<li><a class="fold"><i class="fi-plus"></i> {% trans "Fold" %} </a></li> 
+				<li><a class="unfold"><i class="fi-minus"></i> {% trans "Unfold" %} </a></li>  
+			</ul> 
+
+		</div>
+
+		<br/>
+		<br/>
 
 		{% cache 300 theme_tree node.pk request.LANGUAGE_CODE tree unfold %}