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

pull/4/head
Keivan Beigi 12 years ago committed by kay.one
parent 39f0ed9d21
commit 376b386b31

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

@ -10,15 +10,15 @@
}
}
#in-sub-nav li a {
#nav-region li a {
color : #b9b9b9;
}
#in-sub-nav li a:focus {
#nav-region li a:focus {
text-decoration : none;
}
#in-sub-nav {
#nav-region {
margin-bottom : 80px;
.span12 {
@ -33,7 +33,38 @@
}
}
.backdrop #in-sub-nav {
.backdrop #nav-region {
background-color : #000000;
.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;
}
}
}

@ -57,10 +57,7 @@ footer {
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 {
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;
}
}
}

@ -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();
});

@ -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>

@ -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');
}
});
});

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

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

@ -17,81 +17,29 @@
<link href="/Calendar/calendar.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" 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="144x144" href="/Content/Images/touch/144.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="114x114" href="/Content/Images/touch/114.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/Content/Images/touch/144.png"/>
</head>
<body>
<div id="in-sub-nav">
<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 id="nav-region"></div>
<div class="page">
<div class="page-container">
<div class="container">
<div class="row">
<div class="span12" id="notification-region"/>
</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>
</div>

Loading…
Cancel
Save