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

added page loading animation while the app is loading.

This commit is contained in:
kay.one 2013-08-05 19:29:34 -07:00
parent 4ff068db0a
commit a2db70bb19
9 changed files with 181 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

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

5
UI/Calendar/calendar.less
View File

@ -111,7 +111,10 @@
}
}
.calendar, {
.calendar {
background-position : -160px -128px;
.primary {
border-color : @btnPrimaryBackground;
background-color : @btnPrimaryBackground;

10
UI/Content/Overrides/bootstrap.less vendored
View File

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

5
UI/Content/Overrides/browser.less
View File

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

127
UI/Content/base.less
View File

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

46
UI/Content/menu.less
View File

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

145
UI/Content/theme.less
View File

@ -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,25 +121,18 @@ 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);
.started #page {
.card(#aaaaaa);
width : 1210px;
min-width : 1210px;
margin : auto;

9
UI/Router.js
View File

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

4
UI/index.html
View File

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