From 6a0220b4963429cca95e76344dd58e1a99257cb6 Mon Sep 17 00:00:00 2001 From: Ruud Date: Wed, 17 Dec 2014 22:00:43 +0100 Subject: [PATCH] Filters --- .../core/media/movie/_base/static/list.js | 31 ++-- .../core/media/movie/_base/static/movie.scss | 142 +++++++++++++++++- .../core/media/movie/_base/static/page.js | 1 + couchpotato/static/fonts/config.json | 52 +++++++ couchpotato/static/fonts/icons.eot | Bin 5416 -> 6256 bytes couchpotato/static/fonts/icons.svg | 11 +- couchpotato/static/fonts/icons.ttf | Bin 5260 -> 6100 bytes couchpotato/static/fonts/icons.woff | Bin 3120 -> 3460 bytes couchpotato/static/scripts/block/menu.js | 1 + couchpotato/static/style/fonts.scss | 22 +-- couchpotato/static/style/main.scss | 34 +++-- 11 files changed, 245 insertions(+), 49 deletions(-) create mode 100644 couchpotato/static/fonts/config.json 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 76b732058caec40d94071a6d3cfff3de9324378e..69575550def9a2bb554f46d01524a705f92ad9d0 100644 GIT binary patch delta 1295 zcmb7ET}V@57=GV#wzK0V&iQkWMa`*mR%03dURY=(XcBZ$Nns>s^X#W>?zD3(qhL`4 zL4uQAB+-Q+L_rd@K0A~ys7&I30+j+g|qj#Ve=2{gZKTu=X;*-`QUxecU~O( zd4f}_0G7lFuFbIAGwq$|iY1-{zz>RkUsO^S#RIbd*iF&ryQw*7pN8ctC9_`%L?0!S zR|sb)lz^lvv|mc=C7Ss__Y(YGT}RbY=3GDJCRE*;A!O2B}_G@&Ki5u9`-PkSYKU#!&WgLpaQtG z&4eB|3MRBwn7F#yMs&5>(ACyl)5KbfY}pmTWU`va&DoW*@+xLtWM;(D>`K-vnpw-Z z*@{*yFZBQv0j#gG8P)<;sD?)9g!3>6F-X8Th+P$rAKX>LzJZJ9&U7@p6V5~B7DJK8 zU0+$jnd)j?4XrJ0Vsn#VBixY3?Syd~uVXjn^c|SvchjH3oZlY$gi9Cb7nJ7>b-ZC{ zcL;AqJ5m-L1xu7SfoRV@+XRAR3xocD2MbhWSU{j7vFZLaBG6@(5%RGk7uF{+tlyvg zRKPG!VjO~=vJ3w!LVoiweHrwLuCFF`^vTv$GH_v|Hyf?t_Su@6eCuj*t=Q3;Jl{^d zUg^3#PSCd{;2x!B<{iS?_l+JfqG(@hFDUjlj@ne9+ue_V-dHVVbnTYG>w3Hdz|ud1ouZheuu;%{&WrR;_=tc_ zc$GQM%n{aIcu4ARi3USa3M%CzX&3i}>E=nnAd3bxB8MjA%@NtJd8Bwec8gbKO$!YN kR8EzpxG!iJifJn64@ERN&S}Ass8=;aLaLUoFJg=T0>eNDWdHyG delta 450 zcmexhutJMXLzID`M`R+K8H>}r2&;(>`SoQC3=D68I4n6gvEYJ;#3Zb8$c>18V?~5Xs3;PGnri#0TW3 z0Qo$*i4_G5Gq_&^`5=oF@)C1XxA2vI1M)!@tSrbcE?Im?H4$jH4N%^%peVKAZZ>l( z&?o^QznX!OS#xp^qdg<@8>i_@$&thIU`5K43?;?;|6u=5n&kPI><^@1J187(%RDJ=&9Y#Jz zBd`uuhD-)#us9Qt6ksR@k}{jaI4?8lumZI(F)}l - - - - + + + + + + + \ No newline at end of file diff --git a/couchpotato/static/fonts/icons.ttf b/couchpotato/static/fonts/icons.ttf index 678c342befe6dc638d67d3b44b3eefd1fe177ab1..0316d9f5c22c6d29cfa891d24f14f95b9c7c7149 100644 GIT binary patch delta 1309 zcmb7EUr1A76hG(Q?e4mX+nnBOQFH2=iY&{&5BA4MNF?yVlET2Q^KLUYw|1{(f8a_H z^ha>wLlQj*K@cQS3w-H8s3$3q5_+lk1^HHi4{n{ijWz#)eQ?hA{m$?Aoe$3WzHh32 zwNV2EfD)Jl7B2VpH8!27>wZp=pJe^MuoPVp_bmco7g>+*n(CrB4a+xjW`8sgz8{ZY zB%CCR1|%g)aT~2yY32i=8~)F82@ZgX0~jZRvNUXnT>V89X`n3_lr_opnC+$j8MuRC zbz=W3S^*y-=L$u9lCjg^COk#BG%QU-VWGH`@Vw5CNn!bI$@m|_OLWMKXhc!#g%QeS z(f0?UF**8ul)VQaULbr6knP7f7=dSQGVdrdHIq7u-0TrNgiu|5t>3eluMPy07VVZCju0oh1W(nciet!|ky(Rk_wx zWm~bWH95YWc)ij!Ijqs$5^$GNGs`Yv<42|kj3_!c+6#)kg`+kVDED5=o}G%hsZRRG zK{oX4%-2EdvEN`}=@S50S$sL1o$s{J8@j?KXPw4MDXD8W4PMvdc>tC^5O$tyj?7L* z@oX;AyWs-@HsK}aFtbEh&%#4oe@iqNG8-u5>kC=iN80Op7f^Xa zjLAATZ-S-g0Hh1iCoedasAGt`n2KVis&A#!lgP6GepBVPiFyEe$}3V6%dxNO(^UYP zMnpA*M}3V|j{v@R^jkDdS>uJntQ$b6N1%@NNbV=I>_}L38aC5#f{`*eV=5o1Nc93Zm zEBX)fcl3<^5WISZw_#bt9u6D*v$F6+BofJY2oT51dqEKaurZgp7vdeQ7qEpAMtnpN iZN+ioN!2c}6>iCzFKRe;Q9_A14cxMfMR0HZtoR3WbY!dm diff --git a/couchpotato/static/fonts/icons.woff b/couchpotato/static/fonts/icons.woff index 2c0aba1936a88729c1af0fe8d5d1e1703641c1de..128e0863b03f9b8716561557dc01c3a37e644a6c 100644 GIT binary patch delta 1374 zcmYL}do~qfdea`cFpUYp*b61SJwS1d+=mvb0eNiNJ-=kA(Z)%Rl-%*~7JI)Z?i>ORU< z0LK#1jSXF}+bDLe?;u0nL*t4)|4LxJ{=$}!!M8bMl6?Wyl%$)9M@{v*`qXj}YSv9Y z#G58f+XF~&3*ez1ZDpGiNRtrW&jiw@1$F zI1Nf>B@5m??m8zM^Pp|y%VGCdlrT$}l@(dsoGqbSXC+>Q<` zFZXFnC|um!5OU~6@qSI-x%>7w)Z=~oO26*DG10bV`4QpqL0FY4LMv+N7n^bv;X#I# z$5w;xUUoVKy*JygpPFW`6xihC8LfbRNz0~lMK!OunA@LF0%q`lddIEdIp@(iEuv^bSm=F}v_E^uuPT1W6IzO; z-eu(?0k)eu+)}(-(=9g0kzCgI+&uBvxUY!(k}V#h`Fci=yKS)dL|n7I`PmoIbW~c~37D%PEx>$j+8sK*arRncmdiviLLEzwRk&a{t(^CHItSL+3pgzm(By zdovE))wh&;P)>-^^?tOK3Su)asM1#yY|9IBe6z;dJ;l$mZK-&LIgo$5LNfp#eTLH| zW-uE44qdpI!|evLvuGPc8L{xm?4GqpE{`d2P=kcV5l;>>%AmDPAmX za(nhyvv3S&?WH20A|6`z3mC(t%zo?aUCQ%cX65*|4)86~LtBkZy%Y6c_a?iv4uq!u zNS3d6TaVSBch<*2e z-NwpB;Ja6|GGEJsjFdEX!SukT5tQ_M%5}0NTg-2FOLY8Y#P_O9Gw#8>*Q zAiubTfq@(3Fk2w@TYN}0v7jgwsG0i&kPpxwT?Waze_rl*!(V8lq`@zvdqm zIC|!^0k6gxj!Dc6XQa7hCU-C@N*etC&mZ)miP6Q|!09S8qq6kj4t9ogIkt_P4>7J` ztxpX+pDpYtF*m=gJZ;n6H-2yb8D#q0-g;MLa!#tR`K6W}E?ROt$Ar3AK89QhSkloU zaw~Xmn}Vy;$7MhGJ320SJJ@)BQ2EC=&-N#~MEZ6)mgmj+&(7N1OTO1`;B>h>C_G5e zx%PD>VzV`Seb#BB6QVpzB>d3H#9)9!k;h80RX?o}Ps4tUh{E_4;|imL1f z&WU@4?lo-q_5D-S28D(dQY_z?Zupt<%!xR|!1%c#JDNSZ;`d9lClYU08yBy3F}#)O z6+JVj>(rl)%$j>Uy)Aa8p5}@U<-N9;CuHgQlJuu@PDhDv)>Jzy7s%T)=WZBJ)$J)y zXU%&RC@Oc&s(xtO)>b*CZFP}J**w3&O*l_& zcf>L&)7#HOnm4wrx^spzOIuN?W%=co^S(rRb^n>>Qa4jlN%iMXhffz63_N9Srd~hJ zYuPV5*~+Z$Uy;$I_WNuPrkS1jcrNkx68VR}7C*dw@bT+Q&u%n5uD>g6^Q*{1zFZJm1Zqq~%|+x+59Q;pw6CQbg@gxmfDNUl;dH@H^?DCH|Z#dPddMf|vUb z?~`}sU&O&ycV*9gpKmPwi}E(#?EUxFNiK>1#pC3M4)<0wI9bn|$JpolIKPv#egBt+ z>U%e5KL5D-5Bu}@kHY7sd(XG8pE}L*|H;~afBB7gGXF7vlT<Qe7l>`3<3)n?l8*oF&cq$Co4lH12b5d2}lYs6az__ z&0gFsjJC-MNev8oY;PK-Ha1S|oH%o0>%^&xEw(OEG1lKZW37ehMh(kmRn`4VW@xLM bu5~frxI$z9oJK~5J7L^U7#Jo?^JW47)!vq* 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 +}