summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--module/web/static/css/default/dashboard.less47
-rw-r--r--module/web/static/css/default/style.less2
-rw-r--r--module/web/templates/default/dashboard.html117
3 files changed, 114 insertions, 52 deletions
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 @@
<li class="package-item">
<i class="iconf-check-empty"></i>
Package
- {# <div class="package-info">#}
- {# 1/2 5MIB 100 MIB#}
- {# </div>#}
- <div class="package-indicator">
- <i class="iconf-tags"></i>
- <i class="iconf-pause"></i>
- <i class="iconf-remove"></i>
- <i class="iconf-tasks"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%">
- 10 MB
+ <div class="package-frame">
+ <div class="tag-area">
+ <span class="badge badge-success badge-ghost"><i class="icon-tag icon-white"></i> Add Tag</span>
+ </div>
+ <div class="package-indicator">
+ <i class="iconf-tags"></i>
+ <i class="iconf-pause"></i>
+ <i class="iconf-remove"></i>
+ <i class="iconf-tasks"></i>
+ <i class="iconf-chevron-down"></i>
</div>
- <div class="bar bar-danger" style="width: 20%">
- 20 MB
+ <div class="progress">
+ <div class="bar bar-info" style="width: 50%">
+ 10 MB
+ </div>
+ <div class="bar bar-danger" style="width: 20%">
+ 20 MB
+ </div>
</div>
</div>
</li>
@@ -165,43 +167,76 @@
<i class="iconf-check-empty"></i>
many many More packages with really long names, some
even don't fit on the screen
- <div class="package-indicator">
- <i class="iconf-tags"></i>
- <i class="iconf-remove"></i>
- <i class="iconf-pause"></i>
- <i class="iconf-tasks"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%"></div>
+ <div class="package-frame">
+ <div class="package-indicator">
+ <i class="iconf-tags"></i>
+ <i class="iconf-remove"></i>
+ <i class="iconf-pause"></i>
+ <i class="iconf-tasks"></i>
+ <i class="iconf-chevron-down"></i>
+ </div>
+ <div class="progress">
+ <div class="bar bar-info" style="width: 50%">
+ 10 MB
+ </div>
+ </div>
</div>
</li>
<li class="package-item">
<i class="iconf-check-empty"></i>
Some.Movie.Title.2011.Language.DTS-HD.DL.1080p.BluRay.AVC.REMUX-xyzHD
- <div class="package-indicator">
- <i class="iconf-tags"></i>
- <i class="iconf-remove"></i>
- <i class="iconf-pause"></i>
- <i class="iconf-tasks"></i>
- <i class="iconf-chevron-down"></i>
- </div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%"></div>
+ <div class="package-frame">
+ <div class="package-indicator">
+ <i class="iconf-tags"></i>
+ <i class="iconf-remove"></i>
+ <i class="iconf-pause"></i>
+ <i class="iconf-tasks"></i>
+ <i class="iconf-chevron-down"></i>
+ </div>
+ <div class="progress">
+ <div class="bar bar-info" style="width: 50%">
+ xy
+ </div>
+ </div>
</div>
</li>
<li class="package-item">
<i class="iconf-check-empty"></i>
A.Movie.with.a.slightly.larger.Title.2012.720p.DTS.Bluray.x264-ReleaseGrp
- <div class="package-indicator">
- <i class="iconf-tags"></i>
- <i class="iconf-remove"></i>
- <i class="iconf-pause"></i>
- <i class="iconf-tasks"></i>
- <i class="iconf-chevron-down"></i>
+ <div class="package-frame">
+ <div class="package-indicator">
+ <i class="iconf-tags"></i>
+ <i class="iconf-remove"></i>
+ <i class="iconf-pause"></i>
+ <i class="iconf-tasks"></i>
+ <i class="iconf-chevron-down"></i>
+ </div>
+ <div class="progress">
+ <div class="bar bar-info" style="width: 50%">
+ abc 12
+ </div>
+ </div>
</div>
- <div class="progress">
- <div class="bar bar-info" style="width: 50%"></div>
+ </li>
+ <li class="package-item">
+ <i class="iconf-check-empty"></i>
+ Package
+ <div class="package-frame">
+ <div class="package-indicator">
+ <i class="iconf-tags"></i>
+ <i class="iconf-pause"></i>
+ <i class="iconf-remove"></i>
+ <i class="iconf-tasks"></i>
+ <i class="iconf-chevron-down"></i>
+ </div>
+ <div class="progress">
+ <div class="bar bar-info" style="width: 50%">
+ 10 MB
+ </div>
+ <div class="bar bar-danger" style="width: 20%">
+ 20 MB
+ </div>
+ </div>
</div>
</li>
</ul>
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-27 05:36:36 +0100