Resources fixes
authorKostas Papadimitriou <kpap@grnet.gr>
Mon, 26 Mar 2012 16:48:38 +0000 (19:48 +0300)
committerKostas Papadimitriou <kpap@grnet.gr>
Mon, 26 Mar 2012 16:48:38 +0000 (19:48 +0300)
cloudcms/static/cloudcms/css/styles.css
cloudcms/static/cloudcms/less/resources.less
cloudcmsresources/static/cloudcmsresources/js/resources_list.js
cloudcmsresources/templates/content/resources_list.html

index 1a1e853..b0a2dfa 100644 (file)
@@ -661,8 +661,12 @@ a.button:hover {
 .resources .categories ul li a:hover, .resources .categories ul li a.selected {
   color: #000 !important;
 }
 .resources .categories ul li a:hover, .resources .categories ul li a.selected {
   color: #000 !important;
 }
-.resources .categories ul li a.inactive {
-  opacity: 0.4;
+.resources .categories ul li.inactive {
+  opacity: 0.3;
+}
+.resources .categories ul li.active {
+  opacity: 1;
+  font-weight: bold;
 }
 .resources .list {
   font-size: 0.9em;
 }
 .resources .list {
   font-size: 0.9em;
@@ -734,6 +738,8 @@ a.button:hover {
   color: #808080;
 }
 .resources .list .resource .download {
   color: #808080;
 }
 .resources .list .resource .download {
+  margin-left: -10px;
+  margin-bottom: 3px;
   bottom: 0;
   position: absolute;
   font-size: 1.1em;
   bottom: 0;
   position: absolute;
   font-size: 1.1em;
index 90e194d..619032b 100644 (file)
                 color: #000 !important;
             }
 
                 color: #000 !important;
             }
 
+        }
+
+        ul li {
             &.inactive {
             &.inactive {
-                opacity: 0.4;
+                opacity: 0.3;
+            }
+            &.active {
+                opacity: 1;
+                font-weight: bold;
             }
         }
     }
             }
         }
     }
@@ -81,6 +88,8 @@
                 a { color: @gray }
             }
             .download {
                 a { color: @gray }
             }
             .download {
+                margin-left: -10px;
+                margin-bottom: 3px;
                 a {
                     display: block;
                     color: @black;
                 a {
                     display: block;
                     color: @black;
index 15fc672..0b6b8a1 100644 (file)
@@ -26,9 +26,13 @@ function ResourcesModule(el, conf) {
 
     var self = this;
     $(window).bind('hashchange', function() {
 
     var self = this;
     $(window).bind('hashchange', function() {
-        //self.selected_category = window.location.hash.substring(1);
-        //self.update_page_objects();
+        self.selected_category = window.location.hash.substring(1);
+        self.update_page_objects();
+        self.update_selected_category();
     })
     })
+
+    self.update_page_objects();
+    self.update_selected_category();
 }
 
 ResourcesModule.prototype.switch = function(hide, show) {
 }
 
 ResourcesModule.prototype.switch = function(hide, show) {
@@ -42,7 +46,6 @@ ResourcesModule.prototype.switch = function(hide, show) {
                 }, 
                 {
                     complete:function(){
                 }, 
                 {
                     complete:function(){
-                        console.log("complete");
                         hide.remove();
                         newshow.css({top:0});
                 }
                         hide.remove();
                         newshow.css({top:0});
                 }
@@ -82,26 +85,35 @@ ResourcesModule.prototype.animate_els = function(els) {
     $(el).show();
 }
 
     $(el).show();
 }
 
+ResourcesModule.prototype.update_selected_category = function() {
+    if (!this.selected_category) {
+        this.categories.removeClass("inactive").removeClass("active");    
+    }
+
+    var to_hide = this.categories.filter("[data-id="+this.selected_category+"]");
+    var to_show = this.categories.filter("[data-id!="+this.selected_category+"]");
+
+    to_show.removeClass("active").addClass("inactive");
+    to_hide.removeClass("inactive").addClass("active");
+}
+
 ResourcesModule.prototype.update_page_objects = function() {
     var to_show = this.resources().filter("[data-category="+this.selected_category+"]");
     var to_hide = this.resources().filter("[data-category!="+this.selected_category+"]");
         
     if (!this.selected_category) { to_show = this.resources(); }
     _.each(to_hide, function(el){
 ResourcesModule.prototype.update_page_objects = function() {
     var to_show = this.resources().filter("[data-category="+this.selected_category+"]");
     var to_hide = this.resources().filter("[data-category!="+this.selected_category+"]");
         
     if (!this.selected_category) { to_show = this.resources(); }
     _.each(to_hide, function(el){
-        $(el).fadeOut(100);
+        $(el).hide();
+    });
+
+    _.each(to_show, function(el, i){
+        if (i%3 == 0) {
+            $(el).addClass("first");
+        } else {
+            $(el).removeClass("first");
+        }
+        $(el).fadeIn(40);
     });
     });
-    
-    var delay = this.selected_category ? 40 : 0;
-    var self = this;
-    window.setTimeout(function(){
-        _.each(to_show, function(el, i) {
-            var new_main_height = (self.grid_height + self.grid_gap) * (Math.floor(to_show.length/3) + 1);
-            if (self.el.height() < new_main_height) {
-                self.el.height(new_main_height);
-            }
-        })
-        self.animate_els(to_show);
-    }, delay)
 }
 
 $(document).ready(function(){
 }
 
 $(document).ready(function(){
index a17a388..e5efa5b 100644 (file)
@@ -38,7 +38,7 @@
                 <p>{{ r.translation.description }}</p>
             </div>
             <div class="download">
                 <p>{{ r.translation.description }}</p>
             </div>
             <div class="download">
-                <a class="resource-download" href="{{ r.media_file.get_absolute_link }}">
+                <a class="resource-download" target="_blank" href="{{ r.media_file.get_absolute_url }}">
                     <span class="download-image"></span>
                     <span>{% trans "DOWNLOAD" %} {{ r.get_filetype }}</span>
                 </a>
                     <span class="download-image"></span>
                     <span>{% trans "DOWNLOAD" %} {{ r.get_filetype }}</span>
                 </a>