mirror of
https://github.com/Sonarr/Sonarr.git
synced 2024-12-16 11:37:58 +02:00
added page loading animation while the app is loading.
This commit is contained in:
kay.one
parent
4ff068db0a
commit
a2db70bb19
@ -62,7 +62,7 @@ module.exports = function (grunt) {
|
||||
general : {
|
||||
expand :true,
|
||||
src : [
|
||||
'UI/Content/base.less',
|
||||
'UI/Content/theme.less',
|
||||
'UI/Content/overrides.less',
|
||||
'UI/Series/series.less',
|
||||
'UI/AddSeries/addSeries.less',
|
||||
|
||||
@ -28,11 +28,11 @@
|
||||
}
|
||||
|
||||
.fc-state-highlight {
|
||||
background: #f1f1f1;
|
||||
background : #f1f1f1;
|
||||
}
|
||||
|
||||
.past {
|
||||
opacity: 0.8;
|
||||
opacity : 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,14 +44,14 @@
|
||||
padding-top : 10px;
|
||||
|
||||
h4 {
|
||||
font-weight : 500;
|
||||
color : #008dcd;
|
||||
margin : 5px 0px;
|
||||
font-weight : 500;
|
||||
color : #008dcd;
|
||||
margin : 5px 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
color : #999999;
|
||||
margin: 0px;
|
||||
color : #999999;
|
||||
margin : 0px;
|
||||
}
|
||||
|
||||
.date {
|
||||
@ -63,10 +63,10 @@
|
||||
margin-right : 20px;
|
||||
|
||||
h4 {
|
||||
line-height : 1em;
|
||||
color : #555555;
|
||||
font-weight : 300;
|
||||
text-transform: uppercase;
|
||||
line-height : 1em;
|
||||
color : #555555;
|
||||
font-weight : 300;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -76,42 +76,45 @@
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color : @btnPrimaryBackground;
|
||||
border-color : @btnPrimaryBackground;
|
||||
}
|
||||
|
||||
.info {
|
||||
border-color : @btnInfoBackground;
|
||||
border-color : @btnInfoBackground;
|
||||
}
|
||||
|
||||
.inverse {
|
||||
border-color : @btnInverseBackground;
|
||||
border-color : @btnInverseBackground;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-color : @btnWarningBackground;
|
||||
border-color : @btnWarningBackground;
|
||||
}
|
||||
|
||||
.danger {
|
||||
border-color : @btnDangerBackground;
|
||||
border-color : @btnDangerBackground;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-color : @btnSuccessBackground;;
|
||||
border-color : @btnSuccessBackground;;
|
||||
}
|
||||
|
||||
.purple {
|
||||
border-color : #7932ea;
|
||||
border-color : #7932ea;
|
||||
}
|
||||
|
||||
.episode-title {
|
||||
.btn-link;
|
||||
color: @linkColor;
|
||||
margin-top: 1px;
|
||||
color : @linkColor;
|
||||
margin-top : 1px;
|
||||
.text-overflow;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar, {
|
||||
.calendar {
|
||||
|
||||
background-position : -160px -128px;
|
||||
|
||||
.primary {
|
||||
border-color : @btnPrimaryBackground;
|
||||
background-color : @btnPrimaryBackground;
|
||||
@ -146,4 +149,4 @@
|
||||
border-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 {
|
||||
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 {
|
||||
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 {
|
||||
background-color : #000000;
|
||||
.opacity(0.85);
|
||||
@ -44,6 +21,22 @@
|
||||
}
|
||||
|
||||
#nav-region {
|
||||
|
||||
margin-bottom : 80px;
|
||||
height : 120px;
|
||||
|
||||
.span12 {
|
||||
margin-left : 0px;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
margin-top : 25px;
|
||||
vertical-align : middle;
|
||||
height : 70px;
|
||||
width : 70px;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align : center;
|
||||
margin-bottom : 10px;
|
||||
@ -52,13 +45,18 @@
|
||||
list-style-type : none;
|
||||
display : inline-block;
|
||||
a {
|
||||
|
||||
&:focus {
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
display : block;
|
||||
border-radius : 6px;
|
||||
padding : 15px 10px 5px;
|
||||
min-height : 56px;
|
||||
min-width : 64px;
|
||||
margin : 20px 10px 10px;
|
||||
color : #ffffff;
|
||||
color : #b9b9b9;
|
||||
font-weight : 100;
|
||||
}
|
||||
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 {
|
||||
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 {
|
||||
font-size : 13px;
|
||||
font-weight : lighter;
|
||||
@ -47,30 +121,23 @@ footer {
|
||||
p {
|
||||
margin-bottom : 0px;
|
||||
}
|
||||
|
||||
#footer-region {
|
||||
.text-center();
|
||||
position : relative;
|
||||
width : 256px;
|
||||
margin : 50px auto 0px auto;
|
||||
display : block;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
text-transform : none;
|
||||
}
|
||||
|
||||
.message-sidebar a.active p, .message-sidebar a.active h5 {
|
||||
color : rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
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;
|
||||
.started #page {
|
||||
.card(#aaaaaa);
|
||||
width : 1210px;
|
||||
min-width : 1210px;
|
||||
margin : auto;
|
||||
margin-top : -70px;
|
||||
padding : 20px 0px;
|
||||
.header {
|
||||
padding-bottom : 10px;
|
||||
margin-bottom : 20px;
|
||||
|
||||
@ -6,8 +6,9 @@ require(
|
||||
'Controller',
|
||||
'Series/SeriesCollection',
|
||||
'Navbar/NavbarView',
|
||||
'jQuery/RouteBinder'
|
||||
], function (App, Marionette, Controller, SeriesCollection,NavbarView, RouterBinder) {
|
||||
'jQuery/RouteBinder',
|
||||
'jquery'
|
||||
], function (App, Marionette, Controller, SeriesCollection, NavbarView, RouterBinder, $) {
|
||||
|
||||
var Router = Marionette.AppRouter.extend({
|
||||
|
||||
@ -36,11 +37,11 @@ require(
|
||||
|
||||
App.Router = new Router();
|
||||
|
||||
SeriesCollection.fetch()
|
||||
.done(function(){
|
||||
SeriesCollection.fetch().done(function () {
|
||||
Backbone.history.start({ pushState: true });
|
||||
RouterBinder.bind(App.Router);
|
||||
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.future.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="/Series/series.css" rel='stylesheet' type='text/css'/>
|
||||
<link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
|
||||
@ -24,7 +24,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="nav-region"></div>
|
||||
<div class="page">
|
||||
<div id="page">
|
||||
<div class="page-container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user