client side event, code clean, ux modification, some corner case handling

recommender/recommender.py

@@ -4,7 +4,13 @@ import json, string, random, re
 
 import pkg_resources
 
-from eventtracking import tracker
+try:
+	from eventtracking import tracker
+except:
+	class tracker:
+		@staticmethod
+		def emit(a,b):
+			pass
 
 from mako.template import Template
 from mako.lookup import TemplateLookup
@@ -224,14 +230,16 @@ class RecommenderXBlock(XBlock):
             resource_log['old_' + field] = self.recommendations[idx][field]
             resource_log[field] = data[field]
         # check url for redundancy
-        for recom in self.recommendations:
-            if self.recommendations[idx]['url'] == data['url']:
-                continue
-            if recom['url'] == data['url']:
-                resource_log['error'] = 'existing url'
-                print "provided url is existing"
-                tracker.emit('edit_resource', resource_log)
-                return {"Success": False}
+        if self.recommendations[idx]['url'] != data['url']:
+            for recom in self.recommendations:
+                if recom['url'] == data['url']:
+                    resource_log['error'] = 'existing url'
+                    for field in valid_fields:
+                        resource_log['dup_' + field] = self.recommendations[self.recommendations.index(recom)][field]
+                    resource_log['dup_id'] = self.recommendations[self.recommendations.index(recom)]['id']
+                    print "provided url is existing"
+                    tracker.emit('edit_resource', resource_log)
+                    return {"Success": False}
 
         for key in data:
           if key == 'resource':
@@ -290,6 +298,7 @@ class RecommenderXBlock(XBlock):
         frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
         frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
         frag.add_css(self.resource_string("static/css/recommender.css"))
+        frag.add_javascript(self.resource_string("static/js/src/cats.js"))
         frag.add_javascript(self.resource_string("static/js/src/recommender.js"))
         frag.initialize_js('RecommenderXBlock')
         return frag

recommender/static/css/recommender.css

@@ -6,7 +6,9 @@
 
 .recommender_block p {
     cursor: pointer;
-}.hidden { display: none;}
+}
+
+.hidden { display: none;}
 
 .recommender_block {
   width : 100%;
@@ -17,17 +19,27 @@
   float: left;
 }
 
-.recommender_row_top { 
+.recommender_row_top, .recommender_modify_title_container { 
 /*  overflow:scroll;
   max-height:200px;*/
   font-size: 20px;
-  background-color:rgb(204, 198, 198);
+  padding-top: 0.5em;
+  padding-left: 0.5em;
+  background-color: #f5efef;
+  height: 40px;
+  color: darkgray;
 }
 
 .recommender_row { 
   height: 380px;
 }
 
+.recommender_title {
+  flex-grow : 1;
+  max-height: 65px;
+  overflow-y: scroll;
+}
+
 .question {
   width:700px;
 }
@@ -61,13 +73,9 @@
   padding : 0 0 10 0;
 }
 
-.recommender_title {
-  flex-grow : 1;
-}
-
 .recommender_modify {
   width: 700px;
-  float: left;
+/*  float: left; */
 }
 
 .descriptionImg {
@@ -95,6 +103,7 @@
   width: 100%; 
   text-align: center;
   cursor: default;
+  font-weight: 900;
 }
 
 .recommender_recommendations { display: table; }
@@ -135,7 +144,7 @@
 
 .recommender_vote_arrow_down, .recommender_vote_arrow_up, .recommender_title, .resource_edit_button, .flagResource, .resource_add_button, .hide-show, .paginationCell, .backToViewButton { cursor: pointer; }
 
-.resource_add_button { float: left; font-weight: bold; }
+.resource_add_button { text-align: right; font-weight: bold; }
 .resource_edit_button { float: left; }
 .addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle {
   margin-bottom: 1em;
@@ -153,22 +162,34 @@
 }
 
 .backToViewButton { color: #1d9dd9; float: left; }
-.recommender_modify_title { position: relative; left: 50px; overflow: auto; }
 
 .ui-icon.problematic {
     background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
 }
 
+.in_title, .edit_title { 
+  height: 75px;
+  position: relative;
+  margin-left: 0.5em;
+  width:100%;
+}
+.in_url, .edit_url, .flag_reason {
+  height: 25px;
+  position: relative;
+  margin-left: 0.5em;
+  width:100%;
+}
+
 .resource_hovered { background-color:#F2F7FA }
 
-.recommender_modify_title_container { background: rgb(204, 198, 198); font-size: 20px; }
+.recommender_modify_title { float: right; padding-right: 2em; overflow: auto; }
 
-.nonevoting { color: rgb(204, 198, 198); }
+.nonevoting { color: #bdbdb4; }
 .hide-show-icon { margin-left: 0.5em; }
 
 .recommender_vote_score.upvoting, .recommender_vote_arrow_up.upvoting { color: rgb(69, 194, 10); }
 .recommender_vote_score.downvoting, .recommender_vote_arrow_down.downvoting { color: red; }
-.recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: rgb(204, 198, 198); }
+.recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: #bdb4b4; }
 
 
 .downArrowIcon:before { content: '▼'; }
@@ -177,7 +198,8 @@
 .rightArrowIcon:before { content: '►'; }
 .leftArrowIcon:before { content: '◄'; }
 .moreIcon:before { content: '...'; }
-.lightgreyBg { background-color: lightgrey; }
+.lightgreyBg { background-color: #f5efef; }
 
+a { word-break: break-all; }
 a:link { color: black; }
 form { margin: 0em; }

recommender/static/html/recommender.html

@@ -5,7 +5,7 @@
   <div class="recommender_recommendations">
     <div class="recommender_content">
       <div class="recommender_row_top hide-show resource_list_expanded">
-        Related resources<div class='recommender_panel'><span class="resource_add_button plusIcon"></span> <span class='hide-show-icon upArrowIcon'></span> </div>
+        Related resources<div class='recommender_panel'> <span class='hide-show-icon upArrowIcon'></span> </div>
       </div>
       <div class='recommender_row_inner'>
         <div class="recommender_row">
@@ -34,10 +34,19 @@
             <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode" />
           % endfor
         </div>
-        <div class='pagination'> </div>
+        <div class="resource_add_button">Add new resource &gt;&gt;</div>
+        <div class='pagination'>
+          <div class="paginationRowTemplate hidden">
+		    <div class="paginationCell leftArrowIcon"></div>
+		    <div class="paginationCell moreIcon leftMoreIcon" style="cursor: default;"></div>
+		    <div class="paginationCell lightgreyBg"></div>
+		    <div class="paginationCell moreIcon rightMoreIcon" style="cursor: default;"></div>
+		    <div class="paginationCell rightArrowIcon"></div>
+          </div>
+        </div>
         <div class="recommender_description">
           <div class="descriptionImg">
-            <div> This is a list of resources your fellow students
+            <div class='descriptionIntro'> This is a list of resources your fellow students
             thought might be helpful. If you find another useful
             resource, either on edx.org or elsewhere, please add
             it. If you can improve the description or preview of a
@@ -45,6 +54,8 @@
             helpful, upvote it. If it&rsquo;s not so helpful, downvote
             it. If it has issues (illegal material, incorrect, etc.),
             please flag it and let us know the reason. </div>
+
+            <img class="previewingImg hidden" src="" style="height: 100%" />
           </div>
         </div>
       </div>
@@ -55,7 +66,6 @@
         <div class="flagSourceBlockTitle">Why would you like to flag this resource?</div>
         <input type="text" 
           class="flag_reason" 
-          style="height: 25px; position: relative; left: 10px; width:100%" 
           name="flag_rationale"
           placeholder="Reason for why this resource should be removed"/><br/>
         <input type="button" value="Flag resource" class="flag_reason_submit" style="margin-top: 0.5em;">

recommender/static/html/resourcebox.html

@@ -2,7 +2,7 @@
   <div class="recommender_resource">
 	<div class="recommender_vote_box">
 	  <div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
-	  <div class="recommender_vote_score ${voteMode}"><b>${votes}</b></div>
+	  <div class="recommender_vote_score ${voteMode}">${votes}</div>
 	  <div class="recommender_vote_arrow_down ${voteMode}" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
 	</div>
 	<div class="recommender_blurb">