more responsive file listing, scales for smaller screen sizes

5 files changed, 48 insertions, 48 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');
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 4312a4bd8..8cb5f8f68 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -65,27 +65,29 @@
     </script>

 

     <script type="text/template" id="template-file">

-        <div class="file-row first">

+        <div class="file-row first span6">

             <i class="checkbox"></i>&nbsp;

             <span class="name">

             <% name %>

             </span>

         </div>

         <%= if finished %>

-        <div class="file-row second finished">

+        <div class="file-row second finished span3">

             <% else %> <%= if failed %>

-            <div class="file-row second failed">

+            <div class="file-row second failed span3">

                 <% download.error %>

                 <% else %>

-                <div class="file-row second">

+                <div class="file-row second span3">

                     <%/if%><%/if%>

                     <% download.statusmsg %>

                 </div>

 

-                <div class="file-row third pull-right">

+                <div class="file-row third span3 pull-right">

                     {#  TODO: file type as icon  #}

+                    <i class="iconf-music"></i>&nbsp;

                     <% formatSize size %>

-                    <i class="iconf-music"></i>

+

+                    <span class="pull-right">

                     <img src="icons/<% download.plugin %>"/>

                     <% download.plugin %>&nbsp;

                     <i class="iconf-chevron-down" data-toggle="dropdown"></i>

@@ -102,6 +104,7 @@
                             </ul>

                         </li>

                     </ul>

+                    </span>

                 </div>

     </script>