mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-11 12:02:35 +02:00
added page loading animation while the app is loading.
This commit is contained in:
parent
4ff068db0a
commit
a2db70bb19
@ -62,7 +62,7 @@ module.exports = function (grunt) {
|
|||||||
general : {
|
general : {
|
||||||
expand :true,
|
expand :true,
|
||||||
src : [
|
src : [
|
||||||
'UI/Content/base.less',
|
'UI/Content/theme.less',
|
||||||
'UI/Content/overrides.less',
|
'UI/Content/overrides.less',
|
||||||
'UI/Series/series.less',
|
'UI/Series/series.less',
|
||||||
'UI/AddSeries/addSeries.less',
|
'UI/AddSeries/addSeries.less',
|
||||||
|
@ -28,11 +28,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fc-state-highlight {
|
.fc-state-highlight {
|
||||||
background: #f1f1f1;
|
background : #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.past {
|
.past {
|
||||||
opacity: 0.8;
|
opacity : 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,14 +44,14 @@
|
|||||||
padding-top : 10px;
|
padding-top : 10px;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-weight : 500;
|
font-weight : 500;
|
||||||
color : #008dcd;
|
color : #008dcd;
|
||||||
margin : 5px 0px;
|
margin : 5px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color : #999999;
|
color : #999999;
|
||||||
margin: 0px;
|
margin : 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
@ -63,10 +63,10 @@
|
|||||||
margin-right : 20px;
|
margin-right : 20px;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
line-height : 1em;
|
line-height : 1em;
|
||||||
color : #555555;
|
color : #555555;
|
||||||
font-weight : 300;
|
font-weight : 300;
|
||||||
text-transform: uppercase;
|
text-transform : uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@ -76,42 +76,45 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
border-color : @btnPrimaryBackground;
|
border-color : @btnPrimaryBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
border-color : @btnInfoBackground;
|
border-color : @btnInfoBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inverse {
|
.inverse {
|
||||||
border-color : @btnInverseBackground;
|
border-color : @btnInverseBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
border-color : @btnWarningBackground;
|
border-color : @btnWarningBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
border-color : @btnDangerBackground;
|
border-color : @btnDangerBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
border-color : @btnSuccessBackground;;
|
border-color : @btnSuccessBackground;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.purple {
|
.purple {
|
||||||
border-color : #7932ea;
|
border-color : #7932ea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.episode-title {
|
.episode-title {
|
||||||
.btn-link;
|
.btn-link;
|
||||||
color: @linkColor;
|
color : @linkColor;
|
||||||
margin-top: 1px;
|
margin-top : 1px;
|
||||||
.text-overflow;
|
.text-overflow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar, {
|
.calendar {
|
||||||
|
|
||||||
|
background-position : -160px -128px;
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
border-color : @btnPrimaryBackground;
|
border-color : @btnPrimaryBackground;
|
||||||
background-color : @btnPrimaryBackground;
|
background-color : @btnPrimaryBackground;
|
||||||
@ -146,4 +149,4 @@
|
|||||||
border-color : #7932ea;
|
border-color : #7932ea;
|
||||||
background-color : #7932ea;
|
background-color : #7932ea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
10
UI/Content/Overrides/bootstrap.less
vendored
10
UI/Content/Overrides/bootstrap.less
vendored
@ -31,3 +31,13 @@
|
|||||||
.slide-button {
|
.slide-button {
|
||||||
min-width : 0px;
|
min-width : 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popover-title {
|
||||||
|
text-transform : none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line &>[class^="icon-"], .line &>[class*=" icon-"] {
|
||||||
|
margin-top : 1em;
|
||||||
|
height : 1em;
|
||||||
|
line-height : 1em;
|
||||||
|
}
|
||||||
|
@ -10,3 +10,8 @@ button::-moz-focus-inner, a::-moz-focus-inner {
|
|||||||
a:focus {
|
a:focus {
|
||||||
outline : none;
|
outline : none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body h1, body h2, body h3, body h4, body h5, body h6 {
|
||||||
|
text-transform : capitalize;
|
||||||
|
font-weight : 300;
|
||||||
|
}
|
||||||
|
@ -1,127 +0,0 @@
|
|||||||
@import "Bootstrap/variables";
|
|
||||||
@import "Bootstrap/mixins";
|
|
||||||
@import "Bootstrap/type";
|
|
||||||
@import "font";
|
|
||||||
@import "form";
|
|
||||||
@import "theme";
|
|
||||||
@import "menu";
|
|
||||||
@import "Backgrid/backgrid";
|
|
||||||
@import "../Shared/Styles/clickable";
|
|
||||||
@import "prefixer";
|
|
||||||
@import "icons";
|
|
||||||
@import "spinner";
|
|
||||||
@import "legend";
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
width : 125px;
|
|
||||||
position : relative;
|
|
||||||
margin-bottom : 2px;
|
|
||||||
|
|
||||||
.progressbar-back-text, .progressbar-front-text {
|
|
||||||
font-size : 11.844px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align : center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progressbar-back-text {
|
|
||||||
position : absolute;
|
|
||||||
width : 100%;
|
|
||||||
height : 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progressbar-front-text {
|
|
||||||
display : block;
|
|
||||||
width : 125px;
|
|
||||||
}
|
|
||||||
.bar {
|
|
||||||
position : absolute;
|
|
||||||
overflow : hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdrop .page {
|
|
||||||
background-color : transparent;
|
|
||||||
box-shadow : none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line &>[class^="icon-"], .line &>[class*=" icon-"] {
|
|
||||||
margin-top : 1em;
|
|
||||||
height : 1em;
|
|
||||||
line-height : 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#localSeriesLookup {
|
|
||||||
width : 220px;
|
|
||||||
border : 0px;
|
|
||||||
background : rgb(75, 75, 75);
|
|
||||||
color : rgb(169, 169, 169);
|
|
||||||
padding : 4px;
|
|
||||||
font-size : 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nz-loading {
|
|
||||||
.text-center;
|
|
||||||
font-size : 40px;
|
|
||||||
font-weight : 300;
|
|
||||||
padding : 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-toolbar {
|
|
||||||
margin-top : 10px;
|
|
||||||
margin-bottom : 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
min-height : 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroll-up {
|
|
||||||
.clickable;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration : none;
|
|
||||||
.opacity (0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.opacity (0.2);
|
|
||||||
position : fixed;
|
|
||||||
bottom : 50px;
|
|
||||||
right : 50px;
|
|
||||||
display : none;
|
|
||||||
font-size : 56px;
|
|
||||||
color : white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-large {
|
|
||||||
padding : 4px 6px;
|
|
||||||
font-size : 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
&.sortable {
|
|
||||||
&:hover {
|
|
||||||
background : @tableBackgroundHover;
|
|
||||||
}
|
|
||||||
.clickable();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer-region {
|
|
||||||
.text-center();
|
|
||||||
position : relative;
|
|
||||||
width : 256px;
|
|
||||||
margin : 50px auto 0px auto;
|
|
||||||
display : block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, .btn {
|
|
||||||
i {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-white {
|
|
||||||
color: black;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
@ -10,29 +10,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-region li a {
|
|
||||||
color : #b9b9b9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-region li a:focus {
|
|
||||||
text-decoration : none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-region {
|
|
||||||
margin-bottom : 80px;
|
|
||||||
|
|
||||||
.span12 {
|
|
||||||
margin-left : 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin-top : 25px;
|
|
||||||
vertical-align : middle;
|
|
||||||
height : 70px;
|
|
||||||
width : 70px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdrop #nav-region {
|
.backdrop #nav-region {
|
||||||
background-color : #000000;
|
background-color : #000000;
|
||||||
.opacity(0.85);
|
.opacity(0.85);
|
||||||
@ -44,6 +21,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#nav-region {
|
#nav-region {
|
||||||
|
|
||||||
|
margin-bottom : 80px;
|
||||||
|
height : 120px;
|
||||||
|
|
||||||
|
.span12 {
|
||||||
|
margin-left : 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-top : 25px;
|
||||||
|
vertical-align : middle;
|
||||||
|
height : 70px;
|
||||||
|
width : 70px;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
text-align : center;
|
text-align : center;
|
||||||
margin-bottom : 10px;
|
margin-bottom : 10px;
|
||||||
@ -52,13 +45,18 @@
|
|||||||
list-style-type : none;
|
list-style-type : none;
|
||||||
display : inline-block;
|
display : inline-block;
|
||||||
a {
|
a {
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
text-decoration : none;
|
||||||
|
}
|
||||||
|
|
||||||
display : block;
|
display : block;
|
||||||
border-radius : 6px;
|
border-radius : 6px;
|
||||||
padding : 15px 10px 5px;
|
padding : 15px 10px 5px;
|
||||||
min-height : 56px;
|
min-height : 56px;
|
||||||
min-width : 64px;
|
min-width : 64px;
|
||||||
margin : 20px 10px 10px;
|
margin : 20px 10px 10px;
|
||||||
color : #ffffff;
|
color : #b9b9b9;
|
||||||
font-weight : 100;
|
font-weight : 100;
|
||||||
}
|
}
|
||||||
span.label.pull-right {
|
span.label.pull-right {
|
||||||
|
@ -1,4 +1,99 @@
|
|||||||
@import "../Shared/Styles/card";
|
@import "Bootstrap/variables";
|
||||||
|
@import "Bootstrap/mixins";
|
||||||
|
@import "Bootstrap/type";
|
||||||
|
@import "font";
|
||||||
|
@import "form";
|
||||||
|
@import "menu";
|
||||||
|
@import "Backgrid/backgrid";
|
||||||
|
@import "prefixer";
|
||||||
|
@import "icons";
|
||||||
|
@import "spinner";
|
||||||
|
@import "legend";
|
||||||
|
@import "../Shared/Styles/clickable";
|
||||||
|
@import "../Shared/Styles/card";
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
width : 125px;
|
||||||
|
position : relative;
|
||||||
|
margin-bottom : 2px;
|
||||||
|
|
||||||
|
.progressbar-back-text, .progressbar-front-text {
|
||||||
|
font-size : 11.844px;
|
||||||
|
font-weight : bold;
|
||||||
|
text-align : center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressbar-back-text {
|
||||||
|
position : absolute;
|
||||||
|
width : 100%;
|
||||||
|
height : 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressbar-front-text {
|
||||||
|
display : block;
|
||||||
|
width : 125px;
|
||||||
|
}
|
||||||
|
.bar {
|
||||||
|
position : absolute;
|
||||||
|
overflow : hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop #page {
|
||||||
|
background-color : transparent;
|
||||||
|
box-shadow : none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-toolbar {
|
||||||
|
margin-top : 10px;
|
||||||
|
margin-bottom : 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-up {
|
||||||
|
.clickable;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration : none;
|
||||||
|
.opacity (0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.opacity (0.2);
|
||||||
|
position : fixed;
|
||||||
|
bottom : 50px;
|
||||||
|
right : 50px;
|
||||||
|
display : none;
|
||||||
|
font-size : 56px;
|
||||||
|
color : white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-large {
|
||||||
|
padding : 4px 6px;
|
||||||
|
font-size : 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
&.sortable {
|
||||||
|
&:hover {
|
||||||
|
background : @tableBackgroundHover;
|
||||||
|
}
|
||||||
|
.clickable();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
a, .btn {
|
||||||
|
i {
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-white {
|
||||||
|
color : black;
|
||||||
|
background-color : white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color : #1c1c1c;
|
background-color : #1c1c1c;
|
||||||
@ -9,27 +104,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.calendar {
|
|
||||||
background-position : -160px -128px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel .primary, .panel .primary h6 {
|
|
||||||
background-color : #007ccd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel .info, .panel .info h6 {
|
|
||||||
background-color : #14b8d4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-sidebar a.message-preview p, .message-sidebar a.message-preview h5 {
|
|
||||||
color : #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.stat-list li label, ul.stat-list li h4, ul.stat-list li small, ul.stat-list li p {
|
|
||||||
display : inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size : 13px;
|
font-size : 13px;
|
||||||
font-weight : lighter;
|
font-weight : lighter;
|
||||||
@ -47,30 +121,23 @@ footer {
|
|||||||
p {
|
p {
|
||||||
margin-bottom : 0px;
|
margin-bottom : 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#footer-region {
|
||||||
|
.text-center();
|
||||||
|
position : relative;
|
||||||
|
width : 256px;
|
||||||
|
margin : 50px auto 0px auto;
|
||||||
|
display : block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-title {
|
.started #page {
|
||||||
text-transform : none;
|
.card(#aaaaaa);
|
||||||
}
|
width : 1210px;
|
||||||
|
min-width : 1210px;
|
||||||
.message-sidebar a.active p, .message-sidebar a.active h5 {
|
margin : auto;
|
||||||
color : rgba(255, 255, 255, 0.8);
|
margin-top : -70px;
|
||||||
}
|
padding : 20px 0px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body h1, body h2, body h3, body h4, body h5, body h6 {
|
|
||||||
text-transform : capitalize;
|
|
||||||
font-weight : 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
.card(#AAAAAA);
|
|
||||||
width : 1210px;
|
|
||||||
min-width : 1210px;
|
|
||||||
margin : auto;
|
|
||||||
margin-top : -70px;
|
|
||||||
padding : 20px 0px;
|
|
||||||
.header {
|
.header {
|
||||||
padding-bottom : 10px;
|
padding-bottom : 10px;
|
||||||
margin-bottom : 20px;
|
margin-bottom : 20px;
|
||||||
|
@ -6,8 +6,9 @@ require(
|
|||||||
'Controller',
|
'Controller',
|
||||||
'Series/SeriesCollection',
|
'Series/SeriesCollection',
|
||||||
'Navbar/NavbarView',
|
'Navbar/NavbarView',
|
||||||
'jQuery/RouteBinder'
|
'jQuery/RouteBinder',
|
||||||
], function (App, Marionette, Controller, SeriesCollection,NavbarView, RouterBinder) {
|
'jquery'
|
||||||
|
], function (App, Marionette, Controller, SeriesCollection, NavbarView, RouterBinder, $) {
|
||||||
|
|
||||||
var Router = Marionette.AppRouter.extend({
|
var Router = Marionette.AppRouter.extend({
|
||||||
|
|
||||||
@ -36,11 +37,11 @@ require(
|
|||||||
|
|
||||||
App.Router = new Router();
|
App.Router = new Router();
|
||||||
|
|
||||||
SeriesCollection.fetch()
|
SeriesCollection.fetch().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());
|
App.navbarRegion.show(new NavbarView());
|
||||||
|
$('body').addClass('started');
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
<link href="/Content/Messenger/messenger.css" rel='stylesheet' type='text/css'/>
|
<link href="/Content/Messenger/messenger.css" rel='stylesheet' type='text/css'/>
|
||||||
<link href="/Content/Messenger/messenger.future.css" rel='stylesheet' type='text/css'/>
|
<link href="/Content/Messenger/messenger.future.css" rel='stylesheet' type='text/css'/>
|
||||||
<link href="/Content/fullcalendar.css" rel='stylesheet' type='text/css'>
|
<link href="/Content/fullcalendar.css" rel='stylesheet' type='text/css'>
|
||||||
<link href="/Content/base.css" rel='stylesheet' type='text/css'/>
|
<link href="/Content/theme.css" rel='stylesheet' type='text/css'/>
|
||||||
<link href="/Cells/cells.css" rel='stylesheet' type='text/css'>
|
<link href="/Cells/cells.css" rel='stylesheet' type='text/css'>
|
||||||
<link href="/Series/series.css" rel='stylesheet' type='text/css'/>
|
<link href="/Series/series.css" rel='stylesheet' type='text/css'/>
|
||||||
<link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
|
<link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
|
||||||
@ -24,7 +24,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="nav-region"></div>
|
<div id="nav-region"></div>
|
||||||
<div class="page">
|
<div id="page">
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
Loading…
Reference in New Issue
Block a user