Initial mobile styling
This commit is contained in:
Ruud
@@ -5,7 +5,7 @@
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
position: fixed;
|
||||
width: 960px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background: #4E5969;
|
||||
}
|
||||
@@ -24,7 +24,17 @@
|
||||
.page.log .nav li.active {
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
font-size: 30px;
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.page.log .nav {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.page.log .nav li {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.page.log .loading {
|
||||
|
||||
@@ -43,7 +43,10 @@ var MovieList = new Class({
|
||||
}) : null
|
||||
);
|
||||
|
||||
self.changeView(self.getSavedView() || self.options.view || 'details');
|
||||
if($(window).getSize().x < 480)
|
||||
self.changeView('list');
|
||||
else
|
||||
self.changeView(self.getSavedView() || self.options.view || 'details');
|
||||
|
||||
self.getMovies();
|
||||
|
||||
@@ -121,7 +124,7 @@ var MovieList = new Class({
|
||||
|
||||
if(!self.navigation_counter) return;
|
||||
|
||||
self.navigation_counter.set('text', (count || 0));
|
||||
self.navigation_counter.set('text', (count || 0) + ' movies');
|
||||
|
||||
},
|
||||
|
||||
@@ -146,64 +149,67 @@ var MovieList = new Class({
|
||||
var chars = '#ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
|
||||
self.current_view = self.getSavedView() || 'details';
|
||||
self.el.addClass(self.current_view+'_list')
|
||||
self.el.addClass(self.current_view+'_list with_navigation')
|
||||
|
||||
self.navigation = new Element('div.alph_nav').adopt(
|
||||
self.navigation_actions = new Element('ul.inlay.actions.reversed'),
|
||||
self.navigation_counter = new Element('span.counter[title=Total]'),
|
||||
self.navigation_alpha = new Element('ul.numbers', {
|
||||
'events': {
|
||||
'click:relay(li)': function(e, el){
|
||||
self.movie_list.empty()
|
||||
self.activateLetter(el.get('data-letter'))
|
||||
self.getMovies()
|
||||
self.navigation = new Element('div.alph_nav').grab(
|
||||
new Element('div').adopt(
|
||||
self.navigation_alpha = new Element('ul.numbers', {
|
||||
'events': {
|
||||
'click:relay(li)': function(e, el){
|
||||
self.movie_list.empty()
|
||||
self.activateLetter(el.get('data-letter'))
|
||||
self.getMovies()
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
self.navigation_search_input = new Element('input.inlay', {
|
||||
'placeholder': 'Search',
|
||||
'events': {
|
||||
'keyup': self.search.bind(self),
|
||||
'change': self.search.bind(self)
|
||||
}
|
||||
}),
|
||||
self.navigation_menu = new Block.Menu(self),
|
||||
self.mass_edit_form = new Element('div.mass_edit_form').adopt(
|
||||
new Element('span.select').adopt(
|
||||
self.mass_edit_select = new Element('input[type=checkbox].inlay', {
|
||||
'events': {
|
||||
'change': self.massEditToggleAll.bind(self)
|
||||
}
|
||||
}),
|
||||
self.mass_edit_selected = new Element('span.count', {'text': 0}),
|
||||
self.mass_edit_selected_label = new Element('span', {'text': 'selected'})
|
||||
),
|
||||
new Element('div.quality').adopt(
|
||||
self.mass_edit_quality = new Element('select'),
|
||||
new Element('a.button.orange', {
|
||||
'text': 'Change quality',
|
||||
'events': {
|
||||
'click': self.changeQualitySelected.bind(self)
|
||||
}
|
||||
})
|
||||
),
|
||||
new Element('div.delete').adopt(
|
||||
new Element('span[text=or]'),
|
||||
new Element('a.button.red', {
|
||||
'text': 'Delete',
|
||||
'events': {
|
||||
'click': self.deleteSelected.bind(self)
|
||||
}
|
||||
})
|
||||
),
|
||||
new Element('div.refresh').adopt(
|
||||
new Element('span[text=or]'),
|
||||
new Element('a.button.green', {
|
||||
'text': 'Refresh',
|
||||
'events': {
|
||||
'click': self.refreshSelected.bind(self)
|
||||
}
|
||||
})
|
||||
}),
|
||||
self.navigation_counter = new Element('span.counter[title=Total]'),
|
||||
self.navigation_actions = new Element('ul.inlay.actions.reversed'),
|
||||
self.navigation_search_input = new Element('input.search.inlay', {
|
||||
'title': 'Search through ' + self.options.identifier,
|
||||
'placeholder': 'Search through ' + self.options.identifier,
|
||||
'events': {
|
||||
'keyup': self.search.bind(self),
|
||||
'change': self.search.bind(self)
|
||||
}
|
||||
}),
|
||||
self.navigation_menu = new Block.Menu(self),
|
||||
self.mass_edit_form = new Element('div.mass_edit_form').adopt(
|
||||
new Element('span.select').adopt(
|
||||
self.mass_edit_select = new Element('input[type=checkbox].inlay', {
|
||||
'events': {
|
||||
'change': self.massEditToggleAll.bind(self)
|
||||
}
|
||||
}),
|
||||
self.mass_edit_selected = new Element('span.count', {'text': 0}),
|
||||
self.mass_edit_selected_label = new Element('span', {'text': 'selected'})
|
||||
),
|
||||
new Element('div.quality').adopt(
|
||||
self.mass_edit_quality = new Element('select'),
|
||||
new Element('a.button.orange', {
|
||||
'text': 'Change quality',
|
||||
'events': {
|
||||
'click': self.changeQualitySelected.bind(self)
|
||||
}
|
||||
})
|
||||
),
|
||||
new Element('div.delete').adopt(
|
||||
new Element('span[text=or]'),
|
||||
new Element('a.button.red', {
|
||||
'text': 'Delete',
|
||||
'events': {
|
||||
'click': self.deleteSelected.bind(self)
|
||||
}
|
||||
})
|
||||
),
|
||||
new Element('div.refresh').adopt(
|
||||
new Element('span[text=or]'),
|
||||
new Element('a.button.green', {
|
||||
'text': 'Refresh',
|
||||
'events': {
|
||||
'click': self.refreshSelected.bind(self)
|
||||
}
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
).inject(self.el, 'top');
|
||||
@@ -543,7 +549,7 @@ var MovieList = new Class({
|
||||
self.title[is_empty ? 'hide' : 'show']()
|
||||
|
||||
if(self.description)
|
||||
self.description[is_empty ? 'hide' : 'show']()
|
||||
self.description.setStyle('display', [is_empty ? 'none' : ''])
|
||||
|
||||
if(is_empty && self.options.on_empty_element){
|
||||
self.options.on_empty_element.inject(self.loader_first || self.title || self.movie_list, 'after');
|
||||
|
||||
@@ -1,50 +1,72 @@
|
||||
.movies {
|
||||
padding: 60px 0 20px;
|
||||
padding: 10px 0 20px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.movies .loading {
|
||||
display: block;
|
||||
padding: 20px 0 0 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
.movies > div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.movies.thumbs_list > div:not(.description) {
|
||||
margin-right: -4px;
|
||||
text-align: center;
|
||||
}
|
||||
.movies .loading.hide {
|
||||
height: 0;
|
||||
|
||||
.movies .loading {
|
||||
display: block;
|
||||
padding: 20px 0 0 0;
|
||||
opacity: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.movies .loading .spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.movies .loading .message {
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
.movies .loading.hide {
|
||||
height: 0;
|
||||
padding: 20px 0 0 0;
|
||||
opacity: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.movies .loading .spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.movies .loading .message {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.movies > h2 {
|
||||
.movies h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.movies h2 {
|
||||
font-size: 25px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.movies > .description {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
font-style: italic;
|
||||
text-shadow: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.movies:hover > .description {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media all and (max-width: 860px) {
|
||||
.movies > .description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.movies.thumbs_list {
|
||||
padding: 20px 0 20px;
|
||||
@@ -53,21 +75,21 @@
|
||||
.home .movies {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
|
||||
.movies.mass_edit_list {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.movies .movie {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
transition: all 0.6s cubic-bezier(0.9,0,0.1,1);
|
||||
}
|
||||
|
||||
.movies.details_list .movie {
|
||||
padding-left: 120px;
|
||||
}
|
||||
|
||||
.movies.list_list .movie:not(.details_view),
|
||||
.movies.mass_edit_list .movie {
|
||||
@@ -75,13 +97,22 @@
|
||||
}
|
||||
|
||||
.movies.thumbs_list .movie {
|
||||
width: 153px;
|
||||
width: 151px;
|
||||
height: 230px;
|
||||
display: inline-block;
|
||||
margin: 0 8px 0 0;
|
||||
margin: 0 8px 8px 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.movies.thumbs_list .movie:nth-child(6n+6) {
|
||||
margin: 0;
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.movies.thumbs_list .movie {
|
||||
width: 90px;
|
||||
height: 137px;
|
||||
display: inline-block;
|
||||
margin: 0 8px 8px 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.movies .movie .mask {
|
||||
@@ -109,8 +140,8 @@
|
||||
.movies .data {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
width: 840px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
right: 0;
|
||||
border-radius: 0;
|
||||
transition: all .6s cubic-bezier(0.9,0,0.1,1);
|
||||
@@ -119,7 +150,6 @@
|
||||
.movies.mass_edit_list .movie .data {
|
||||
height: 30px;
|
||||
padding: 3px 0 3px 10px;
|
||||
width: 938px;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
background: #4e5969;
|
||||
@@ -197,27 +227,36 @@
|
||||
.movies .info {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.movies .info .title {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 2px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
padding-right: 80px;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.movies .info .title span {
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
top: -5px;
|
||||
position: relative;
|
||||
}
|
||||
.movies.list_list .movie:not(.details_view) .info .title,
|
||||
.movies.mass_edit_list .info .title {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-overflow: ellipsis;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.movies.thumbs_list .movie:not(.no_thumbnail) .info {
|
||||
@@ -229,25 +268,22 @@
|
||||
|
||||
.movies.thumbs_list .info .title {
|
||||
font-size: 21px;
|
||||
text-shadow: 0 0 10px #000;
|
||||
word-wrap: break-word;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.movies .info .year {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
color: #bbb;
|
||||
width: 10%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
top: 1px;
|
||||
text-align: right;
|
||||
transition: all 0.2s linear;
|
||||
font-weight: normal;
|
||||
}
|
||||
.movies.list_list .movie:not(.details_view) .info .year,
|
||||
.movies.mass_edit_list .info .year {
|
||||
font-size: 16px;
|
||||
width: 6%;
|
||||
font-size: 1.25em;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@@ -259,16 +295,14 @@
|
||||
top: auto;
|
||||
right: auto;
|
||||
color: #FFF;
|
||||
text-shadow: none;
|
||||
text-shadow: 0 0 6px #000;
|
||||
}
|
||||
|
||||
.movies .info .description {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
clear: both;
|
||||
height: 80px;
|
||||
bottom: 30px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.movies .data:hover .description {
|
||||
overflow: auto;
|
||||
@@ -281,12 +315,17 @@
|
||||
|
||||
.movies .data .quality {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: 2px;
|
||||
display: block;
|
||||
min-height: 20px;
|
||||
vertical-align: mid;
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.movies .data .quality {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.movies .status_suggest .data .quality,
|
||||
.movies.thumbs_list .data .quality {
|
||||
display: none;
|
||||
@@ -302,9 +341,8 @@
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
font-weight: normal;
|
||||
margin: 0 2px;
|
||||
margin: 0 4px 0 0;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
@@ -312,7 +350,7 @@
|
||||
.movies.mass_edit_list .data .quality {
|
||||
text-align: right;
|
||||
right: 0;
|
||||
margin-right: 50px;
|
||||
margin-right: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -342,8 +380,32 @@
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
line-height: 0;
|
||||
margin-top: -25px;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
.movies .data .actions {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.movies .movie:hover .data .actions {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.movies.details_list .data .actions {
|
||||
top: auto;
|
||||
bottom: 18px;
|
||||
}
|
||||
|
||||
.movies .movie:hover .actions {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
.movies.thumbs_list .data .actions {
|
||||
bottom: 8px;
|
||||
right: 10px;
|
||||
@@ -362,7 +424,6 @@
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 3px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.movies.list_list .movie:not(.details_view):hover .actions,
|
||||
@@ -399,7 +460,6 @@
|
||||
|
||||
.movies .options {
|
||||
position: absolute;
|
||||
margin-left: 120px;
|
||||
width: 840px;
|
||||
}
|
||||
|
||||
@@ -423,7 +483,6 @@
|
||||
.movies .options .table .item.ignored span {
|
||||
text-decoration: line-through;
|
||||
color: rgba(255,255,255,0.4);
|
||||
text-shadow: none;
|
||||
}
|
||||
.movies .options .table .item.ignored .delete {
|
||||
background-image: url('../images/icon.undo.png');
|
||||
@@ -491,6 +550,9 @@
|
||||
text-align: center;
|
||||
transition: all .6s cubic-bezier(0.9,0,0.1,1);
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.movies .movie .trailer_container.hide {
|
||||
height: 0 !important;
|
||||
@@ -507,6 +569,7 @@
|
||||
background: #4e5969;
|
||||
border-radius: 0 0 2px 2px;
|
||||
transition: all .2s cubic-bezier(0.9,0,0.1,1) .2s;
|
||||
z-index: 11;
|
||||
}
|
||||
.movies .movie .hide_trailer.hide {
|
||||
top: -30px;
|
||||
@@ -543,11 +606,13 @@
|
||||
right: 135px;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
background: #4e5969;
|
||||
min-width: 300px;
|
||||
text-align: right;
|
||||
height: 100%;
|
||||
padding: 3px 0;
|
||||
}
|
||||
.movies.mass_edit_list .trynext { display: none; }
|
||||
.wanted .movies .movie .trynext {
|
||||
padding-right: 50px;
|
||||
}
|
||||
@@ -555,6 +620,14 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.movies.details_list .movie .trynext {
|
||||
background: #47515f;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
bottom: 35px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.movies .movie .trynext a {
|
||||
background-position: 5px center;
|
||||
padding: 0 5px 0 25px;
|
||||
@@ -562,6 +635,9 @@
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.movies .movie .trynext a:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
.movies .movie .trynext a:hover {
|
||||
background-color: #369545;
|
||||
}
|
||||
@@ -578,24 +654,33 @@
|
||||
|
||||
.movies .alph_nav {
|
||||
transition: box-shadow .4s linear;
|
||||
position: fixed;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
padding: 100px 60px 7px;
|
||||
width: 1080px;
|
||||
margin: 0 -60px;
|
||||
box-shadow: 0 20px 20px -22px rgba(0,0,0,0.1);
|
||||
background: #4e5969;
|
||||
top: 0px;
|
||||
height: 45px;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.movies .alph_nav.float {
|
||||
box-shadow: 0 30px 30px -32px rgba(0,0,0,0.5);
|
||||
border-radius: 0;
|
||||
@media all and (max-width: 480px) {
|
||||
.movies .alph_nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.movies .alph_nav ul.numbers,
|
||||
.movies .alph_nav > div {
|
||||
position: relative;
|
||||
max-width: 980px;
|
||||
height: 45px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.movies .alph_nav .numbers,
|
||||
.movies .alph_nav .counter,
|
||||
.movies .alph_nav ul.actions {
|
||||
.movies .alph_nav .actions {
|
||||
list-style: none;
|
||||
padding: 0 0 1px;
|
||||
margin: 0;
|
||||
@@ -604,49 +689,62 @@
|
||||
}
|
||||
|
||||
.movies .alph_nav .counter {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
right: 270px;
|
||||
background: #4e5969;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.movies .alph_nav .numbers li,
|
||||
.movies .alph_nav .actions li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: rgba(255,255,255,0.2);
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.1s ease-in-out;
|
||||
text-shadow: none;
|
||||
}
|
||||
.movies .alph_nav .numbers li:first-child {
|
||||
width: 43px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.movies .alph_nav .numbers {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.movies .alph_nav .numbers li {
|
||||
width: auto;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.movies .alph_nav li.available {
|
||||
color: rgba(255,255,255,0.8);
|
||||
color: #FFF;
|
||||
font-weight: bolder;
|
||||
|
||||
}
|
||||
.movies .alph_nav li.active.available, .movies .alph_nav li.available:hover {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
.movies .alph_nav li.active.available,
|
||||
.movies .alph_nav li.available:hover {
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.movies .alph_nav input {
|
||||
.movies .alph_nav .search {
|
||||
padding: 6px 5px;
|
||||
margin: 0 0 0 6px;
|
||||
float: left;
|
||||
width: 155px;
|
||||
margin: 0 0 0 20px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
width: 154px;
|
||||
height: 25px;
|
||||
transition: all 0.6s cubic-bezier(0.9,0,0.1,1);
|
||||
}
|
||||
|
||||
.movies .alph_nav .actions {
|
||||
margin: 0 6px 0 0;
|
||||
-moz-user-select: none;
|
||||
position: absolute;
|
||||
right: 183px;
|
||||
}
|
||||
.movies .alph_nav .actions li {
|
||||
border-radius: 1px;
|
||||
@@ -730,10 +828,12 @@
|
||||
}
|
||||
|
||||
.movies .alph_nav .more_menu {
|
||||
margin-left: 48px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.movies .alph_nav .more_menu > a {
|
||||
background-color: #4e5969;
|
||||
background-position: center -158px;
|
||||
}
|
||||
|
||||
@@ -790,7 +890,6 @@
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
border-left: 1px solid rgba(255, 255, 255, .2);
|
||||
|
||||
@@ -126,12 +126,14 @@ var Movie = new Class({
|
||||
self.thumbnail = File.Select.single('poster', self.data.library.files),
|
||||
self.data_container = new Element('div.data.inlay.light').adopt(
|
||||
self.info_container = new Element('div.info').adopt(
|
||||
self.title = new Element('div.title', {
|
||||
'text': self.getTitle() || 'n/a'
|
||||
}),
|
||||
self.year = new Element('div.year', {
|
||||
'text': self.data.library.year || 'n/a'
|
||||
}),
|
||||
new Element('div.title').adopt(
|
||||
self.title = new Element('span', {
|
||||
'text': self.getTitle() || 'n/a'
|
||||
}),
|
||||
self.year = new Element('div.year', {
|
||||
'text': self.data.library.year || 'n/a'
|
||||
})
|
||||
),
|
||||
self.rating = new Element('div.rating.icon', {
|
||||
'text': self.data.library.rating
|
||||
}),
|
||||
|
||||
@@ -1,105 +1,143 @@
|
||||
.search_form {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 25%;
|
||||
position: absolute;
|
||||
right: 105px;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
height: 100%;
|
||||
border-bottom: 4px solid transparent;
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
border: 1px solid transparent;
|
||||
border-width: 0 0 4px;
|
||||
}
|
||||
|
||||
.search_form input {
|
||||
padding: 4px 20px 4px 4px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
.search_form:hover {
|
||||
border-color: #047792;
|
||||
}
|
||||
.search_form input:focus {
|
||||
padding-right: 83px;
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form {
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form.focused,
|
||||
.search_form.shown {
|
||||
border-color: #04bce6;
|
||||
}
|
||||
|
||||
.search_form .input {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 45px;
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
}
|
||||
|
||||
.search_form.focused .input,
|
||||
.search_form.shown .input {
|
||||
width: 380px;
|
||||
background: #4e5969;
|
||||
}
|
||||
|
||||
.search_form .input .enter {
|
||||
background: #369545 url('../images/sprite.png') right -188px no-repeat;
|
||||
padding: 0 20px 0 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
margin-left: -78px;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.search_form.focused .input .enter {
|
||||
visibility: visible;
|
||||
.search_form .input input {
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: rgba(255,255,255,.08);
|
||||
color: #FFF;
|
||||
font-size: 25px;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
padding: 0 40px 0 10px;
|
||||
transition: all .4s ease-in-out .2s;
|
||||
}
|
||||
.search_form.focused.filled .input .enter {
|
||||
opacity: 1;
|
||||
.search_form.focused .input input,
|
||||
.search_form.shown .input input {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form .input input {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search_form.focused .input,
|
||||
.search_form.shown .input {
|
||||
width: 277px;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form .input a {
|
||||
width: 17px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin: -2px 0 0 2px;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
background: url('../images/sprite.png') left -37px no-repeat;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
vertical-align: middle;
|
||||
|
||||
.search_form .input a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 44px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
font-size: 15px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.search_form .input a:after {
|
||||
content: "\e03e";
|
||||
}
|
||||
|
||||
.search_form.filled .input a {
|
||||
opacity: 1;
|
||||
.search_form.shown.filled .input a:after {
|
||||
content: "\e04e";
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form .input a {
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form .results_container {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
background: #5c697b;
|
||||
margin: 6px 0 0 -230px;
|
||||
margin: 4px 0 0;
|
||||
width: 470px;
|
||||
min-height: 140px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55);
|
||||
display: none;
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form .results_container {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
.search_form.focused.filled .results_container,
|
||||
.search_form.shown.filled .results_container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search_form .results_container:before {
|
||||
content: ' ';
|
||||
height: 0;
|
||||
position: relative;
|
||||
width: 0;
|
||||
border: 10px solid transparent;
|
||||
border-bottom-color: #5c697b;
|
||||
display: block;
|
||||
top: -20px;
|
||||
left: 346px;
|
||||
}
|
||||
|
||||
.search_form .results {
|
||||
max-height: 570px;
|
||||
overflow-x: hidden;
|
||||
padding: 10px 0;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.movie_result {
|
||||
overflow: hidden;
|
||||
height: 140px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.movie_result .options {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
padding: 13px;
|
||||
border: 1px solid transparent;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
@@ -107,7 +145,6 @@
|
||||
}
|
||||
|
||||
.movie_result .options > div {
|
||||
padding: 0 15px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@@ -122,6 +159,13 @@
|
||||
}
|
||||
.movie_result .options select[name=title] { width: 180px; }
|
||||
.movie_result .options select[name=profile] { width: 90px; }
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
|
||||
.movie_result .options select[name=title] { width: 90px; }
|
||||
.movie_result .options select[name=profile] { width: 60px; }
|
||||
|
||||
}
|
||||
|
||||
.movie_result .options .button {
|
||||
vertical-align: middle;
|
||||
@@ -130,25 +174,21 @@
|
||||
|
||||
.movie_result .options .message {
|
||||
height: 100%;
|
||||
line-height: 140px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.movie_result .data {
|
||||
padding: 0 15px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
background: #5c697b;
|
||||
cursor: pointer;
|
||||
|
||||
border-bottom: 1px solid #333;
|
||||
border-top: 1px solid rgba(255,255,255, 0.15);
|
||||
transition: all .6s cubic-bezier(0.9,0,0.1,1);
|
||||
border-top: 1px solid rgba(255,255,255, 0.08);
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
}
|
||||
.movie_result .data.open {
|
||||
left: 100%;
|
||||
@@ -162,49 +202,40 @@
|
||||
}
|
||||
|
||||
.movie_result .thumbnail {
|
||||
width: 17%;
|
||||
display: inline-block;
|
||||
margin: 15px 3% 15px 0;
|
||||
width: 34px;
|
||||
min-height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
.movie_result .info {
|
||||
width: 80%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 15px 0;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.movie_result .info .tagline {
|
||||
max-height: 70px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.movie_result .add +.info {
|
||||
margin-left: 20%;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 15px;
|
||||
right: 60px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.movie_result .info h2 {
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.movie_result .info h2 span {
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
}
|
||||
|
||||
.movie_result .info h2 span:before { content: "("; }
|
||||
.movie_result .info h2 span:after { content: ")"; }
|
||||
|
||||
.search_form .mask,
|
||||
.movie_result .mask {
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -7,33 +7,30 @@ Block.Search = new Class({
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
var focus_timer = 0;
|
||||
self.el = new Element('div.search_form').adopt(
|
||||
new Element('div.input').adopt(
|
||||
self.input = new Element('input.inlay', {
|
||||
self.input = new Element('input', {
|
||||
'placeholder': 'Search & add a new movie',
|
||||
'events': {
|
||||
'keyup': self.keyup.bind(self),
|
||||
'focus': function(){
|
||||
if(focus_timer) clearTimeout(focus_timer);
|
||||
self.el.addClass('focused')
|
||||
if(this.get('value'))
|
||||
self.hideResults(false)
|
||||
},
|
||||
'blur': function(){
|
||||
(function(){
|
||||
focus_timer = (function(){
|
||||
self.el.removeClass('focused')
|
||||
}).delay(2000);
|
||||
}).delay(100);
|
||||
}
|
||||
}
|
||||
}),
|
||||
new Element('span.enter', {
|
||||
new Element('a.icon2', {
|
||||
'events': {
|
||||
'click': self.keyup.bind(self)
|
||||
},
|
||||
'text':'Enter'
|
||||
}),
|
||||
new Element('a', {
|
||||
'events': {
|
||||
'click': self.clear.bind(self)
|
||||
'click': self.clear.bind(self),
|
||||
'touchend': self.clear.bind(self)
|
||||
}
|
||||
})
|
||||
),
|
||||
@@ -59,13 +56,21 @@ Block.Search = new Class({
|
||||
var self = this;
|
||||
(e).preventDefault();
|
||||
|
||||
self.last_q = '';
|
||||
self.input.set('value', '');
|
||||
self.input.focus()
|
||||
if(self.last_q === ''){
|
||||
self.input.blur()
|
||||
self.last_q = null;
|
||||
}
|
||||
else {
|
||||
|
||||
self.movies = []
|
||||
self.results.empty()
|
||||
self.el.removeClass('filled')
|
||||
self.last_q = '';
|
||||
self.input.set('value', '');
|
||||
self.input.focus()
|
||||
|
||||
self.movies = []
|
||||
self.results.empty()
|
||||
self.el.removeClass('filled')
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
hideResults: function(bool){
|
||||
@@ -92,8 +97,10 @@ Block.Search = new Class({
|
||||
|
||||
self.el[self.q() ? 'addClass' : 'removeClass']('filled')
|
||||
|
||||
if(self.q() != self.last_q && (['enter'].indexOf(e.key) > -1 || e.type == 'click'))
|
||||
self.autocomplete()
|
||||
if(self.q() != self.last_q){
|
||||
if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer)
|
||||
self.autocomplete_timer = self.autocomplete.delay(300, self)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@@ -197,6 +204,11 @@ Block.Search.Item = new Class({
|
||||
self.el = new Element('div.movie_result', {
|
||||
'id': info.imdb
|
||||
}).adopt(
|
||||
self.thumbnail = info.images && info.images.poster.length > 0 ? new Element('img.thumbnail', {
|
||||
'src': info.images.poster[0],
|
||||
'height': null,
|
||||
'width': null
|
||||
}) : null,
|
||||
self.options_el = new Element('div.options.inlay'),
|
||||
self.data_container = new Element('div.data', {
|
||||
'tween': {
|
||||
@@ -207,11 +219,6 @@ Block.Search.Item = new Class({
|
||||
'click': self.showOptions.bind(self)
|
||||
}
|
||||
}).adopt(
|
||||
self.thumbnail = info.images && info.images.poster.length > 0 ? new Element('img.thumbnail', {
|
||||
'src': info.images.poster[0],
|
||||
'height': null,
|
||||
'width': null
|
||||
}) : null,
|
||||
new Element('div.info').adopt(
|
||||
self.title = new Element('h2', {
|
||||
'text': info.titles[0]
|
||||
@@ -219,28 +226,11 @@ Block.Search.Item = new Class({
|
||||
self.year = info.year ? new Element('span.year', {
|
||||
'text': info.year
|
||||
}) : null
|
||||
),
|
||||
self.tagline = new Element('span.tagline', {
|
||||
'text': info.tagline ? info.tagline : info.plot,
|
||||
'title': info.tagline ? info.tagline : info.plot
|
||||
}),
|
||||
self.director = self.info.director ? new Element('span.director', {
|
||||
'text': 'Director:' + info.director
|
||||
}) : null,
|
||||
self.starring = info.actors ? new Element('span.actors', {
|
||||
'text': 'Starring:'
|
||||
}) : null
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
if(info.actors){
|
||||
Object.each(info.actors, function(actor){
|
||||
new Element('span', {
|
||||
'text': actor
|
||||
}).inject(self.starring)
|
||||
})
|
||||
}
|
||||
|
||||
info.titles.each(function(title){
|
||||
self.alternativeTitle({
|
||||
@@ -320,11 +310,6 @@ Block.Search.Item = new Class({
|
||||
|
||||
self.options_el.grab(
|
||||
new Element('div').adopt(
|
||||
self.thumbnail = (info.images && info.images.poster.length > 0) ? new Element('img.thumbnail', {
|
||||
'src': info.images.poster[0],
|
||||
'height': null,
|
||||
'width': null
|
||||
}) : null,
|
||||
self.info.in_wanted && self.info.in_wanted.profile ? new Element('span.in_wanted', {
|
||||
'text': 'Already in wanted list: ' + self.info.in_wanted.profile.label
|
||||
}) : (in_library ? new Element('span.in_library', {
|
||||
|
||||
Reference in New Issue
Block a user