more responsive file listing, scales for smaller screen sizes

4 files changed, 39 insertions, 42 deletions

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index d0f7b2eef..206c09ea8 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -166,10 +166,13 @@
 

 .file-view {

   position: relative;

-  padding-top: 1px;

-  border-bottom: 1px dotted @dark;

-  vertical-align: middle;

-  line-height: 26px;

+  padding: 0 4px;

+  border-top: 1px solid #dddddd;

+  line-height: 22px;

+

+  &:first-child {

+    border-top: none;

+  }

 

   &:hover, &.ui-selected:hover {

     border-radius: 5px;

@@ -180,12 +183,14 @@
   &.ui-selected {

     .gradient(top, @yellow, @yellowDark);

     color: @dark;

+    border-color: @greenDark;

   }

 

   img {

+    margin-top: -2px;

     padding: 0 2px;

-    height: 24px;

-    width: 24px;

+    height: 22px;

+    width: 22px;

   }

 

   .iconf-chevron-down:hover {

@@ -196,43 +201,26 @@
 }

 

 .file-row {

-  display: inline-block;

-  height: 100%;

-  padding-left: 8px;

-  padding-right: 8px;

+  min-height: 0 !important;

+  margin-top: 4px;

+  margin-bottom: 4px;

 

-  i {

-    margin-top: 3px;

+  &.second {

+    font-size: small;

   }

 

-  i.pull-right {

-    margin-top: 8px;

-  }

-}

-

-.file-row.first {

-  width: 50%;

-

-  .icon-white {

-    cursor: move;

+  &.third {

+    position: relative;

+    font-size: small;

   }

 

-}

-

-.file-row.second {

-  font-size: small;

-  width: 20%;

-}

-

-.file-row.third {

-  font-size: small;

-

   .dropdown-menu {

     font-size: medium;

   }

 

 }

 

+

 /*

  TODO: more colorful states

  better fileView design

@@ -250,11 +238,8 @@
 FANCY CHECKBOXES

 */

 .file-view .checkbox {

-  display: inline;

   width: 20px;

   height: 21px;

-  margin-top: -1px;

-  vertical-align: middle;

   background: url(../../img/default/checks_sheet.png) left top no-repeat;

   cursor: pointer;

 }

diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index ea06669b3..3350dd6ae 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -65,14 +65,25 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
     };
 
     // TODO: carry arguments, optional height argument
-    jQuery.fn.slideOut = function() {
+
+    // reset arguments, sets overflow hidden
+    jQuery.fn.slideOut = function(reset) {
         var o = jQuery(this[0]);
-        o.animate({height: o.data('height'), opacity: 'show'});
+        o.animate({height: o.data('height'), opacity: 'show'}, function() {
+            // reset css attributes;
+            if (reset) {
+                this.css('overflow', '');
+                this.css('height', '');
+            }
+        });
         return this;
     };
 
-    jQuery.fn.slideIn = function() {
+    jQuery.fn.slideIn = function(reset) {
         var o = jQuery(this[0]);
+        if (reset) {
+            o.css('overflow', 'hidden');
+        }
         o.animate({height: 0, opacity: 'hide'});
         return this;
     };
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 32ce7d723..a8cac9503 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -5,7 +5,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
         return ItemView.extend({
 
             tagName: 'li',
-            className: 'file-view',
+            className: 'file-view row-fluid',
 //        template: _.template($("#template-file").html()),
             template: _.compile($("#template-file").html()),
             events: {
@@ -67,10 +67,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
             visibility_changed: function(visible) {
                 // TODO: improve animation
                 if (visible)
-                    this.$el.slideOut();
+                    this.$el.slideOut(true);
                 else {
                     this.$el.calculateHeight(true);
-                    this.$el.slideIn();
+                    this.$el.slideIn(true);
                 }
             }
 
diff --git a/module/web/static/js/views/linkGrabberModal.js b/module/web/static/js/views/linkGrabberModal.js
index abc92d4e0..ea11aa339 100644
--- a/module/web/static/js/views/linkGrabberModal.js
+++ b/module/web/static/js/views/linkGrabberModal.js
@@ -31,7 +31,8 @@ define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'text!tpl/def
                 data: {
                     name: JSON.stringify($('#inputPackageName').val()),
                     links: JSON.stringify(['http://download.pyload.org/random.bin', 'invalid link', 'invalid link 2', 'invalid link 3', 'inavlid link 4',
-                                            'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin'])
+                                            'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin',
+                                            'A really really long invalid url that should exceed length of most of the urls by far and split into two lines'])
                 },
                 success: function() {
                     App.vent.trigger('package:added');