diff --git a/couchpotato/core/media/movie/_base/static/list.js b/couchpotato/core/media/movie/_base/static/list.js index 2e77aaa4..d5e1678c 100644 --- a/couchpotato/core/media/movie/_base/static/list.js +++ b/couchpotato/core/media/movie/_base/static/list.js @@ -231,26 +231,29 @@ var MovieList = new Class({ new Element('div.menus').adopt( self.navigation_counter = new Element('span.counter[title=Total]'), self.filter_menu = new BlockMenu(self, { - 'class': 'filter' + 'class': 'filter', + 'button_class': 'icon-filter' }), - self.navigation_actions = new Element('ul.actions', { + self.navigation_actions = new Element('div.actions', { 'events': { - 'click:relay(li)': function(e, el){ + 'click': function(e, el){ + (e).stop(); + + var new_view = self.current_view == 'list' ? 'thumb' : 'list'; + var a = 'active'; self.navigation_actions.getElements('.'+a).removeClass(a); - self.changeView(el.get('data-view')); - this.addClass(a); + self.changeView(new_view); + + self.navigation_actions.getElement('[data-view='+new_view+']') + .addClass(a); - el.inject(el.getParent(), 'top'); - el.getSiblings().hide(); - setTimeout(function(){ - el.getSiblings().setStyle('display', null); - }, 100); } } }), self.navigation_menu = new BlockMenu(self, { - 'class': 'extra' + 'class': 'extra', + 'button_class': 'icon-dots' }) ) ); @@ -273,7 +276,7 @@ var MovieList = new Class({ 'change': self.search.bind(self) } }) - ).addClass('search'); + ).addClass('search icon-search'); var available_chars; self.filter_menu.addEvent('open', function(){ @@ -310,8 +313,8 @@ var MovieList = new Class({ // Actions ['thumb', 'list'].each(function(view){ var current = self.current_view == view; - new Element('li', { - 'class': 'icon2 ' + view + (current ? ' active ' : ''), + new Element('a', { + 'class': 'button icon-' + view + (current ? ' active ' : ''), 'data-view': view }).inject(self.navigation_actions, current ? 'top' : 'bottom'); }); diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index eedbe2e7..df6d216d 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -2,19 +2,25 @@ .page.movies { z-index: 21; // Sets navigation above + bottom: auto; +} + +.page.movies_wanted, .page.movies_manage { + top: $header-height; + padding: 0; } .list_list { font-size: 15px; font-weight: 300; - background: #f2f2f2; .poster { display: none; } .movie { - border-bottom: 1px solid #e6e6e6; + display: block; + border-top: 1px solid #f2f2f2; position: relative; cursor: pointer; @@ -45,14 +51,14 @@ } .quality { - span { + float: left; color: #FFF; - font-size: .8em; + font-size: .7em; padding: 2px 4px; background: rgba(0,0,0,.2); border-radius: 1px; - margin-left: 2px; + margin: 2px 0 0 2px; } } } @@ -63,7 +69,7 @@ .thumb_list { font-size: 12px; - padding: $padding/2 $padding; + padding: 0 $padding; .movie { @include span(6); @@ -83,7 +89,6 @@ overflow: hidden; width: 100%; float: left; - opacity: .05; } .data { @@ -189,3 +194,126 @@ } } } + + +.alph_nav { + + .mass_edit_form { + display: none; + } + + .menus { + margin-right: $padding; + + .button { + padding: 0 $padding/2; + line-height: $header-height; + font-size: 24px; + color: rgba(0, 0, 0, 0.5); + cursor: pointer; + } + + .counter, .more_menu, .actions { + float: left; + } + + .counter { + line-height: $header-height; + } + + .actions { + + a { + display: none; + } + + .active { + display: inline-block; + } + + } + + .filter { + margin-top: -2px; + + .search { + position: relative; + + &:before { + position: absolute; + height: 100%; + line-height: 38px; + padding-left: $padding/2; + font-size: 16px; + opacity: .5; + } + + input { + width: 100%; + padding: $padding/2 $padding/2 $padding/2 $padding*1.5; + background: $background_color; + border: none; + border-bottom: 1px solid #f2f2f2; + } + } + + .numbers { + padding: $padding/2; + + li { + float: left; + width: 10%; + height: 30px; + line-height: 30px; + text-align: center; + color: rgba(0,0,0,.2); + cursor: default; + + &.active { + background: #f2f2f2; + } + + &.available { + color: rgba(0,0,0,1); + cursor: pointer; + + &:hover { + background: #f2f2f2; + } + } + } + } + } + + .more_menu { + position: relative; + line-height: 1em; + + .wrapper { + display: none; + position: absolute; + width: 320px; + right: 0; + top: $header-height; + background: $background_color; + + ul { + overflow: hidden; + } + + li { + display: block; + } + } + + &.show { + background: #f2f2f2; + + .wrapper { + display: block; + } + } + } + } + +} diff --git a/couchpotato/core/media/movie/_base/static/page.js b/couchpotato/core/media/movie/_base/static/page.js index e8c9e531..59bf31ba 100644 --- a/couchpotato/core/media/movie/_base/static/page.js +++ b/couchpotato/core/media/movie/_base/static/page.js @@ -42,6 +42,7 @@ Page.Movies = new Class({ page.list.navigation.inject(self.navigation); self.current_page = page; + self.navigation.activate(page_name.toLowerCase()); } diff --git a/couchpotato/static/fonts/config.json b/couchpotato/static/fonts/config.json new file mode 100644 index 00000000..96dfc93a --- /dev/null +++ b/couchpotato/static/fonts/config.json @@ -0,0 +1,52 @@ +{ + "name": "icons", + "css_prefix_text": "icon-", + "css_use_suffix": false, + "hinting": true, + "units_per_em": 1000, + "ascent": 850, + "glyphs": [ + { + "uid": "9dd9e835aebe1060ba7190ad2b2ed951", + "css": "search", + "code": 59394, + "src": "fontawesome" + }, + { + "uid": "b1887b423d2fd15c345e090320c91ca0", + "css": "thumbs", + "code": 59397, + "src": "fontawesome" + }, + { + "uid": "f805bb95d40c7ef2bc51b3d50d4f2e5c", + "css": "list", + "code": 59398, + "src": "fontawesome" + }, + { + "uid": "e99461abfef3923546da8d745372c995", + "css": "settings", + "code": 59393, + "src": "fontawesome" + }, + { + "uid": "4109c474ff99cad28fd5a2c38af2ec6f", + "css": "filter", + "code": 59396, + "src": "fontawesome" + }, + { + "uid": "c311c48d79488965b0fab7f9cd12b6b5", + "css": "left-arrow", + "code": 59392, + "src": "entypo" + }, + { + "uid": "d10920db2e79c997c5e783279291970c", + "css": "dots", + "code": 59395, + "src": "entypo" + } + ] +} \ No newline at end of file diff --git a/couchpotato/static/fonts/icons.eot b/couchpotato/static/fonts/icons.eot index 76b73205..69575550 100644 Binary files a/couchpotato/static/fonts/icons.eot and b/couchpotato/static/fonts/icons.eot differ diff --git a/couchpotato/static/fonts/icons.svg b/couchpotato/static/fonts/icons.svg index e8411bdb..a139ac46 100644 --- a/couchpotato/static/fonts/icons.svg +++ b/couchpotato/static/fonts/icons.svg @@ -6,10 +6,13 @@ - - - - + + + + + + + \ No newline at end of file diff --git a/couchpotato/static/fonts/icons.ttf b/couchpotato/static/fonts/icons.ttf index 678c342b..0316d9f5 100644 Binary files a/couchpotato/static/fonts/icons.ttf and b/couchpotato/static/fonts/icons.ttf differ diff --git a/couchpotato/static/fonts/icons.woff b/couchpotato/static/fonts/icons.woff index 2c0aba19..128e0863 100644 Binary files a/couchpotato/static/fonts/icons.woff and b/couchpotato/static/fonts/icons.woff differ diff --git a/couchpotato/static/scripts/block/menu.js b/couchpotato/static/scripts/block/menu.js index 6c5ced75..ddc0864e 100644 --- a/couchpotato/static/scripts/block/menu.js +++ b/couchpotato/static/scripts/block/menu.js @@ -16,6 +16,7 @@ var BlockMenu = new Class({ self.more_option_ul = new Element('ul') ), self.button = new Element('a.button' + (self.options.button_class ? '.' + self.options.button_class : ''), { + 'text': self.options.button_text || '', 'events': { 'click': function(){ self.el.toggleClass('show'); diff --git a/couchpotato/static/style/fonts.scss b/couchpotato/static/style/fonts.scss index 7635a63b..ff4300a6 100644 --- a/couchpotato/static/style/fonts.scss +++ b/couchpotato/static/style/fonts.scss @@ -1,11 +1,11 @@ /* Fonts */ @font-face { font-family: 'icons'; - src: url('../fonts/icons.eot?74719531'); - src: url('../fonts/icons.eot?74719531#iefix') format('embedded-opentype'), - url('../fonts/icons.woff?74719531') format('woff'), - url('../fonts/icons.ttf?74719531') format('truetype'), - url('../fonts/icons.svg?74719531#icons') format('svg'); + src: url('../fonts/icons.eot?74719532'); + src: url('../fonts/icons.eot?74719532#iefix') format('embedded-opentype'), + url('../fonts/icons.woff?74719532') format('woff'), + url('../fonts/icons.ttf?74719532') format('truetype'), + url('../fonts/icons.svg?74719532#icons') format('svg'); font-weight: normal; font-style: normal; } @@ -16,11 +16,13 @@ font-weight: normal; speak: none; } -.icon-left-arrow:before { content: '\e803'; } -.icon-settings:before { content: '\e800'; } -.icon-search:before { content: '\e801'; } -.icon-dots:before { content: '\e802'; } -.icon-left-arrow:before { content: '\e803'; } +.icon-left-arrow:before { content: '\e800'; } +.icon-settings:before { content: '\e801'; } +.icon-search:before { content: '\e802'; } +.icon-dots:before { content: '\e803'; } +.icon-filter:before { content: '\e804'; } +.icon-thumb:before { content: '\e805'; } +.icon-list:before { content: '\e806'; } @font-face { font-family: 'OpenSans'; diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss index 4a0f6bb9..6111ee48 100644 --- a/couchpotato/static/style/main.scss +++ b/couchpotato/static/style/main.scss @@ -5,12 +5,11 @@ body, html { font-size: 14px; line-height: 1.5; font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; + font-weight: 300; height: 100%; margin: 0; padding: 0; background: $menu_color; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; overflow: hidden; } @@ -23,10 +22,14 @@ a { text-decoration: none; } +input, textarea, select { + font-size: 1em; + font-weight: 300; +} + .header { width: $header-width; - - font-weight: 200; + min-width: $header-width; a { color: #FFF; @@ -37,7 +40,6 @@ a { .logo { background: $couch_color; - opacity: .05; display: block; text-align: center; @@ -84,8 +86,8 @@ a { .pages { height: 100%; width: 100%; - overflow: auto; - overflow-x: hidden; + overflow: hidden; + position: relative; } .footer { @@ -97,9 +99,14 @@ a { } .page { - position: relative; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; display: none; padding: $padding 0; + overflow: auto; &.active { display: block; @@ -128,13 +135,12 @@ a { line-height: $header-height; padding: $padding; color: rgba(0,0,0,.5); - font-weight: 300; - - &.active { - color: rgba(0,0,0,1); - } } } + + .active a { + color: #000; + } } } @@ -145,4 +151,4 @@ a { .level_#{$i} { z-index: #{$i * 10}; } -} \ No newline at end of file +}