diff --git a/couchpotato/core/notifications/core/static/notification.js b/couchpotato/core/notifications/core/static/notification.js
index 52062e93..025d81d1 100644
--- a/couchpotato/core/notifications/core/static/notification.js
+++ b/couchpotato/core/notifications/core/static/notification.js
@@ -21,6 +21,7 @@ var NotificationBase = new Class({
App.addEvent('load', function(){
App.block.notification = new Block.Menu(self, {
+ 'button_class': 'icon2.eye-open',
'class': 'notification_menu',
'onOpen': self.markAsRead.bind(self)
})
diff --git a/couchpotato/core/plugins/log/static/log.css b/couchpotato/core/plugins/log/static/log.css
index 222b8efa..8804af63 100644
--- a/couchpotato/core/plugins/log/static/log.css
+++ b/couchpotato/core/plugins/log/static/log.css
@@ -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 {
diff --git a/couchpotato/core/plugins/movie/static/list.js b/couchpotato/core/plugins/movie/static/list.js
index a89f89af..46819439 100644
--- a/couchpotato/core/plugins/movie/static/list.js
+++ b/couchpotato/core/plugins/movie/static/list.js
@@ -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');
diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css
index c6fe4e0a..6e0f7fd3 100644
--- a/couchpotato/core/plugins/movie/static/movie.css
+++ b/couchpotato/core/plugins/movie/static/movie.css
@@ -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);
diff --git a/couchpotato/core/plugins/movie/static/movie.js b/couchpotato/core/plugins/movie/static/movie.js
index ffdd14d1..4f903226 100644
--- a/couchpotato/core/plugins/movie/static/movie.js
+++ b/couchpotato/core/plugins/movie/static/movie.js
@@ -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
}),
diff --git a/couchpotato/core/plugins/movie/static/search.css b/couchpotato/core/plugins/movie/static/search.css
index 23d87b46..e03c6461 100644
--- a/couchpotato/core/plugins/movie/static/search.css
+++ b/couchpotato/core/plugins/movie/static/search.css
@@ -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%;
diff --git a/couchpotato/core/plugins/movie/static/search.js b/couchpotato/core/plugins/movie/static/search.js
index dd8e7b04..334f8554 100644
--- a/couchpotato/core/plugins/movie/static/search.js
+++ b/couchpotato/core/plugins/movie/static/search.js
@@ -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', {
diff --git a/couchpotato/static/fonts/Elusive-Icons.eot b/couchpotato/static/fonts/Elusive-Icons.eot
new file mode 100755
index 00000000..282e6089
Binary files /dev/null and b/couchpotato/static/fonts/Elusive-Icons.eot differ
diff --git a/couchpotato/static/fonts/Elusive-Icons.svg b/couchpotato/static/fonts/Elusive-Icons.svg
new file mode 100755
index 00000000..bfc6c9b7
--- /dev/null
+++ b/couchpotato/static/fonts/Elusive-Icons.svg
@@ -0,0 +1,298 @@
+
+
+
\ No newline at end of file
diff --git a/couchpotato/static/fonts/Elusive-Icons.ttf b/couchpotato/static/fonts/Elusive-Icons.ttf
new file mode 100755
index 00000000..ae31768f
Binary files /dev/null and b/couchpotato/static/fonts/Elusive-Icons.ttf differ
diff --git a/couchpotato/static/fonts/Elusive-Icons.woff b/couchpotato/static/fonts/Elusive-Icons.woff
new file mode 100755
index 00000000..7f974bd4
Binary files /dev/null and b/couchpotato/static/fonts/Elusive-Icons.woff differ
diff --git a/couchpotato/static/fonts/OpenSans-Bold-webfont.eot b/couchpotato/static/fonts/OpenSans-Bold-webfont.eot
new file mode 100755
index 00000000..e1c76744
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Bold-webfont.eot differ
diff --git a/couchpotato/static/fonts/OpenSans-Bold-webfont.svg b/couchpotato/static/fonts/OpenSans-Bold-webfont.svg
new file mode 100755
index 00000000..364b3686
--- /dev/null
+++ b/couchpotato/static/fonts/OpenSans-Bold-webfont.svg
@@ -0,0 +1,146 @@
+
+
+
\ No newline at end of file
diff --git a/couchpotato/static/fonts/OpenSans-Bold-webfont.ttf b/couchpotato/static/fonts/OpenSans-Bold-webfont.ttf
new file mode 100755
index 00000000..2d94f062
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Bold-webfont.ttf differ
diff --git a/couchpotato/static/fonts/OpenSans-Bold-webfont.woff b/couchpotato/static/fonts/OpenSans-Bold-webfont.woff
new file mode 100755
index 00000000..cd86852d
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Bold-webfont.woff differ
diff --git a/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.eot b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.eot
new file mode 100755
index 00000000..f44ac9a3
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.eot differ
diff --git a/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.svg b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.svg
new file mode 100755
index 00000000..8392240a
--- /dev/null
+++ b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.svg
@@ -0,0 +1,146 @@
+
+
+
\ No newline at end of file
diff --git a/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.ttf b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.ttf
new file mode 100755
index 00000000..f74e0e3c
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.ttf differ
diff --git a/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.woff b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.woff
new file mode 100755
index 00000000..f3248c11
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-BoldItalic-webfont.woff differ
diff --git a/couchpotato/static/fonts/OpenSans-Italic-webfont.eot b/couchpotato/static/fonts/OpenSans-Italic-webfont.eot
new file mode 100755
index 00000000..277c1899
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Italic-webfont.eot differ
diff --git a/couchpotato/static/fonts/OpenSans-Italic-webfont.svg b/couchpotato/static/fonts/OpenSans-Italic-webfont.svg
new file mode 100755
index 00000000..29c7497f
--- /dev/null
+++ b/couchpotato/static/fonts/OpenSans-Italic-webfont.svg
@@ -0,0 +1,146 @@
+
+
+
\ No newline at end of file
diff --git a/couchpotato/static/fonts/OpenSans-Italic-webfont.ttf b/couchpotato/static/fonts/OpenSans-Italic-webfont.ttf
new file mode 100755
index 00000000..63f187e9
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Italic-webfont.ttf differ
diff --git a/couchpotato/static/fonts/OpenSans-Italic-webfont.woff b/couchpotato/static/fonts/OpenSans-Italic-webfont.woff
new file mode 100755
index 00000000..469a29bb
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Italic-webfont.woff differ
diff --git a/couchpotato/static/fonts/OpenSans-Regular-webfont.eot b/couchpotato/static/fonts/OpenSans-Regular-webfont.eot
new file mode 100755
index 00000000..dd6fd2cb
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Regular-webfont.eot differ
diff --git a/couchpotato/static/fonts/OpenSans-Regular-webfont.svg b/couchpotato/static/fonts/OpenSans-Regular-webfont.svg
new file mode 100755
index 00000000..01038bb1
--- /dev/null
+++ b/couchpotato/static/fonts/OpenSans-Regular-webfont.svg
@@ -0,0 +1,146 @@
+
+
+
\ No newline at end of file
diff --git a/couchpotato/static/fonts/OpenSans-Regular-webfont.ttf b/couchpotato/static/fonts/OpenSans-Regular-webfont.ttf
new file mode 100755
index 00000000..05951e7b
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Regular-webfont.ttf differ
diff --git a/couchpotato/static/fonts/OpenSans-Regular-webfont.woff b/couchpotato/static/fonts/OpenSans-Regular-webfont.woff
new file mode 100755
index 00000000..274664b2
Binary files /dev/null and b/couchpotato/static/fonts/OpenSans-Regular-webfont.woff differ
diff --git a/couchpotato/static/images/sprite.png b/couchpotato/static/images/sprite.png
index 782229f0..0ef30413 100644
Binary files a/couchpotato/static/images/sprite.png and b/couchpotato/static/images/sprite.png differ
diff --git a/couchpotato/static/scripts/block/menu.js b/couchpotato/static/scripts/block/menu.js
index 4dc143d4..cdd7875b 100644
--- a/couchpotato/static/scripts/block/menu.js
+++ b/couchpotato/static/scripts/block/menu.js
@@ -15,7 +15,7 @@ Block.Menu = new Class({
self.wrapper = new Element('div.wrapper').adopt(
self.more_option_ul = new Element('ul')
),
- new Element('a.button.onlay', {
+ new Element('a.button.onlay' + (self.options.button_class ? '.' + self.options.button_class : ''), {
'events': {
'click': function(){
self.el.toggleClass('show')
diff --git a/couchpotato/static/scripts/block/navigation.js b/couchpotato/static/scripts/block/navigation.js
index 85f20c49..feda3795 100644
--- a/couchpotato/static/scripts/block/navigation.js
+++ b/couchpotato/static/scripts/block/navigation.js
@@ -5,7 +5,17 @@ Block.Navigation = new Class({
create: function(){
var self = this;
+ var settings_added = false;
self.el = new Element('div.navigation').adopt(
+ self.foldout = new Element('a.foldout.icon2.menu', {
+ 'events': {
+ 'click': self.toggleMenu.bind(self)
+ }
+ }).grab(new Element('span.overlay')),
+ self.logo = new Element('a.logo', {
+ 'text': 'CouchPotato',
+ 'href': App.createUrl('')
+ }),
self.nav = new Element('ul'),
self.backtotop = new Element('a.backtotop', {
'text': 'back to top',
@@ -28,19 +38,50 @@ Block.Navigation = new Class({
onEnter: function(){
self.backtotop.fade('in')
}
+ });
+
+ self.nav.addEvents({
+ 'click:relay(a)': function(){
+ if($(document.body).getParent().hasClass('menu_shown'))
+ self.toggleMenu();
+ }
})
},
addTab: function(name, tab){
- var self = this
+ var self = this;
- return new Element('li.tab_'+(name || 'unknown')).adopt(
+ return new Element('li.tab_'+(name || 'unknown')).grab(
new Element('a', tab)
).inject(self.nav)
},
+ toggleMenu: function(e){
+ var self = this,
+ body = $(document.body),
+ html = body.getParent();
+
+ // Copy over settings menu
+ if(!self.added){
+
+ new Element('li.separator').inject(self.nav);
+ body.getElements('.header .more_menu.menu li a').each(function(el, nr){
+ if([0, 1, 2, 5].indexOf(nr) > -1){
+ self.nav.grab(
+ new Element('li').grab(el.clone().cloneEvents(el))
+ );
+ }
+ });
+
+ self.added = true;
+ }
+
+ html.toggleClass('menu_shown');
+
+ },
+
activate: function(name){
var self = this;
diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js
index d2e8fa00..5a7dbfba 100644
--- a/couchpotato/static/scripts/couchpotato.js
+++ b/couchpotato/static/scripts/couchpotato.js
@@ -61,7 +61,7 @@ var CouchPotato = new Class({
new Element('div').adopt(
self.block.navigation = new Block.Navigation(self, {}),
self.block.search = new Block.Search(self, {}),
- self.block.more = new Block.Menu(self, {})
+ self.block.more = new Block.Menu(self, {'button_class': 'icon2.cog'})
)
),
self.content = new Element('div.content'),
diff --git a/couchpotato/static/scripts/library/question.js b/couchpotato/static/scripts/library/question.js
index cab63465..ed53b391 100644
--- a/couchpotato/static/scripts/library/question.js
+++ b/couchpotato/static/scripts/library/question.js
@@ -7,36 +7,24 @@ var Question = new Class( {
self.hint = hint
self.answers = answers
- self.createQuestion()
+ self.createQuestion();
self.answers.each(function(answer) {
self.createAnswer(answer)
})
- self.createMask()
},
- createMask : function() {
- var self = this
-
- self.mask = new Element('div.mask').fade('hide').inject(document.body).fade('in');
- },
-
createQuestion : function() {
+ var self = this;
- this.container = new Element('div', {
- 'class' : 'question'
- }).adopt(
+ self.container = new Element('div.mask.question').adopt(
new Element('h3', {
'html': this.question
}),
new Element('div.hint', {
'html': this.hint
})
- ).inject(document.body)
-
- this.container.position( {
- 'position' : 'center'
- });
+ ).fade('hide').inject(document.body).fade('in')
},
@@ -59,17 +47,15 @@ var Question = new Class( {
(options.onComplete || function(){})()
self.close();
}
- })).send();
+ })).send();
});
}
},
close : function() {
var self = this;
- self.mask.fade('out');
- (function(){self.mask.destroy()}).delay(1000);
-
- this.container.destroy();
+ self.container.fade('out');
+ (function(){self.container.destroy()}).delay(1000);
},
toElement : function() {
diff --git a/couchpotato/static/style/main.css b/couchpotato/static/style/main.css
index 91bd1524..3d016a8d 100644
--- a/couchpotato/static/style/main.css
+++ b/couchpotato/static/style/main.css
@@ -1,19 +1,14 @@
-html {
+body, html {
color: #fff;
font-size: 12px;
line-height: 1.5;
- font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+ font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
height: 100%;
- text-shadow: 0 1px 0 #000;
-}
-
-body {
margin: 0;
padding: 0;
background: #4e5969;
- overflow-y: scroll;
- height: 100%;
}
+ body { overflow-y: scroll; }
body.noscroll { overflow: hidden; }
#clean {
@@ -32,14 +27,16 @@ pre {
}
input, textarea {
- font-size: 12px;
+ font-size: 1em;
font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
}
+input:focus, textarea:focus {
+ outline: none;
+}
input:-moz-placeholder, textarea:-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
-
::-webkit-input-placeholder, ::-webkit-textarea-placeholder {
color: rgba(255, 255, 255, 0.6);
}
@@ -59,53 +56,30 @@ a:hover { color: #f3f3f3; }
.page {
display: none;
- width: 960px;
+ width: 100%;
+ max-width: 980px;
margin: 0 auto;
- line-height: 24px;
- padding: 0 0 20px;
+ line-height: 1.5em;
+ padding: 0 15px 20px;
}
.page.active { display: block; }
- .page .noticeMe {
- background-color: lightgoldenrodyellow;
- display: block;
- padding: 20px 10px;
- margin: 0 -10px 40px;
- font-size: 19px;
- text-align: center;
- }
-
.content {
clear:both;
- padding: 80px 0 10px;
+ padding: 65px 0 10px;
+ background: #4e5969;
}
-h2 {
- font-size: 30px;
- padding: 0;
- margin: 20px 0 0 0;
-}
-
-.footer {
- text-align:center;
- padding: 50px 0 0 0;
- color: #999;
- font-size: 10px;
- clear: both;
-}
-
- .footer .check {
- color: #333;
+ @media all and (max-width: 480px) {
+ .content {
+ padding-top: 40px;
+ }
}
-#toTop {
- background: black;
- position: fixed;
- bottom: 0;
- right: 0;
- padding: 10px 10px 10px 40px;
- background: #f7f7f7 url('../images/toTop.gif') no-repeat 10px center;
- border-radius: 5px 0 0 0;
+h2 {
+ font-size: 2.5em;
+ padding: 0;
+ margin: 20px 0 0 0;
}
form {
@@ -126,6 +100,12 @@ body > .spinner, .mask{
width: 100%;
padding: 200px;
}
+
+ @media all and (max-width: 480px) {
+ body > .mask {
+ padding: 20px;
+ }
+ }
.button {
background: #5082bc url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi/v//vwMTAwPDfzjBgMpFI/7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA+CugAAAAAElFTkSuQmCC") repeat-x;
@@ -135,8 +115,6 @@ body > .spinner, .mask{
font-weight: bold;
line-height: 1;
border-radius: 2px;
- box-shadow: 0 1px 2px rgba(0,0,0,0.3);
- text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
}
.button.red { background-color: #ff0000; }
@@ -164,132 +142,300 @@ body > .spinner, .mask{
.icon.spinner { background-image: url('../images/icon.spinner.gif'); }
.icon.attention { background-image: url('../images/icon.attention.png'); }
+.icon2 {
+ display: inline-block;
+ background: center no-repeat;
+ font-family: 'Elusive-Icons';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ font-size: 15px;
+}
+
+.icon2.cog:before { content: "\e109"; }
+.icon2.eye-open:before { content: "\e09d"; }
+.icon2.search:before { content: "\e03e"; }
+.icon2.return-key:before { content: "\e111"; }
+.icon2.menu:before {
+ content: "\e076 \e076 \e076";
+ line-height: 6px;
+ transform: scaleX(2);
+ width: 20px;
+ font-size: 10px;
+ display: inline-block;
+ vertical-align: middle;
+}
+
/*** Navigation ***/
.header {
- background: #4e5969;
- padding: 10px 0;
- height: 80px;
+ height: 66px;
position: fixed;
margin: 0;
width: 100%;
z-index: 5;
- box-shadow: 0 20px 30px -30px rgba(0,0,0,0.05);
- transition: box-shadow .4s cubic-bezier(0.9,0,0.1,1);
+ background: #4e5969;
+ box-shadow: 0 0 10px rgba(0,0,0,.1);
+ transition: all .4s ease-in-out;
}
.header.with_shadow {
- box-shadow: 0 20px 30px -30px rgba(0,0,0,0.3);
+ background-color: #46505e;
+ }
+
+ @media all and (max-width: 480px) {
+ .header {
+ height: 44px;
+ }
}
.header > div {
- width: 960px;
+ width: 100%;
+ max-width: 980px;
margin: 0 auto;
- overflow: hidden;
+ position: relative;
+ height: 100%;
+ padding: 0 15px;
}
+
.header .navigation {
display: inline-block;
vertical-align: middle;
- width: 67.2%;
+ position: absolute;
+ height: 100%;
+ left: 0;
+ bottom: 0;
}
- .header .navigation ul {
- margin: 0;
- padding: 0;
- }
- .header .navigation li {
- color: #fff;
- display: inline-block;
- font-size:20px;
- font-weight: bold;
- margin: 0;
- text-align: center;
- }
-
- .header .navigation li a {
- display: block;
- padding: 15px;
- position: relative;
- }
- .header .navigation li:first-child a { padding-left: 10px; }
- .header .navigation li span {
- display: block;
- margin-top: 5px;
- }
-
- .header .navigation li a:after {
- content: '';
- display: inline-block;
- height: 2px;
- width: 76%;
- left: 12%;
- position: absolute;
- top: 46px;
- background-color: #46505e;
- outline: none;
- box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
- transition: all .4s cubic-bezier(0.9,0,0.1,1);
- }
-
- .header .navigation li:hover a:after { background-color: #047792; }
- .header .navigation li.active a:after { background-color: #04bce6; }
-
- .header .navigation li.disabled { color: #e5e5e5; }
- .header .navigation li a { color: #fff; }
-
- .header .navigation .backtotop {
- opacity: 0;
- display: block;
- width: 80px;
- left: 50%;
- position: absolute;
+
+ .header .foldout {
+ width: 44px;
+ height: 100%;
text-align: center;
- margin: -10px 0 0 -40px;
- background: #4e5969;
- padding: 5px 0;
- border-radius: 0 0 5px 5px;
- color: rgba(255,255,255,.4);
- text-shadow: none;
- font-weight: normal;
+ border-right: 1px solid rgba(255,255,255,.07);
+ display: none;
+ vertical-align: top;
+ line-height: 42px;
+ color: #FFF;
+ }
+
+ .header .logo {
+ display: inline-block;
+ font-size: 1.75em;
+ padding: 13px 30px 0 15px;
+ height: 100%;
+ vertical-align: middle;
+ border-right: 1px solid rgba(255,255,255,.07);
+ color: #FFF;
+ font-weight: normal;
+ }
+
+ @media all and (max-width: 480px) {
+ .header .foldout {
+ display: inline-block;
+ }
+
+ .header .logo {
+ padding-top: 7px;
+ border: 0;
+ }
+ }
+
+ @media all and (min-width: 481px) and (max-width: 640px) {
+
+ .header .logo {
+ display: none;
+ }
+
+ }
+
+ .header .navigation ul {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ }
+
+ .header .navigation li {
+ color: #fff;
+ display: inline-block;
+ font-size: 1.75em;
+ margin: 0;
+ text-align: center;
+ height: 100%;
+ border: 1px solid rgba(255,255,255,.07);
+ border-width: 0 0 0 1px;
+ }
+ .header .navigation li:first-child {
+ border: none;
+ }
+
+ .header .navigation li a {
+ display: block;
+ padding: 15px;
+ position: relative;
+ height: 100%;
+ border: 1px solid transparent;
+ border-width: 0 0 4px 0;
+ font-weight: normal;
+ }
+
+ .header .navigation li:hover a { border-color: #047792; }
+ .header .navigation li.active a { border-color: #04bce6; }
+
+ .header .navigation li.disabled { color: #e5e5e5; }
+ .header .navigation li a { color: #fff; }
+
+ .header .navigation .backtotop {
+ opacity: 0;
+ display: block;
+ width: 80px;
+ left: 50%;
+ position: fixed;
+ bottom: 0;
+ text-align: center;
+ margin: -10px 0 0 -40px;
+ background: #4e5969;
+ padding: 5px 0;
+ color: rgba(255,255,255,.4);
+ font-weight: normal;
+ }
+ .header:hover .navigation .backtotop { color: #fff; }
+
+ @media all and (max-width: 480px) {
+
+ body {
+ position: absolute;
+ width: 100%;
+ transition: all .5s cubic-bezier(0.9,0,0.1,1);
+ left: 0;
+ }
+
+ .menu_shown body {
+ left: 160px;
+ }
+
+ .header .navigation {
+ height: 100%;
+ }
+
+ .menu_shown .header .navigation .overlay {
+ position: fixed;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ left: 160px;
+ }
+
+ .header .navigation ul {
+ width: 160px;
+ position: fixed;
+ left: -160px;
+ background: rgba(0,0,0,.5);
+ transition: all .5s cubic-bezier(0.9,0,0.1,1);
+ }
+
+ .menu_shown .header .navigation ul {
+ left: 0;
+ }
+
+ .header .navigation ul li {
+ display: block;
+ text-align: left;
+ border-width: 1px 0 0 0;
+ height: 44px;
+ }
+ .header .navigation ul li a {
+ border-width: 0 4px 0 0;
+ padding: 5px 20px;
+ }
+
+ .header .navigation ul li.separator {
+ background-color: rgba(255,255,255, .07);
+ height: 5px;
+ }
}
- .header:hover .navigation .backtotop { color: #fff; }
.header .more_menu {
- margin-left: 12px;
+ position: absolute;
+ right: 15px;
+ height: 100%;
+ border-left: 1px solid rgba(255,255,255,.07);
}
+
+ @media all and (max-width: 480px) {
+ .header .more_menu {
+ display: none;
+ }
+ }
+
+ .header .more_menu .button {
+ height: 100%;
+ width: 44px;
+ border: 0;
+ box-shadow: none;
+ border-radius: 0;
+ background: none;
+ line-height: 66px;
+ text-align: center;
+ padding: 0;
+ border: 1px solid transparent;
+ border-width: 0 0 4px;
+ }
+ .header .more_menu .button:hover {
+ background: none;
+ border-color: #047792;
+ }
+
.header .more_menu .wrapper {
width: 150px;
- margin-left: -110px;
- }
- .header .more_menu .wrapper:before {
- margin-left: -34px;
+ margin-left: -106px;
+ margin-top: 66px;
}
+
+ @media all and (max-width: 480px) {
+ .header .more_menu .button {
+ line-height: 44px;
+ }
+
+ .header .more_menu .wrapper {
+ margin-top: 44px;
+ }
+ }
.header .more_menu .red { color: red; }
.header .more_menu .orange { color: orange; }
.badge {
position: absolute;
- width: 14px;
- height: 14px;
+ width: 20px;
+ height: 20px;
text-align: center;
- line-height: 14px;
- border-radius: 50%;
- font-size: 8px;
- margin: -5px 0 0 15px;
- box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 3px rgba(0,0,0,.7);
+ line-height: 20px;
+ margin: 0;
background-color: #1b79b8;
- text-shadow: none;
- background-image: -*-linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%);
+ top: 0;
+ right: 0;
}
+
+ .header .notification_menu {
+ right: 60px;
+ display: block;
+ }
+
+ @media all and (max-width: 480px) {
+ .header .notification_menu {
+ right: 0;
+ }
+ }
.header .notification_menu .wrapper {
width: 300px;
- margin-left: -260px;
+ margin-left: -255px;
text-align: left;
}
- .header .notification_menu .wrapper:before {
- left: 296px;
- }
-
.header .notification_menu ul {
max-height: 300px;
overflow: auto;
@@ -309,7 +455,7 @@ body > .spinner, .mask{
.header .notification_menu li:last-child > span { border: 0; }
.header .notification_menu li .added {
display: block;
- font-size: 10px;
+ font-size: .85em;
color: #aaa;
text-align: ;
}
@@ -454,13 +600,9 @@ body > .spinner, .mask{
display: block;
width: 600px;
padding: 20px;
- background: #f5f5f5;
position:fixed;
- z-index:101;
+ z-index: 101;
text-align: center;
- background: #5c697b;
- border-radius: 3px;
- box-shadow: 0 0 50px rgba(0,0,0,0.55);
}
.question h3 {
@@ -472,7 +614,6 @@ body > .spinner, .mask{
.question .hint {
font-size: 14px;
color: #ccc;
- text-shadow: none;
}
.question .answer {
@@ -495,88 +636,74 @@ body > .spinner, .mask{
background-color: #4c5766;
}
- .more_menu {
- display: inline-block;
- vertical-align: middle;
- }
+.more_menu {
+ display: inline-block;
+ vertical-align: middle;
+}
- .more_menu > a {
+.more_menu > a {
+ display: block;
+ background: url('../images/sprite.png') no-repeat center -137px;
+ height: 25px;
+ width: 25px;
+ border: 1px solid rgba(0,0,0,0.3);
+ transition: all 0.3s ease-in-out;
+}
+.more_menu.show > a:not(:active), .more_menu > a:hover:not(:active) {
+ background-color: #406db8;
+}
+
+.more_menu .wrapper {
+ display: none;
+ background: rgba(255,255,255,0.98);
+ padding: 4px;
+ position: absolute;
+ z-index: 90;
+ margin: 32px 0 0 -145px;
+ width: 185px;
+ box-shadow: 0 20px 20px -5px rgba(0,0,0,0.1);
+ text-align: center;
+ color: #000;
+ background-image: -*-linear-gradient(
+ 45deg,
+ rgb(200,200,200) 0%,
+ rgb(255,255,255) 100%
+ );
+}
+
+ .more_menu.show .wrapper {
display: block;
- background: url('../images/sprite.png') no-repeat center -137px;
- height: 25px;
- width: 25px;
- border: 1px solid rgba(0,0,0,0.3);
- transition: all 0.3s ease-in-out;
- }
- .more_menu.show > a:not(:active), .more_menu > a:hover:not(:active) {
- background-color: #406db8;
}
- .more_menu .wrapper {
- display: none;
- border: 1px solid #333;
- background: rgba(255,255,255,0.98);
- border-radius: 3px;
- padding: 4px !important;
- position: absolute;
- z-index: 9;
- margin: 32px 0 0 -145px;
- width: 185px;
- box-shadow: 0 10px 10px -5px rgba(0,0,0,0.4);
- text-align: center;
- color: #000;
- text-shadow: none;
- background-image: -*-linear-gradient(
- 45deg,
- rgb(200,200,200) 0%,
- rgb(255,255,255) 100%
- );
+ .more_menu ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
}
- .more_menu .wrapper:before {
- content: ' ';
- height: 0;
- position: relative;
- width: 0;
- border: 6px solid transparent;
- border-bottom-color: #fff;
- display: block;
- top: -16px;
- left: 146px;
- }
- .more_menu.show .wrapper {
+ .more_menu .wrapper li {
+ width: 100%;
+ height: auto;
+ }
+
+ .more_menu .wrapper li a {
display: block;
+ border-bottom: 1px solid rgba(255,255,255,0.2);
+ box-shadow: none;
+ font-weight: normal;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ padding: 3px 0;
+ color: #000;
}
- .more_menu ul {
- padding: 0;
- margin: -12px 0 0 0;
- list-style: none;
+ .more_menu .wrapper li:last-child a {
+ border: none;
}
-
- .more_menu .wrapper li {
- width: 100%;
- height: auto;
+ .more_menu .wrapper li a:hover {
+ background: rgba(0,0,0,0.05);
}
-
- .more_menu .wrapper li a {
- display: block;
- border-bottom: 1px solid rgba(255,255,255,0.2);
- box-shadow: none;
- font-weight: normal;
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 1px;
- padding: 3px 0;
- color: #000;
- }
-
- .more_menu .wrapper li:last-child a {
- border: none;
- }
- .more_menu .wrapper li a:hover {
- background: rgba(0,0,0,0.05);
- }
.messages {
position: fixed;
@@ -619,4 +746,64 @@ body > .spinner, .mask{
.messages .message.hide {
margin-left: 240px;
opacity: 0;
- }
\ No newline at end of file
+ }
+
+/* Fonts */
+@font-face {
+ font-family: 'Elusive-Icons';
+ src:url('../fonts/Elusive-Icons.eot');
+ src:url('../fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/Elusive-Icons.woff') format('woff'),
+ url('../fonts/Elusive-Icons.ttf') format('truetype'),
+ url('../fonts/Elusive-Icons.svg#Elusive-Icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'OpenSans';
+ src: url('../fonts/OpenSans-Regular-webfont.eot');
+ src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
+ url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+ url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
+@font-face {
+ font-family: 'OpenSans';
+ src: url('../fonts/OpenSans-Italic-webfont.eot');
+ src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
+ url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
+ url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
+ font-weight: normal;
+ font-style: italic;
+
+}
+
+@font-face {
+ font-family: 'OpenSans';
+ src: url('../fonts/OpenSans-Bold-webfont.eot');
+ src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
+ url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
+ url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+ font-weight: bold;
+ font-style: normal;
+
+}
+
+@font-face {
+ font-family: 'OpenSans';
+ src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
+ src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
+ url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
+ url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+ font-weight: bold;
+ font-style: italic;
+
+}
\ No newline at end of file
diff --git a/couchpotato/static/style/settings.css b/couchpotato/static/style/settings.css
index a5655f88..638a6585 100644
--- a/couchpotato/static/style/settings.css
+++ b/couchpotato/static/style/settings.css
@@ -1,5 +1,9 @@
+.page.settings {
+ min-width: 960px;
+}
+
.page.settings:after {
- content: ".";
+ content: "";
display: block;
clear: both;
visibility: hidden;
@@ -9,15 +13,15 @@
.page.settings .tabs {
float: left;
- width: 20%;
- font-size: 20px;
+ width: 14.7%;
+ font-size: 17px;
text-align: right;
list-style: none;
- padding: 40px 0;
+ padding: 35px 0;
margin: 0;
min-height: 470px;
background-image: -*-linear-gradient(
- 20deg,
+ 14deg,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0.3) 100%
);
@@ -60,9 +64,9 @@
.page.settings .containers {
- width: 80%;
+ width: 84%;
float: left;
- padding: 20px 2%;
+ padding: 40px 2%;
min-height: 300px;
}
@@ -240,7 +244,7 @@
display: block;
text-align: right;
height: 20px;
- margin: 0;
+ margin: 0 0 -37px;
}
.page .advanced_toggle span { padding: 0 5px; }
.page.show_advanced .advanced_toggle {
diff --git a/couchpotato/templates/index.html b/couchpotato/templates/index.html
index 1d618066..4fcb5c9e 100644
--- a/couchpotato/templates/index.html
+++ b/couchpotato/templates/index.html
@@ -1,6 +1,9 @@
+
+
+
{% for url in fireEvent('clientscript.get_styles', as_html = True, location = 'front', single = True) %}
{% endfor %}
{% for url in fireEvent('clientscript.get_scripts', as_html = True, location = 'front', single = True) %}