mirror of
https://github.com/Radarr/Radarr.git
synced 2024-11-04 10:02:40 +01:00
show a basic spinner while the app is loading all the js files/series list.
This commit is contained in:
Keivan Beigi
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();
|
||||
|
||||
});
|
||||
62
UI/Navbar/NavbarTemplate.html
Normal file
62
UI/Navbar/NavbarTemplate.html
Normal 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
41
UI/Navbar/NavbarView.js
Normal 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');
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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…
Reference in New Issue
Block a user