From f3916e73422ace95299fda88a752a18ec642b102 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 3 Mar 2013 22:55:50 +0100 Subject: more responsive file listing, scales for smaller screen sizes --- module/web/static/css/default/dashboard.less | 55 ++++++++++---------------- module/web/static/js/utils/animations.js | 17 ++++++-- module/web/static/js/views/fileView.js | 6 +-- module/web/static/js/views/linkGrabberModal.js | 3 +- module/web/templates/default/dashboard.html | 15 ++++--- 5 files changed, 48 insertions(+), 48 deletions(-) (limited to 'module/web') 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 @@ -- cgit v1.2.3