From 337fd980bcae89bb8b8f005c55ca3810128a525c Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 17 Feb 2013 19:36:26 +0100 Subject: show additional package info on hover --- module/web/static/css/default/dashboard.less | 47 ++++++++--- module/web/static/css/default/style.less | 2 +- module/web/templates/default/dashboard.html | 117 +++++++++++++++++---------- 3 files changed, 114 insertions(+), 52 deletions(-) (limited to 'module/web') diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index bfca80bc2..fedf4acdb 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -27,26 +27,46 @@ margin-left: 0; } +@frame-border: 20px; + +.package-frame { + position: absolute; + border-radius: 5px; + top: -@frame-border; + left: -@frame-border / 2; + right: -@frame-border / 2; + bottom: -@frame-border + 4px; // + size of visible bar + z-index: -1; // lies under package +} + .package-item { cursor: pointer; - margin-bottom: 4px; + padding-bottom: 4px; + margin: 8px 0; position: relative; overflow: hidden; + -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; - i { + i.iconf-check-empty { cursor: move; } .progress { - height: 4px; - border-radius: 2px; + position: absolute; + height: @frame-border; + line-height: @frame-border; + border-radius: 0; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + bottom: 0; + left: 0; + right: 0; margin-bottom: 0; background-image: none; background-color: @yellow; - clear: both; } .bar-info { @@ -54,6 +74,14 @@ background-color: @blue; } + &:hover { + overflow: visible; + z-index: 10; + + .package-frame { + background-color: @light; + } + } } .package-info { @@ -61,14 +89,13 @@ } .package-indicator { - color: @light; + color: @blue; position: absolute; - padding: 2px; - bottom: 5px; - border-radius: 5px; + height: @frame-border; + line-height: @frame-border; + top: 0; right: 0; float: right; - .gradient(top, @blue, @blueDark); } /* diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 4e6f6bd39..a6df51625 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -446,7 +446,7 @@ footer h2 { background: -o-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); - z-index: 50; + z-index: 100; opacity: 0; } diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html index d02d299e4..1e0039b91 100644 --- a/module/web/templates/default/dashboard.html +++ b/module/web/templates/default/dashboard.html @@ -142,22 +142,24 @@
  • Package - {#
    #} - {# 1/2 5MIB 100 MIB#} - {#
    #} -
    - - - - - -
    -
    -
    - 10 MB +
    +
    + Add Tag +
    +
    + + + + +
    -
    - 20 MB +
    +
    + 10 MB +
    +
    + 20 MB +
    • @@ -165,43 +167,76 @@ many many More packages with really long names, some even don't fit on the screen -
    - - - - - -
    -
    -
    +
    +
    + + + + + +
    +
    +
    + 10 MB +
    +
  • Some.Movie.Title.2011.Language.DTS-HD.DL.1080p.BluRay.AVC.REMUX-xyzHD -
    - - - - - -
    -
    -
    +
    +
    + + + + + +
    +
    +
    + xy +
    +
  • A.Movie.with.a.slightly.larger.Title.2012.720p.DTS.Bluray.x264-ReleaseGrp -
    - - - - - +
    +
    + + + + + +
    +
    +
    + abc 12 +
    +
    -
    -
    +
    • +
  • + + Package +
    +
    + + + + + +
    +
    +
    + 10 MB +
    +
    + 20 MB +
    +
    • -- cgit v1.2.3