dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Loader styling

pull/5180/head
Ruud 10 years ago
parent
ae11135486
commit
5ab933bf77
12 changed files with 184 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      couchpotato/core/media/movie/_base/static/details.js
  2. 7
      couchpotato/core/media/movie/_base/static/list.js
  3. 17
      couchpotato/core/media/movie/_base/static/movie.js
  4. 41
      couchpotato/core/media/movie/_base/static/movie.scss
  5. 8
      couchpotato/static/fonts/config.json
  6. BIN
      couchpotato/static/fonts/icons.eot
  7. 3
      couchpotato/static/fonts/icons.svg
  8. BIN
      couchpotato/static/fonts/icons.ttf
  9. BIN
      couchpotato/static/fonts/icons.woff
  10. 35
      couchpotato/static/scripts/library/question.js
  11. 12
      couchpotato/static/style/_fonts.scss
  12. 81
      couchpotato/static/style/main.scss

9
couchpotato/core/media/movie/_base/static/details.js
View File

@ -93,7 +93,14 @@ var MovieDetails = new Class({
close: function(){
var self = this;
self.el.dispose();
var ended = function() {
self.el.dispose();
self.el.removeEventListener('transitionend', ended);
}
self.el.addEventListener('transitionend', ended, false);
// animate out
self.el.removeClass('show');
}
});

7
couchpotato/core/media/movie/_base/static/list.js
View File

@ -549,7 +549,7 @@ var MovieList = new Class({
lfc.addClass('show');
}, 10);
self.el.setStyle('min-height', 93);
self.el.setStyle('min-height', 120);
}
@ -567,10 +567,11 @@ var MovieList = new Class({
if(self.loader_first){
var lf = self.loader_first;
self.loader_first = null;
//lf.addClass('hide');
lf.removeClass('show');
setTimeout(function(){
lf.destroy();
}, 3000);
}, 1000);
self.el.setStyle('min-height', null);
}

17
couchpotato/core/media/movie/_base/static/movie.js
View File

@ -2,12 +2,13 @@ var Movie = new Class({
Extends: BlockBase,
actions: [],
actions: null,
details: null,
initialize: function(list, options, data){
var self = this;
self.actions = [];
self.data = data;
self.list = list;
@ -37,10 +38,10 @@ var Movie = new Class({
self.addEvents();
if(data.identifiers.imdb == 'tt3181822'){
self.el.fireEvent('mouseenter');
self.openDetails();
}
//if(data.identifiers.imdb == 'tt3181822'){
// self.el.fireEvent('mouseenter');
// self.openDetails();
//}
},
openDetails: function(){
@ -66,6 +67,11 @@ var Movie = new Class({
});
}
// animate in
setTimeout(function(){
$(self.details).addClass('show');
}, 10);
App.getPageContainer().grab(self.details);
},
@ -176,6 +182,7 @@ var Movie = new Class({
update: function(notification){
var self = this;
self.actions = [];
self.data = notification.data;
self.el.empty();

41
couchpotato/core/media/movie/_base/static/movie.scss
View File

@ -61,6 +61,18 @@
display: none;
}
}
> .loading {
background: #FFF;
.message {
color: #000;
}
.spinner {
background-color: #000;
}
}
}
.list_list {
@ -294,6 +306,7 @@
.mask {
bottom: 44px;
border-radius: $border_radius;
transition: opacity 30ms;
}
}
@ -312,6 +325,7 @@
.page.movie_details {
pointer-events: none;
$gab-width: $header_width/3;
@include media-phablet {
@ -326,6 +340,8 @@
left: $header_width;
background: rgba(0,0,0,.6);
border-radius: 3px 0 0 3px;
opacity: 0;
transition: opacity 800ms;
@include media-phablet {
left: 0;
@ -339,6 +355,9 @@
color: #FFF;
width: $gab-width;
height: 100%;
opacity: 0;
transform: translateX(100%);
transition: opacity 300ms, transform 300ms $cubic;
@include media-phablet {
width: $header_width_mobile;
@ -355,6 +374,8 @@
background: $background_color;
border-radius: 3px 0 0 3px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 250ms $cubic;
@include media-phablet {
left: $header_width_mobile;
@ -512,6 +533,24 @@
}
}
&.show {
pointer-events: auto;
.overlay {
opacity: 1;
.close {
opacity: 1;
transition-delay: 300ms;
transform: translateX(0);
}
}
.content {
transform: translateX(0);
}
}
.releases {
.buttons {
@ -719,7 +758,6 @@
.background {
filter: blur(0);
opacity: 1;
}
.icon-play {
@ -862,6 +900,7 @@
top: $header_height - 10px;
padding-top: 4px;
border-radius: $border_radius $border_radius 0 0;
min-width: 140px;
&:before {
top: 0;

8
couchpotato/static/fonts/config.json
View File

@ -91,6 +91,12 @@
"src": "fontawesome"
},
{
"uid": "94103e1b3f1e8cf514178ec5912b4469",
"css": "dropdown",
"code": 59409,
"src": "fontawesome"
},
{
"uid": "c311c48d79488965b0fab7f9cd12b6b5",
"css": "left-arrow",
"code": 59392,
@ -99,7 +105,7 @@
{
"uid": "cb13afd4722a849d48056540bb74c47e",
"css": "play",
"code": 59409,
"code": 59410,
"src": "entypo"
},
{

BIN
couchpotato/static/fonts/icons.eot
View File

Binary file not shown.

3
couchpotato/static/fonts/icons.svg
View File

@ -23,7 +23,8 @@
<glyph glyph-name="cancel" unicode="&#xe80e;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
<glyph glyph-name="redo" unicode="&#xe80f;" d="m857 707v-250q0-14-10-25t-26-11h-250q-23 0-32 23-10 22 7 38l77 77q-82 77-194 77-58 0-111-23t-91-61-62-91-22-111 22-111 62-91 91-61 111-23q66 0 125 29t100 82q4 6 13 7 8 0 14-5l76-77q5-4 6-11t-5-13q-60-74-147-114t-182-41q-87 0-167 34t-136 92-92 137-34 166 34 166 92 137 136 92 167 34q82 0 158-31t137-88l72 72q16 18 39 8 22-9 22-33z" horiz-adv-x="857.1" />
<glyph glyph-name="ok" unicode="&#xe810;" d="m932 534q0-22-15-38l-404-404-76-76q-16-15-38-15t-38 15l-76 76-202 202q-15 16-15 38t15 38l76 76q16 16 38 16t38-16l164-165 366 367q16 16 38 16t38-16l76-76q15-16 15-38z" horiz-adv-x="1000" />
<glyph glyph-name="play" unicode="&#xe811;" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
<glyph glyph-name="sort-down" unicode="&#xe811;" d="m571 243q0-15-10-25l-250-250q-11-11-25-11t-25 11l-250 250q-11 10-11 25t11 25 25 11h500q14 0 25-11t10-25z" horiz-adv-x="571.4" />
<glyph glyph-name="play" unicode="&#xe812;" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
couchpotato/static/fonts/icons.ttf
View File

Binary file not shown.

BIN
couchpotato/static/fonts/icons.woff
View File

Binary file not shown.

35
couchpotato/static/scripts/library/question.js
View File

@ -17,14 +17,20 @@ var Question = new Class( {
createQuestion : function() {
var self = this;
self.container = new Element('div.mask.question').adopt(
new Element('h3', {
'html': this.question
}),
new Element('div.hint', {
'html': this.hint
})
).fade('hide').inject(document.body).fade('in');
self.container = new Element('div.mask.question')
.grab(self.inner = new Element('div.inner').adopt(
new Element('h3', {
'html': this.question
}),
new Element('div.hint', {
'html': this.hint
})
)
).inject(document.body);
setTimeout(function(){
self.container.addClass('show');
}, 10);
},
@ -33,7 +39,7 @@ var Question = new Class( {
var answer = new Element('a', Object.merge(options, {
'class' : 'answer button '+(options['class'] || '')+(options.cancel ? ' cancel' : '')
})).inject(this.container);
})).inject(this.inner);
if (options.cancel) {
answer.addEvent('click', self.close.bind(self));
@ -54,8 +60,15 @@ var Question = new Class( {
close : function() {
var self = this;
self.container.fade('out');
(function(){self.container.destroy();}).delay(1000);
var ended = function() {
self.container.dispose();
self.container.removeEventListener('transitionend', ended);
}
self.container.addEventListener('transitionend', ended, false);
// animate out
self.container.removeClass('show');
},
toElement : function() {

12
couchpotato/static/style/_fonts.scss
View File

@ -1,11 +1,11 @@
/* Fonts */
@font-face {
font-family: 'icons';
src: url('../fonts/icons.eot?74719540');
src: url('../fonts/icons.eot?74719540#iefix') format('embedded-opentype'),
url('../fonts/icons.woff?74719540') format('woff'),
url('../fonts/icons.ttf?74719540') format('truetype'),
url('../fonts/icons.svg?74719540#icons') format('svg');
src: url('../fonts/icons.eot?74719541');
src: url('../fonts/icons.eot?74719541#iefix') format('embedded-opentype'),
url('../fonts/icons.woff?74719541') format('woff'),
url('../fonts/icons.ttf?74719541') format('truetype'),
url('../fonts/icons.svg?74719541#icons') format('svg');
font-weight: normal;
font-style: normal;
}
@ -37,7 +37,7 @@
.icon-redo:before { content: '\e80f'; }
.icon-ok:before { content: '\e810'; }
.icon-dropdown:before { content: '\e811'; }
.icon-play:before { content: '\e811'; }
.icon-play:before { content: '\e812'; }
@font-face {
font-family: 'OpenSans';

81
couchpotato/static/style/main.scss
View File

@ -46,6 +46,7 @@ input, textarea, select {
border: 1px solid $primary_color;
border-radius: $border_radius;
margin: 0 $padding/4;
transition: all 150ms;
&:hover {
background: $primary_color;
@ -58,10 +59,12 @@ input, textarea, select {
width: $header_width;
min-width: $header_width;
position: relative;
z-index: 100;
@include media-phablet {
width: $header_width_mobile;
min-width: $header_width_mobile;
z-index: 1;
}
a {
@ -76,6 +79,7 @@ input, textarea, select {
display: block;
text-align: center;
position: relative;
overflow: hidden;
font-family: Lobster, serif;
color: #FFF;
@ -177,6 +181,21 @@ input, textarea, select {
top: -2px;
}
.badge {
position: absolute;
color: #FFF;
top: 5px;
right: 0;
background: $primary_color;
border-radius: 50%;
width: 18px;
height: 18px;
line-height: 16px;
text-align: center;
font-size: 10px;
font-weight: lighter;
}
.wrapper {
width: 320px;
@ -210,6 +229,17 @@ input, textarea, select {
text-align: center;
opacity: .4;
}
li {
padding: $padding;
.added {
font-weight: lighter;
font-size: 11px;
display: block;
text-align: right;
}
}
}
}
@ -513,6 +543,43 @@ input, textarea, select {
}
}
/* Question */
.question {
position: fixed;
z-index: 20000;
color: #FFF;
padding: $padding;
display: flex;
align-items: center;
justify-content: center;
&.show {
opacity: 1;
}
.inner {
width: 100%;
max-width: 500px;
}
h3 {
display: block;
margin-bottom: 20px;
font-size: 1.4em;
font-weight: lighter;
}
a {
border-color: #FFF;
color: #FFF;
&:hover {
background: #FFF;
color: $primary_color;
}
}
}
/* Mask */
.mask{
background: rgba(0,0,0, .8);
@ -525,9 +592,22 @@ input, textarea, select {
left: 0;
opacity: 0;
transition: opacity 1000ms;
pointer-events: none;
$spinner_size: 22px;
.message {
color: #FFF;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 320px;
margin: -($spinner_size*2 + 5px) 0 0 -160px;
font-size: 16px;
opacity: .5;
}
.spinner {
position: absolute;
top: 50%;
@ -544,6 +624,7 @@ input, textarea, select {
}
&.show {
pointer-events: auto;
opacity: 1;
.spinner {

Write Preview
Loading…
Cancel
Save