diff options
| -rw-r--r-- | module/web/static/css/default/dashboard.less | 32 | ||||
| -rw-r--r-- | module/web/static/css/default/style.less | 56 | ||||
| -rw-r--r-- | module/web/static/js/views/packageView.js | 20 | ||||
| -rwxr-xr-x | module/web/templates/default/backbone/linkgrabber.html | 13 | ||||
| -rwxr-xr-x | module/web/templates/default/backbone/modal.html | 2 | ||||
| -rw-r--r-- | module/web/templates/default/dashboard.html | 22 |
6 files changed, 106 insertions, 39 deletions
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index e60a21dfb..0c749eb36 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -110,18 +110,42 @@ .package-row.third {
line-height: 26px;
+
}
.package-view a {
color: @light;
}
+// Tag area with different effect on hover
+.tag-area {
+ display: inline-block;
+
+ .badge i {
+ cursor: pointer;
+ &:hover {
+ background-position: -312px 0; // Remove icon
+ }
+ }
+
+ .badge-ghost {
+ visibility: hidden;
+ cursor: pointer;
+ opacity: 0.5;
+ }
+
+ &:hover .badge-ghost {
+ visibility: visible;
+ }
+
+}
+
// Box containing the files
.package-view > ul {
overflow: hidden;
- .gradient(left, @light, @greenLight);
-// box-shadow: 0 0 5px black;
+ .gradient(left, @light, @greenLight); // box-shadow: 0 0 5px black;
}
+
/*
File view
*/
@@ -131,8 +155,7 @@ }
.file-view > div {
- border-radius: 5px;
-// .gradient(top, @blueLighter, @blueLightest);
+ border-radius: 5px; // .gradient(top, @blueLighter, @blueLightest);
line-height: 26px;
}
@@ -154,6 +177,7 @@ .file-row.second {
width: 30%;
}
+
/*
FANCY CHECKBOXES
*/
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index e1b4e417e..7ad764542 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -161,27 +161,32 @@ a:hover { }
.btn-yellow {
- background-color: hsl(51, 99%, 55%) !important;
+ background-color: hsl(53, 96%, 44%) !important;
background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#feeb80), to(#fddb1a));
- background-image: -moz-linear-gradient(top, #feeb80, #fddb1a);
- background-image: -ms-linear-gradient(top, #feeb80, #fddb1a);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feeb80), color-stop(100%, #fddb1a));
- background-image: -webkit-linear-gradient(top, #feeb80, #fddb1a);
- background-image: -o-linear-gradient(top, #feeb80, #fddb1a);
- background-image: linear-gradient(#feeb80, #fddb1a);
- border-color: #fddb1a #fddb1a hsl(51, 99%, 50%);
- color: #333 !important;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#fbe64b), to(#dbc204));
+ background-image: -moz-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: -ms-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbe64b), color-stop(100%, #dbc204));
+ background-image: -webkit-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: -o-linear-gradient(top, #fbe64b, #dbc204);
+ background-image: linear-gradient(#fbe64b, #dbc204);
+ border-color: #dbc204 #dbc204 hsl(53, 96%, 39%);
+ color: #fff !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
-webkit-font-smoothing: antialiased;
+
+ .caret {
+ border-bottom-color: #FFFFFF;
+ border-top-color: #FFFFFF;
+ }
+
}
/*
Header
*/
-header {
-// background-color: @greyDark;
+header { // background-color: @greyDark;
background: url("../../img/default/bgpatterndark.png") repeat;
height: @header-height;
position: fixed;
@@ -319,8 +324,7 @@ header .logo { #speedgraph {
float: right;
width: 14%;
- height: 60px;
- // similiar as header_box
+ height: 60px; // similiar as header_box
margin: 8px 8px 0 8px;
font-family: sans-serif
}
@@ -341,8 +345,7 @@ header .logo { /*
Footer
*/
-footer {
-// background-color: @greyDark;
+footer { // background-color: @greyDark;
background: url("../../img/default/bgpatterndark.png") repeat;
color: @grey;
height: @footer-height;
@@ -425,4 +428,25 @@ footer h2 { background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
z-index: 50;
opacity: 0;
+}
+
+div.modal-header {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ background-color: @blueDark;
+ color: #FFFFFF;
+
+ .close {
+ color: @light;
+ }
+
+}
+
+div.modal-body {
+ max-height: 100%;
+}
+
+div.modal {
+ width: 600px;
+
}
\ No newline at end of file diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js index 22cc846ef..844c6fa0a 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -9,10 +9,12 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], template: _.compile($("#template-package").html()), events: { 'click .package-row .name': 'expand', - 'click .icon-remove': 'delete', + 'click .btn-remove': 'delete', 'click .checkbox': 'select' }, + ul: null, + // File views visible expanded: false, @@ -32,7 +34,7 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], var container = this.$('.package-header'); if (!container.length) this.$el.html(this.template(this.model.toJSON())); - else if(!fileOnly) + else if (!fileOnly) container.replaceWith(this.template(this.model.toJSON())); // TODO: could be done in template @@ -42,18 +44,19 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], this.$('.checkbox').removeClass('checked'); // Only create this views a single time - var ul = this.$('ul'); - if (!ul.length && this.model.isLoaded()) { + if (!this.ul && this.model.isLoaded()) { console.log('Rendered content of package ' + this.model.get('pid')); - ul = $('<ul></ul>'); + var ul = $('<ul></ul>'); + ul.addClass('file-items'); - if(!this.expanded) + if (!this.expanded) ul.hide(); this.model.get('files').each(function(file) { ul.append(new fileView({model: file}).render().el); }); this.$el.append(ul); + this.ul = ul; } return this; }, @@ -73,15 +76,16 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], e.preventDefault(); var self = this; + // this assumes the ul was created after item was rendered if (!this.expanded) { this.model.fetch({silent: true, success: function() { self.render(true); - self.$('ul').show(); + self.ul.show(); self.expanded = true; }}); } else { this.expanded = false; - this.$('ul').hide(); + this.ul.hide(); } }, diff --git a/module/web/templates/default/backbone/linkgrabber.html b/module/web/templates/default/backbone/linkgrabber.html index cbb46fd80..a43852f77 100755 --- a/module/web/templates/default/backbone/linkgrabber.html +++ b/module/web/templates/default/backbone/linkgrabber.html @@ -12,29 +12,30 @@ <label class="control-label" for="inputPackageName">Package name</label>
<div class="controls">
- <input type="text" id="inputPackageName" placeholder="Name of your package">
+ <input type="text" class="span4" id="inputPackageName" placeholder="Name of your package">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputLinks">Links</label>
<div class="controls">
- <textarea id="inputLinks" rows="10" placeholder="Paste your links here..."></textarea>
+ <textarea id="inputLinks" class="span4" rows="10" placeholder="Paste your links here...">
+ </textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
- <input type="text" id="inputPassword" placeholder="Password for .rar files">
+ <input type="text" id="inputPassword" class="span4" placeholder="Password for .rar files">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputContainer">Upload links container</label>
- <div class="controls">
- <input type="text" id="inputContainer" placeholder="Path to your container">
- <button id="inputContainer-btn" class="btn" type="button">Browse…</button>
+ <div class="controls controls-row">
+ <input type="text" id="inputContainer" class="span3" placeholder="Path to your container">
+ <button id="inputContainer-btn" class="btn span1" type="button">Browse…</button>
</div>
</div>
diff --git a/module/web/templates/default/backbone/modal.html b/module/web/templates/default/backbone/modal.html index 90a326a8f..d1186d40a 100755 --- a/module/web/templates/default/backbone/modal.html +++ b/module/web/templates/default/backbone/modal.html @@ -2,7 +2,7 @@ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{% block header%}Dialog{% endblock %}</h3>
</div>
-<div class="modal-body" style="max-height: 100%">
+<div class="modal-body">
{% block content %}
<%= content %>
{% endblock %}
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html index e5f941d6f..0c20589af 100644 --- a/module/web/templates/default/dashboard.html +++ b/module/web/templates/default/dashboard.html @@ -31,10 +31,24 @@ </div>
<div class="package-row third pull-right">
- <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag</span>
- <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag2</span>
- <i class="icon-wrench icon-white pull-right"></i>
- <i class="icon-remove icon-white pull-right"></i>
+ <div class="tag-area">
+ <span class="badge badge-important badge-ghost"><i class="icon-tag icon-white"></i> Add Tag</span>
+ <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag</span>
+ <span class="badge badge-important"><i class="icon-tag icon-white"></i> tag2</span>
+ </div>
+ {# <i class="icon-wrench icon-white pull-right"></i>#}
+ {# <i class="icon-remove icon-white pull-right"></i>#}
+ <div class="btn-group">
+ <button class="btn btn-mini btn-yellow"><i class="icon-play icon-white"></i></button>
+ <button class="btn btn-mini btn-yellow btn-remove"><i class="icon-remove icon-white"></i></button>
+ <button class="btn btn-mini btn-yellow"
+ data-toggle="dropdown">
+ <i class="icon-wrench icon-white"></i></button>
+ <ul class="dropdown-menu">
+ <li><a>Some</a></li>
+ <li><a>Options</a></li>
+ </ul>
+ </div>
</div>
</div>
</script>
|