1
0
Fork 0

Towards client panel

master
Matthieu Lalonde 12 years ago committed by xSmurf
parent 66d5e59f8e
commit 5219fbe781

@ -49,48 +49,44 @@
</div> </div>
<div class="ui-layout-west"> <div class="ui-layout-west">
<div id="wrapperSideBar"> <ul>
<ul> <li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
<li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li> <li>
<li> <span>
<span> <i class="icon-home"></i>&nbsp;<span>Servers</span>
<i class="icon-home"></i>&nbsp;<span>Servers</span> <a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-plus-sign"></i></a>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-plus-sign"></i></a> </span>
</span> <ul class="siderbar-server-list">
<ul class="siderbar-server-list"> <!--li>
<!--li> <span>
<span> <i class="icon-folder-close"></i>&nbsp;<span>Bigthug</span>
<i class="icon-folder-close"></i>&nbsp;<span>Bigthug</span> <a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a> </span>
</span> </li>
</li> <li>
<li> <span>
<span> <i class="icon-folder-close"></i>&nbsp;<span>WebDevTest</span>
<i class="icon-folder-close"></i>&nbsp;<span>WebDevTest</span> <a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a> </span>
</span> </li>
</li> <li>
<li> <span>
<span> <i class="icon-folder-close"></i>&nbsp;<span>ReallyLongNameWithNoBreaks</span>
<i class="icon-folder-close"></i>&nbsp;<span>ReallyLongNameWithNoBreaks</span> <a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a> </span>
</span> </li>
</li> <li>
<li> <span>
<span> <i class="icon-folder-close"></i>&nbsp;<span>Really Long Name Breaks</span>
<i class="icon-folder-close"></i>&nbsp;<span>Really Long Name Breaks</span> <a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a> </span>
</span> </li-->
</li--> </ul>
</ul> </li>
</li> </ul>
</ul>
</div>
</div> </div>
<div class="ui-layout-center" class="loading" id="wrapperMain"> <div class="ui-layout-center" class="loading"></div>
</div>
<div class="ui-layout-south row-fluid" id="wrapperFooter"> <div class="ui-layout-south row-fluid" id="wrapperFooter">
<div id="wrapperFooterLeft" class="span4 row-fluid"> <div id="wrapperFooterLeft" class="span4 row-fluid">

@ -13,6 +13,7 @@ body {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* /*
body.loading > * { body.loading > * {
display: none; display: none;
@ -22,16 +23,16 @@ body.loading > * {
* JLayout * JLayout
*/ */
.ui-layout-pane { /* all 'panes' */ .ui-layout-pane { /* all 'panes' */
background: transparent; background: transparent;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
.ui-layout-resizer { .ui-layout-resizer {
background: url('../img/viewport_background.png') repeat-x !important; background: url('../img/viewport_background.png') repeat-x !important;
cursor: row-resize !important;; cursor: row-resize !important;
} }
.ui-layout-toggler { .ui-layout-toggler {
@ -91,7 +92,7 @@ div#wrapperPlayer {
line-height: 21px; line-height: 21px;
} }
body > .ui-layout-west #wrapperSideBar { body > .ui-layout-west {
margin: 0; margin: 0;
padding: 0; padding: 0;
min-width: 100px; min-width: 100px;
@ -102,20 +103,20 @@ body > .ui-layout-west #wrapperSideBar {
height: 100%; height: 100%;
} }
body > .ui-layout-west > #wrapperSideBar ul, body > .ui-layout-west > ul,
body > .ui-layout-west > #wrapperSideBar ul li { body > .ui-layout-west > ul li {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
list-style-type: none; list-style-type: none;
} }
body > .ui-layout-west > #wrapperSideBar ul li { body > .ui-layout-west > ul li {
vertical-align: bottom; vertical-align: bottom;
margin-bottom: 5px; margin-bottom: 5px;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span { body > .ui-layout-west > ul li > span {
display: block; display: block;
line-height: 16px; line-height: 16px;
height: 16px; height: 16px;
@ -124,7 +125,7 @@ body > .ui-layout-west > #wrapperSideBar ul li {
padding-left: 5px; padding-left: 5px;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span > span { body > .ui-layout-west > ul li > span > span {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 16px; height: 16px;
@ -135,11 +136,11 @@ body > .ui-layout-west > #wrapperSideBar ul li {
vertical-align: middle; vertical-align: middle;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span:hover { body > .ui-layout-west > ul li > span:hover {
color: #000; color: #000;
} }
body > .ui-layout-west > #wrapperSideBar ul li.selected > span { body > .ui-layout-west > ul li.selected > span {
color: #FFF; color: #FFF;
background-color: #4966B1;/* Old browsers */ background-color: #4966B1;/* Old browsers */
background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */
@ -151,72 +152,80 @@ body > .ui-layout-west > #wrapperSideBar ul li {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */
} }
body > .ui-layout-west > #wrapperSideBar > ul > li:last-child > span:hover { body > .ui-layout-west > ul > li:last-child > span:hover {
background-color: transparent; background-color: transparent;
background: transparent; background: transparent;
color: #333; color: #333;
} }
body > .ui-layout-west > #wrapperSideBar ul li ul { body > .ui-layout-west > ul li ul {
margin-left: 10px; margin-left: 10px;
} }
body > .ui-layout-west > #wrapperSideBar ul li .sidebar-list-action { body > .ui-layout-west > ul li .sidebar-list-action {
display: none; display: none;
height: 14px; height: 14px;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span:hover > .sidebar-list-action { body > .ui-layout-west > ul li > span:hover > .sidebar-list-action {
display: inline-block; display: inline-block;
} }
div#wrapperMain > div > div:first { body > .ui-layout-center > div {
margin: 0; height: 100%;
padding: 0; width: 100%;
background: #FFF url(../img/grid3-hrow2.gif) repeat-x; overflow: hidden;
display: block;
} }
div#wrapperMain > div > div:first > div.third {
body > .ui-layout-center > div > div:first {
margin: 0;
padding: 0;
background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
}
body > .ui-layout-center > div > div:first > div.third {
width: 33.3333%; width: 33.3333%;
float: left; float: left;
clear: none; clear: none;
} }
div#wrapperMain > div > div:first > div.third:first-child { body > .ui-layout-center > div > div:first > div.third:first-child {
clear: left; clear: left;
} }
div#wrapperMain > div > div:first > div.third:last-child { body > .ui-layout-center > div > div:first > div.third:last-child {
clear: right; clear: right;
} }
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper { body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper {
border-left: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6;
} }
div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper, body > .ui-layout-center > div > div:first > div:first-child > div.dataTables_wrapper,
div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper { body > .ui-layout-center > div > div:first > div:first-child > div.dataTables_wrapper {
border-left: none; border-left: none;
padding-left: 1px; padding-left: 1px;
} }
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table td { body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table td {
padding-left: 4px; padding-left: 4px;
} }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; } body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_2 { background-color: transparent; } body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_2 { background-color: transparent; }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; } body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; }
div#wrapperList { .ui-layout-center .client-view-container {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
background: #FFF url(../img/grid3-hrow2.gif) repeat-x; background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
} }
div#wrapperList table#tableList { .ui-layout-center .client-view-container table.table-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -237,14 +246,14 @@ div#wrapperList {
} }
/* /*
div#wrapperList table#tableList tr td { .ui-layout-center .client-view-container table.table-list tr td {
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 20%; max-width: 20%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
*/ */
div#wrapperFooter { body > .ui-layout-south {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: url('../img/viewport_background.png') repeat-x left bottom; background: url('../img/viewport_background.png') repeat-x left bottom;
@ -252,21 +261,21 @@ div#wrapperFooter {
height: 30px; height: 30px;
line-height: 25px; line-height: 25px;
} }
div#wrapperFooter .btn-inverse { body > .ui-layout-south .btn-inverse {
line-height: 12px; line-height: 12px;
} }
div#wrapperFooter > div#wrapperFooterRight { body > .ui-layout-south > div#wrapperFooterRight {
text-align: right; text-align: right;
padding-right: 10px; padding-right: 10px;
padding-top: 3px; padding-top: 3px;
} }
div#wrapperFooter > div#wrapperFooterRight div.btn-group { body > .ui-layout-south > div#wrapperFooterRight div.btn-group {
height: 25px; height: 25px;
} }
div#wrapperFooter > div#wrapperFooterLeft { body > .ui-layout-south > div#wrapperFooterLeft {
text-align: left; text-align: left;
padding-left: 10px; padding-left: 10px;
padding-top: 2px; padding-top: 2px;
@ -335,7 +344,7 @@ div.dataTables_scrollHeadInner th {
border: none; border: none;
} }
div#wrapperMain > div > div:first div.dataTables_scrollHeadInner th { body > .ui-layout-center > div > div:first div.dataTables_scrollHeadInner th {
padding-left: 4px; padding-left: 4px;
} }
@ -352,10 +361,10 @@ table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected td.sorting_1, table.dataTable tbody tr.selected td.sorting_1,
table.dataTable tbody tr.selected td.sorting_2, table.dataTable tbody tr.selected td.sorting_2,
table.dataTable tbody tr.selected td.sorting_3, table.dataTable tbody tr.selected td.sorting_3,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_1, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_1,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_2, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_2,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_3, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_3,
.dropdown-menu * a:hover, .dropdown-menu * a:hover,
.dropdown-menu * a:focus, .dropdown-menu * a:focus,
.dropdown-menu * li:hover, .dropdown-menu * li:hover,
@ -380,10 +389,10 @@ div#wrapperPlayer {
height: 50px; height: 50px;
} }
div#wrapperFooter, body > .ui-layout-south,
table.dataTable tr td, table.dataTable tr td,
table.dataTable tr th, table.dataTable tr th,
div#wrapperSideBar, body > .ui-layout-west,
div#wrapperPlayer { div#wrapperPlayer {
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;

@ -123,11 +123,26 @@ _
, function __asyncAppDependenciesReady(err, result) { , function __asyncAppDependenciesReady(err, result) {
that.Views = {}; that.Views = {};
that.Views.SideBar = new SideBarView(that.servers);
that.Views.Player = new PlayerView();
that.Views.Main = new MainView();
that.Views.App = new AppView(); that.Views.App = new AppView();
that.Views.Footer = new FooterView();
that.Views.SideBar = new SideBarView({
el: that.Views.App.Layout.panes.west
, servers: that.servers
});
that.Views.Player = new PlayerView({
el: that.Views.App.Layout.panes.north
});
that.Views.Footer = new FooterView({
el: that.Views.App.Layout.panes.south
});
that.Views.Main = new MainView({
el: that.Views.App.Layout.panes.center
});
// TODO: Add playlist view here
that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) { that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) {
that.Views.App.toggleSideBar(); that.Views.App.toggleSideBar();
@ -178,7 +193,11 @@ _
if (client) { if (client) {
var __fnAppEventClientLoaded = function () { var __fnAppEventClientLoaded = function () {
if (!that.Views.Main.getView(server.get("hostname"))) { if (!that.Views.Main.getView(server.get("hostname"))) {
that.Views.Main.setView(server.client.attributes.hostname, new ClientView(server.client)); that.Views.Main.setView(server.client.attributes.hostname, new ClientView({
/*el: that.Views.App.Layout.panes.center
, */server: server
, aoppendEl: that.Views.App.Layout.panes.center
}));
} }
that.Views.Main.showView(server.get("hostname")); that.Views.Main.showView(server.get("hostname"));

@ -19,7 +19,7 @@ define([
return Backbone.View.extend({ return Backbone.View.extend({
el: $("body") el: $("body")
, layout: null , Layout: null
, layoutItems: null , layoutItems: null
, events: { , events: {
@ -30,7 +30,7 @@ define([
var that = this; var that = this;
that.layout = that.$el.layout({ that.Layout = that.$el.layout({
//applyDefaultStyles: true //applyDefaultStyles: true
defaults: { defaults: {
closable: false closable: false
@ -62,7 +62,7 @@ define([
} }
, toggleSideBar: function () { , toggleSideBar: function () {
this.layout.toggle("west"); this.Layout.toggle("west");
} }
}); });
}); });

@ -30,28 +30,59 @@ _
"use strict"; "use strict";
var Client = Backbone.View.extend({ var Client = Backbone.View.extend({
el: $(tmplClientLayout) id: null
, client: null , el: $(tmplClientLayout)
, layout: null , Server: null
, browserView: null , Layout: null
, listView: null , Views: {}
, initialize: function (client) { , initialize: function (options) {
var that = this _.bindAll(this
, container = document.createElement("div") , "show"
, "hide"
);
var that = this
, appendEl = options.appendEl
; ;
that.el.id = "__view-" + client.attributes.hostname.replace(".", "_");
Client.__super__.initialize.apply(that); that.Server = options.server;
delete options.server;
delete options.appendEl;
Client.__super__.initialize.apply(that, arguments);
that.el.id = "__view-" + that.Server.client.attributes.hostname.replace(".", "_");
that.id = that.Server.client.attributes.hostname;
/*
that.Views.Browser = new BrowserView(that.Client, {
el: that.Layout.panes.north
});
that.client = client; var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
, dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing")
;
that.layout = that.$el.find("> div").layout({ that.Views.List = new ListView(dbCollection, {
el: that.Layout.panes.center
, type: "client"
});
*/
}
, show: function () {
var that = this
;
that.Layout = that.$el.layout({
defaults: { defaults: {
closable: false closable: false
, resizable: true , resizable: true
@ -70,16 +101,12 @@ _
minSize: 200 minSize: 200
} }
}); });
//console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing"));
}
that.browserView = new BrowserView({ , hide: function () {
el: that.layout.panes.north var that = this
, client: that.client ;
});
that.ListView = new ListView({
el: that.layout.panes.center
, client: that.client
});
} }
}); });

@ -15,17 +15,17 @@ define([
, function (_, $, Backbone, Bootstrap, tmplModalAbout) { , function (_, $, Backbone, Bootstrap, tmplModalAbout) {
"use strict"; "use strict";
var View = Backbone.View.extend({ var Footer = Backbone.View.extend({
el: $("div#wrapperFooter") events: {
, events: {
"click button[data-target='modalAboutDaapr']": "_buttonAboutClick" "click button[data-target='modalAboutDaapr']": "_buttonAboutClick"
} }
, initialize: function () { , initialize: function (options) {
var that = this var that = this
; ;
Footer.__super__.initialize.apply(that, arguments);
that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) { that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) {
that.trigger("toggle:sidebar"); that.trigger("toggle:sidebar");
@ -48,5 +48,5 @@ define([
} }
}); });
return View; return Footer;
}); });

@ -12,7 +12,26 @@ define([
, function ($, Backbone, Bootstrap) { , function ($, Backbone, Bootstrap) {
"use strict"; "use strict";
return Backbone.View.extend({ var List = Backbone.View.extend({
el: $("table")
, type: "playlist"
, initialize: function (collection, options) {
this.$el = $(options.el).find("table:first");
this.type = options.type || "playlist";
List.__super__.initialize.apply(this, arguments);
this.$el.html("<tr><td><h1>" + this.type + "</h1></td></tr>");
return this;
}
, render: function () {
return this.$el;
}
}); });
return List;
}); });

@ -23,45 +23,88 @@ _
"use strict"; "use strict";
var Main = Backbone.View.extend({ var Main = Backbone.View.extend({
el: $("div#wrapperMain") children: {}
, children: {} , initialize: function (options) {
_.bindAll(this
, initialize: function (playlistCollection) { , "setView"
//this.setView("playlist", new ListView(playlistCollection)); , "getView"
, "showView"
, "hideView"
, "toggleView"
, "destroyView"
);
//that.setView("playlist", new ListView(playlistCollection));
Main.__super__.initialize.apply(this, arguments); Main.__super__.initialize.apply(this, arguments);
console.log(this.el);
} }
, setView: function (name, view) { , setView: function (name, view) {
console.debug("Set view: "+ name); var that = this
this.children[name] = view; ;
console.debug("Set view: "+ name, view);
that.children[name] = view;
} }
, getView: function (name) { , getView: function (name) {
return this.children[name]; var that = this
;
return that.children[name];
} }
, showView: function (name) { , showView: function (name) {
console.debug("Show view: "+ name); var that = this
if (this.children[name] && this.children[name].$el) { ;
this.children[name].$el.show();
this.$el.append(this.children[name].$el); console.debug("Show view: "+ name, that.$el, that.children[name], that.children[name].$el);
if (that.children[name] && that.children[name].$el) {
that.$el.append(that.children[name].$el);
if (that.children[name].show) {
setTimeout(function __fnTimeoutMainViewShow() {
that.children[name].show();
}, 50);
} else {
setTimeout(function __fnTimeoutMainViewShow() {
that.children[name].$el.show();
}, 50);
}
} }
} }
, hideView: function (name) { , hideView: function (name) {
var that = this
;
console.debug("Hide view: "+ name); console.debug("Hide view: "+ name);
if (this.children[name] && this.children[name].$el) { if (that.children[name] && that.children[name].$el) {
this.children[name].$el.hide(); if (that.children[name].hide) {
this.$el.remove(this.children[name].$el); that.children[name].hide();
} else {
that.children[name].$el.hide();
}
setTimeout(function __fnTimeoutMainViewHide() {
that.$el.remove(that.children[name].$el);
}, 50);
} }
} }
, toggleView: function (name) { , toggleView: function (name) {
if (this.children[name] && this.children[name].$el) { var that = this
this.children[name].$el.toggle(); ;
if (that.children[name] && that.children[name].$el) {
that.children[name].$el.toggle();
} }
} }
, destroyView: function (name) {
}
}); });
return Main; return Main;

@ -35,23 +35,22 @@ _
) { ) {
"use strict"; "use strict";
return Backbone.View.extend({ var SideBar = Backbone.View.extend({
el: $("div#wrapperSideBar") events: {
, elServerList: $("div#wrapperSideBar ul.siderbar-server-list")
, events: {
"click > ul > li:last-child > span > a.sidebar-list-action": "_addServerItem" "click > ul > li:last-child > span > a.sidebar-list-action": "_addServerItem"
} }
, router: null , router: null
, initialize: function (servers) { , initialize: function (options) {
_.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient"); _.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient");
var that = this var that = this
, serverModel = null , serverModel = null
; ;
this.servers = servers; SideBar.__super__.initialize.apply(that, arguments);
this.servers = options.servers;
async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() { async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() {
that.trigger("rendered"); that.trigger("rendered");
@ -178,7 +177,7 @@ console.log(event);
, $item = $(itemHtml) , $item = $(itemHtml)
; ;
this.elServerList.append($item); this.$el.find("ul:first > li > ul.siderbar-server-list").append($item);
item.on("change", function __fnSideBarViewClientItemChanged(event) { item.on("change", function __fnSideBarViewClientItemChanged(event) {
if (event.get("name")) { if (event.get("name")) {
@ -250,4 +249,6 @@ console.log(event);
$glyph.addClass(newClass); $glyph.addClass(newClass);
} }
}); });
return SideBar;
}); });

@ -1,16 +1,16 @@
<div> <div class="client-view-container">
<div class="ui-layout-north row-fluid span12"> <div class="ui-layout-north row-fluid span12">
<div class="third"> <div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="table-genres"></table> <table cellpadding="0" cellspacing="0" border="0" class="table-genres"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div> </div>
<div class="third"> <div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="table-artists"></table> <table cellpadding="0" cellspacing="0" border="0" class="table-artists"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div> </div>
<div class="third"> <div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="table-albums"></table> <table cellpadding="0" cellspacing="0" border="0" class="table-albums"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div> </div>
</div> </div>
<div class="ui-layout-center"> <div class="ui-layout-center">
<table cellpadding="0" cellspacing="0" border="0" class="table-list"></table> <table cellpadding="0" cellspacing="0" border="0" class="table-list"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div> </div>
</div> </div>
Loading…
Cancel
Save