Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show a basic spinner while the app is loading all the js files/series list.

This commit is contained in:
Keivan Beigi 2013-08-01 18:02:55 -07:00 committed by kay.one
parent 39f0ed9d21
commit 376b386b31
9 changed files with 159 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
UI/.idea/dictionaries/Keivan_Beigi.xml
View File

@ -7,6 +7,7 @@
<w>couldn</w> <w>couldn</w>
<w>mouseenter</w> <w>mouseenter</w>
<w>mouseleave</w> <w>mouseleave</w>
<w>navbar</w>
</words> </words>
</dictionary> </dictionary>
</component> </component>

39
UI/Content/menu.less
View File

@ -10,15 +10,15 @@
} }
} }
#in-sub-nav li a { #nav-region li a {
color : #b9b9b9; color : #b9b9b9;
} }
#in-sub-nav li a:focus { #nav-region li a:focus {
text-decoration : none; text-decoration : none;
} }
#in-sub-nav { #nav-region {
margin-bottom : 80px; margin-bottom : 80px;
.span12 { .span12 {
@ -33,7 +33,38 @@
} }
} }
.backdrop #in-sub-nav { .backdrop #nav-region {
background-color : #000000; background-color : #000000;
.opacity(0.85); .opacity(0.85);
} }
#nav-region li a:hover, #in-sub-nav li a.active {
background-color : #555555;
text-decoration : none;
}
#nav-region {
ul {
text-align : center;
margin-bottom : 10px;
}
li {
list-style-type : none;
display : inline-block;
a {
display : block;
border-radius : 6px;
padding : 15px 10px 5px;
min-height : 56px;
min-width : 64px;
margin : 20px 10px 10px;
color : #ffffff;
font-weight : 100;
}
span.label.pull-right {
position : relative;
top : 24px;
right : 14px;
}
}
}

30
UI/Content/theme.less
View File

@ -57,10 +57,7 @@ footer {
color : rgba(255, 255, 255, 0.8); color : rgba(255, 255, 255, 0.8);
} }
#in-sub-nav li a:hover, #in-sub-nav li a.active {
background-color : #555555;
text-decoration : none;
}
body h1, body h2, body h3, body h4, body h5, body h6 { body h1, body h2, body h3, body h4, body h5, body h6 {
text-transform : capitalize; text-transform : capitalize;
@ -81,28 +78,3 @@ body h1, body h2, body h3, body h4, body h5, body h6 {
} }
} }
#in-sub-nav {
ul {
text-align : center;
margin-bottom : 10px;
}
li {
list-style-type : none;
display : inline-block;
a {
display : block;
border-radius : 6px;
padding : 15px 10px 5px;
min-height : 56px;
min-width : 64px;
margin : 20px 10px 10px;
color : #ffffff;
font-weight : 100;
}
span.label.pull-right {
position : relative;
top : 24px;
right : 14px;
}
}
}

42
UI/MainMenuView.js
View File

@ -1,42 +0,0 @@
'use strict';
define(['marionette'], function (Marionette) {
var MainMenuView = Marionette.ItemView.extend({
events: {
'click a': 'onClick'
},
onClick: function (event) {
event.preventDefault();
var target = $(event.target);
//look down for <a/>
var href = event.target.getAttribute('href');
//if couldn't find it look up
if (!href && target.parent('a') && target.parent('a')[0]) {
var linkElement = target.parent('a')[0];
href = linkElement.getAttribute('href');
this.setActive(linkElement);
} else {
this.setActive(event.target);
}
},
setActive: function (element) {
//Todo: Set active on first load
this.$('a').removeClass('active');
$(element).addClass('active');
},
initialize: function () {
this.setElement($('#main-menu-region'));
}
});
return new MainMenuView();
});

62
UI/Navbar/NavbarTemplate.html Normal file
View File

@ -0,0 +1,62 @@
<div class="container">
<div class="row">
<div class="span12">
<ul id="main-menu-region">
<div class="pull-left logo">
<a href="/">
<img src="/Content/Images/logo.png" alt="NzbDrone">
</a>
</div>
<li>
<a href="/">
<i class="icon-play"></i>
<br>
Series
</a>
</li>
<li>
<a href="/calendar">
<i class="icon-calendar"></i>
<br>
Calendar
</a>
</li>
<li>
<a href="history">
<i class="icon-time"></i>
<br>
History
</a>
</li>
<li>
<a href="missing">
<i class="icon-warning-sign"></i>
<br>
Missing
</a>
</li>
<li>
<a href="settings">
<i class="icon-cogs"></i>
<br>
Settings
</a>
</li>
<li>
<a href="system">
<i class="icon-laptop"></i>
<br>
System
</a>
</li>
<li>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KRTE52U3XJDSQ" target="_blank">
<i class="icon-heart"></i>
<br>
Donate
</a>
</li>
</ul>
</div>
</div>
</div>

41
UI/Navbar/NavbarView.js Normal file
View File

@ -0,0 +1,41 @@
'use strict';
define(
[
'marionette'
], function (Marionette) {
return Marionette.ItemView.extend({
events: {
'click a': 'onClick'
},
template : 'Navbar/NavbarTemplate',
onClick: function (event) {
event.preventDefault();
var target = $(event.target);
//look down for <a/>
var href = event.target.getAttribute('href');
//if couldn't find it look up
if (!href && target.parent('a') && target.parent('a')[0]) {
var linkElement = target.parent('a')[0];
href = linkElement.getAttribute('href');
this.setActive(linkElement);
}
else {
this.setActive(event.target);
}
},
setActive: function (element) {
//Todo: Set active on first load
this.$('a').removeClass('active');
$(element).addClass('active');
}
});
});

4
UI/Router.js
View File

@ -5,8 +5,9 @@ require(
'marionette', 'marionette',
'Controller', 'Controller',
'Series/SeriesCollection', 'Series/SeriesCollection',
'Navbar/NavbarView',
'jQuery/RouteBinder' 'jQuery/RouteBinder'
], function (App, Marionette, Controller, SeriesCollection, RouterBinder) { ], function (App, Marionette, Controller, SeriesCollection,NavbarView, RouterBinder) {
var Router = Marionette.AppRouter.extend({ var Router = Marionette.AppRouter.extend({
@ -39,6 +40,7 @@ require(
.done(function(){ .done(function(){
Backbone.history.start({ pushState: true }); Backbone.history.start({ pushState: true });
RouterBinder.bind(App.Router); RouterBinder.bind(App.Router);
App.navbarRegion.show(new NavbarView());
}) })
}); });

1
UI/app.js
View File

@ -188,6 +188,7 @@ define(
}); });
app.addRegions({ app.addRegions({
navbarRegion: '#nav-region',
mainRegion : '#main-region', mainRegion : '#main-region',
footerRegion: '#footer-region' footerRegion: '#footer-region'
}); });

82
UI/index.html
View File

@ -17,81 +17,29 @@
<link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/> <link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/>
<link href="/Content/overrides.css" rel='stylesheet' type='text/css'/> <link href="/Content/overrides.css" rel='stylesheet' type='text/css'/>
<link rel="apple-touch-icon" href="/Content/Images/touch/57.png" /> <link rel="apple-touch-icon" href="/Content/Images/touch/57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/Content/Images/touch/72.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/Content/Images/touch/72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/Content/Images/touch/114.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/Content/Images/touch/114.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/Content/Images/touch/144.png" /> <link rel="apple-touch-icon" sizes="144x144" href="/Content/Images/touch/144.png"/>
</head> </head>
<body> <body>
<div id="in-sub-nav"> <div id="nav-region"></div>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left logo">
<a href="/"><img src="/Content/Images/logo.png" alt="NzbDrone"></a>
</div>
<ul id="main-menu-region">
<li>
<a href="/">
<i class="icon-play"></i>
<br>
Series
</a>
</li>
<li>
<a href="/calendar">
<i class="icon-calendar"></i>
<br>
Calendar
</a>
</li>
<li>
<a href="history">
<i class="icon-time"></i>
<br>
History
</a>
</li>
<li>
<a href="missing">
<i class="icon-warning-sign"></i>
<br>
Missing
</a>
</li>
<li>
<a href="settings">
<i class="icon-cogs"></i>
<br>
Settings
</a>
</li>
<li>
<a href="system">
<i class="icon-laptop"></i>
<br>
System
</a>
</li>
<li>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KRTE52U3XJDSQ" target="_blank">
<i class="icon-heart"></i>
<br>
Donate
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page"> <div class="page">
<div class="page-container"> <div class="page-container">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="span12" id="notification-region"/> <div class="span12" id="notification-region"/>
</div> </div>
<div class="span12" id="main-region"></div> <div class="span12" id="main-region">
<div class="row">
<div id="followingBalls">
<div id="ball-1" class="ball"></div>
<div id="ball-2" class="ball"></div>
<div id="ball-3" class="ball"></div>
<div id="ball-4" class="ball"></div>
</div>
</div>
</div>
<div id="modal-region"></div> <div id="modal-region"></div>
</div> </div>
</div> </div>