From f4a486c47bcd98cbdf6be2a7b4f9d557fe7a8834 Mon Sep 17 00:00:00 2001 From: Ruud Date: Thu, 18 Dec 2014 13:31:12 +0100 Subject: [PATCH] Menu --- .../core/media/_base/search/static/search.js | 12 +- .../media/_base/search/static/search.scss | 143 +++++++-------- .../core/media/movie/_base/static/movie.scss | 57 ++---- .../notifications/core/static/notification.js | 2 +- couchpotato/static/fonts/config.json | 24 +++ couchpotato/static/fonts/icons.eot | Bin 6256 -> 7416 bytes couchpotato/static/fonts/icons.svg | 4 + couchpotato/static/fonts/icons.ttf | Bin 6100 -> 7260 bytes couchpotato/static/fonts/icons.woff | Bin 3460 -> 4372 bytes couchpotato/static/scripts/couchpotato.js | 2 +- couchpotato/static/style/fonts.scss | 17 +- couchpotato/static/style/main.scss | 170 +++++++++++++++++- couchpotato/static/style/mixins.scss | 7 +- 13 files changed, 290 insertions(+), 148 deletions(-) diff --git a/couchpotato/core/media/_base/search/static/search.js b/couchpotato/core/media/_base/search/static/search.js index 5fa24888..760155f4 100644 --- a/couchpotato/core/media/_base/search/static/search.js +++ b/couchpotato/core/media/_base/search/static/search.js @@ -9,6 +9,12 @@ var BlockSearch = new Class({ var focus_timer = 0; self.el = new Element('div.search_form').adopt( + new Element('a.icon-search', { + 'events': { + 'click': self.clear.bind(self), + 'touchend': self.clear.bind(self) + } + }), new Element('div.input').adopt( self.input = new Element('input', { 'placeholder': 'Search & add a new media', @@ -29,12 +35,6 @@ var BlockSearch = new Class({ }).delay(100); } } - }), - new Element('a.icon2', { - 'events': { - 'click': self.clear.bind(self), - 'touchend': self.clear.bind(self) - } }) ), self.result_container = new Element('div.results_container', { diff --git a/couchpotato/core/media/_base/search/static/search.scss b/couchpotato/core/media/_base/search/static/search.scss index def985fe..5084f380 100644 --- a/couchpotato/core/media/_base/search/static/search.scss +++ b/couchpotato/core/media/_base/search/static/search.scss @@ -1,101 +1,78 @@ +@import "couchpotato/static/style/mixins"; + .search_form { display: inline-block; - vertical-align: middle; - text-align: right; - transition: all .4s cubic-bezier(0.9,0,0.1,1); - z-index: 20; - border: 0 solid transparent; - border-bottom-width: 4px; -} - .search_form:hover { - border-color: #047792; - } + z-index: 200; + width: 44px; - @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 input { - border-radius: 0; - display: block; - border: 0; - background: none; - color: #FFF; - font-size: 25px; - height: 100%; - width: 100%; - opacity: 0; - padding: 0 40px 0 10px; - transition: all .4s ease-in-out .2s; - } - .search_form.focused .input input, - .search_form.shown .input input { - opacity: 1; - } - - .search_form input::-ms-clear { - width : 0; - height: 0; - } - - @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 { + a { position: absolute; - top: 0; - right: 0; - width: 44px; + z-index: 2; + top: 50%; + left: 0; height: 100%; cursor: pointer; - vertical-align: middle; text-align: center; - line-height: 66px; - font-size: 15px; color: #FFF; + font-size: 20px; + + @include translateY(-50%); + } - .search_form .input a:after { - content: "\e03e"; + .input { + position: relative; + height: 100%; + + &:before { + @include transform(rotate(45deg) translateY(-60%)); + content: ''; + display: block; + position: absolute; + height: 20px; + width: 20px; + background: $background_color; + left: 33px; + top: 50%; + z-index: 1; + opacity: 0; } - .search_form.shown.filled .input a:after { - content: "\e04e"; - } + input { + opacity: 0; + position: absolute; + top: 0; + left: 44px; + height: 100%; + width: 100%; + z-index: 1; + box-shadow: 0 0 4px rgba(0,0,0,.1); - @media all and (max-width: 480px) { - .search_form .input a { - line-height: 44px; + &::-ms-clear { + width : 0; + height: 0; } } + } + + &.focused, + &.shown { + border-color: #04bce6; + + .input { + width: 380px; + + &:before { + opacity: 1; + } + + input { + opacity: 1; + } + } + } + +} .search_form .results_container { text-align: left; diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index df6d216d..910dfbf7 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -6,7 +6,7 @@ } .page.movies_wanted, .page.movies_manage { - top: $header-height; + top: $header_height; padding: 0; } @@ -20,7 +20,7 @@ .movie { display: block; - border-top: 1px solid #f2f2f2; + border-top: 1px solid $theme_off; position: relative; cursor: pointer; @@ -146,14 +146,14 @@ .page.movie_details { - $gab-width: $header-width/3; + $gab-width: $header_width/3; .overlay { position: fixed; top: 0; bottom: 0; right: 0; - left: $header-width; + left: $header_width; background: rgba(0,0,0,.6); border-radius: 3px 0 0 3px; @@ -161,7 +161,7 @@ display: inline-block; text-align: center; font-size: 60px; - line-height: $header-height; + line-height: $header_height; color: #FFF; width: $gab-width; cursor: pointer; @@ -174,7 +174,7 @@ top: 0; bottom: 0; right: 0; - left: $header-width + $gab-width; + left: $header_width + $gab-width; background: $background_color; z-index: 200; border-radius: 3px 0 0 3px; @@ -183,7 +183,7 @@ margin: 0; padding: 0 $padding; font-size: 24px; - line-height: $header-height; + line-height: $header_height; color: rgba(0,0,0,.5); font-weight: 300; } @@ -207,10 +207,8 @@ .button { padding: 0 $padding/2; - line-height: $header-height; - font-size: 24px; + line-height: $header_height; color: rgba(0, 0, 0, 0.5); - cursor: pointer; } .counter, .more_menu, .actions { @@ -218,7 +216,7 @@ } .counter { - line-height: $header-height; + line-height: $header_height; } .actions { @@ -253,7 +251,7 @@ padding: $padding/2 $padding/2 $padding/2 $padding*1.5; background: $background_color; border: none; - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid $theme_off; } } @@ -270,7 +268,7 @@ cursor: default; &.active { - background: #f2f2f2; + background: $theme_off; } &.available { @@ -278,41 +276,16 @@ cursor: pointer; &:hover { - background: #f2f2f2; + background: $theme_off; } } } } } - .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; - } - } + .more_menu .wrapper { + width: 320px; + top: $header_height; } } diff --git a/couchpotato/core/notifications/core/static/notification.js b/couchpotato/core/notifications/core/static/notification.js index 96e96d58..2a67e78e 100644 --- a/couchpotato/core/notifications/core/static/notification.js +++ b/couchpotato/core/notifications/core/static/notification.js @@ -21,7 +21,7 @@ var NotificationBase = new Class({ App.addEvent('load', function(){ App.block.notification = new BlockMenu(self, { - 'button_class': 'icon2.eye-open', + 'button_class': 'icon-notifications', 'class': 'notification_menu', 'onOpen': self.markAsRead.bind(self) }); diff --git a/couchpotato/static/fonts/config.json b/couchpotato/static/fonts/config.json index 96dfc93a..2add417d 100644 --- a/couchpotato/static/fonts/config.json +++ b/couchpotato/static/fonts/config.json @@ -6,6 +6,24 @@ "units_per_em": 1000, "ascent": 850, "glyphs": [ + { + "uid": "48cc210e59ff4bc56b6c8fba6eb384b8", + "css": "emo-coffee", + "code": 59401, + "src": "fontelico" + }, + { + "uid": "078fec38562c3f83a1201a908040c141", + "css": "emo-sunglasses", + "code": 59402, + "src": "fontelico" + }, + { + "uid": "04688d76a33ce7a7950e40fae79c08ac", + "css": "emo-cry", + "code": 59400, + "src": "fontelico" + }, { "uid": "9dd9e835aebe1060ba7190ad2b2ed951", "css": "search", @@ -47,6 +65,12 @@ "css": "dots", "code": 59395, "src": "entypo" + }, + { + "uid": "51fb22f9ff9d7f60c95ef31e4c59502d", + "css": "notifications", + "code": 59399, + "src": "mfglabs" } ] } \ No newline at end of file diff --git a/couchpotato/static/fonts/icons.eot b/couchpotato/static/fonts/icons.eot index 69575550def9a2bb554f46d01524a705f92ad9d0..2dc6375d30c39f9aeb2ebea602619b1c9d506859 100644 GIT binary patch delta 1595 zcmYLJU2M}<6u!rH?D!{6>?Ah%X_Cfm()>0}Niv}cuS9xK@{i)Rq8Aoi9^C#&QusTJ{K#Gy*5 zJpQ$O>@PxW_)_Zg>U3=;^x(Npi2VlgpHz>ISATtzeuog>Z;0mz(AO8wK`$@RgKLM# z8}#7f3Uq<6BvV(}`r0KXOm~nCgk5r4AeB%$i*z#gq3u(yjJALJgD`!T! znLX!juI!uLmbZJl`{2WErzQsC@qvj`+xA?lYz+>@TL#}M;CB;d?fKf5^eF8l9@0*_ z$Oy6Z3A;CM%tX8bVNwYQ+bOmQT$*0*qKZ%`Lev~-$c0&s)q=okdH}WnQtea(!ki3x zJ`#;s!ggAQ02JK$UdZRNx*3L7BR7fxpo!A_Ug+uZCKabbscu=|yg%5z951_63SCJr z^mGFZ&x;_6LaSEaJFI8;f1V7z76^b#cDA`>!Sho8&R6`tmnZ$!NJ8a|w}+ZrhH0mz z7_(ZTFvWmZ_iZ(-BE~8X+1)1a##W#1WhM(stY}%i?dbiE7nb{_vtH2#LR*{61IO@g zpCGp$-|1HD5p8rat=d8;6sdD4)gkshdJs#{PPUT@IY&MsSBbOF@$tp?&!3(i-jUA) zJvPFbvYG1OdQlG)0ToF%X4D0V0OV1`Ae~#+qxpZQ-l6I4Am%iLaw4JA9jJa6RX1hM z7tG8;E?cB}pfeKfNQ1#?dJdCh;0z2$BSQk*X^0wW*jTW*bJ@HZYglBnjLk(ekGXBr ztr2yD$lDdx7gu|&eo2-kt13TxQaohXxM)IdDQ8590!PxI?8bhm-{@H@!6s#VAt`r?Q(5*hvEw1P>J2+H;A47_! zDbJ4S!JrN?JrL08K}qZ$OKA~FjvK5kJJ#vx)SPh}KU>JU>It9K*{(M860Ojoq!Le| zbKS>SK>W|Udd;IUtB;ZcO-;?fuvS-p%57wPCwv)IaUTFtQYwlLZbz`gX0ZS$4o6)7 zxv)=jxEz`U!E_KB6QKxM`-#3oJs>X9N37q}vu>VHW@%AoH#W1DFJNi08mKKDX6=BL zMeU6)2uH(ai_4&4+vAz*f~;9L{1eR1|Kr|$S+!iL^&N@DkMz|pTU2>L)~z7OvOPAn zITT`8kJr`alwHj&9G6V&I=4wP>~#$lZjn7)IY&=Ud24AdrO-DouS)J*4NE zgFfh6Ru~%|g zi2_g@2)OS639ht)^xTdK6C#297eHK)o>*J}6c+%puK;O|^qk7HOEWgJF)%PqU|?Wv z$Vg30VaYH20+a%(VKB=83b0RS_5kvMm_a2Yx1>TUem#)Mz>xza6ms&D6ImTtRDk>* zAYUjqv7&%sEsqe8zW^kkmzbNng|GA*kbeMZ$;yKK;u1}}`puMFJG zKrb;cT-d%Q1wuEO{Qvnsi}?jmj{vWj6iE92TObM4gaSAwJMb#VfQ3{TjxaJX8ZpK& u=`kGuihz`IFihAyh4(3wAP11o#K_FZ!pO?V#>mddF?o`J@#e1r%sc?bbzYAE diff --git a/couchpotato/static/fonts/icons.svg b/couchpotato/static/fonts/icons.svg index a139ac46..3d4b8671 100644 --- a/couchpotato/static/fonts/icons.svg +++ b/couchpotato/static/fonts/icons.svg @@ -13,6 +13,10 @@ + + + + \ No newline at end of file diff --git a/couchpotato/static/fonts/icons.ttf b/couchpotato/static/fonts/icons.ttf index 0316d9f5c22c6d29cfa891d24f14f95b9c7c7149..601028120fbcaa213c620aad0bfec0c5c7a44489 100644 GIT binary patch delta 1608 zcmYLJU2NM_6u!q!Y{zz-*oo~WX_GW=ljgT+(k1QIre!N)L!BnNbrq=6nssTr(X`pp z{gjENLSqc6LxmzXX{bm8P4EIjg%ycC@G!*d7=7Yr@Pf8Un?RaCLK`i|p$Oae9-r?! z$M*fs@m*{Cv9m^i5F(LzLX*+G``R*v*4=v%d4S`v$2 zVVwB!%0&6X;^On@R|pX*6U8c8;>2qNEjKYWH-6`=`x+tCA|bZxlcnNeRw5XTMV->V!iRepMrew7g4FX*2kKwpPNVkI2)5@kj# zyt&?P{PFVnk#5WWg_~=mb31bmPj?@@z4Pq&KrA*ees<^n%hNjoL$T(;m-Dy?V%d1I z@d+qR~|UY=NzaR@mmrV-qlUhAR?kS{>Q94W|#7?#ljz-YQ3 zwgXaaR2V|61bQwU30p%BS^_`h)m$&+vKieB!>gVf!2r+%asB}G^mr4pOQsZ6;#u$4 z4liqy+zN$I!V5j!0K@YF2m;@t)ea2nY1`kAhMx2L!7aI3-4gG4s(;Tj4Zf!*8n|#= zVU1UYnwp1cm$eY(ILJ?0z^nUq7@UByvQtu9d7H7rr+Y0Ec{y6JuHSa{ere-Z`^5`h z!47Qa zHVLDgW*Ct|f_55*E-4-WXliU6h~IU)bXRPpf)*D|V&P-baSW)+)R%jL1O zSPj&c4lxeE%A)p07la}qv&ALQunO-W=3@O(n{3^POH*91!{W!teS|O=M&H@wo5@We zkbw~@MSVp*pyw?oEk7V2eBJu`b` s{K!~w_Q=e1l`WNLl4Hl`_`01LA1{?8^R{|odSa?rt(K}Q-wL$&5ACEQIRF3v delta 438 zcmca(aYetLfsuiMfsdhqftew}KUm+$PQzmvP~;5|hb8AG7F-aQ+|Izj=mNxE$z>%9 zKye`8z5^t<(hAaZJ0?ts1oB@1aY1@waRE?V0LZ=qq&d=aD$_2_*v!Vjz%+q@fwdtc zH8F)HzwirC3aEy`EF&YeK9PMovj3qbODiMgp;_)5P4`3HcOtSrbcF3}Xr1e(PS(w|;Xlv;2%o4J*N zK|BJ;uV!Fm4r83az{IhDAF_WpCKn3bI|`RhA3v<$rg;3jBJ~W7#FccfWjqd zvHSISew(ih+{{4#F)&=%z9t1iH<|qZ`9F*K1v4*@&%wY15(NUF9;jJB_5a@jb%8<` z8E{Nq!lNJq7Exh1!pOjA#2CY*$8-QF0#eGsFk$l#o~KNL96&x3BQqllBP$~tBReC< Nwh7U$6iG diff --git a/couchpotato/static/fonts/icons.woff b/couchpotato/static/fonts/icons.woff index 128e0863b03f9b8716561557dc01c3a37e644a6c..4debfbc1f1920cabd735e2ff964d19d8a5b7da2d 100644 GIT binary patch delta 2333 zcmXX{c{J4h8~x70WE)0OGKtVnOd83W5RxU?m(bXkVy20hv5qBsNE8)$QnirGdd{V6=5a9D=|6@CvJ1?M$v~M6YQjNhGSpyBsyk zLP;TjKUaCy|Gweu>>1%K!l}LIT=C^px9(YA*^d9fGw7WTRvmr_YJ=QoDNwMs|}V^S4^NjchSzKsDna4IU{!GxXR zoCVaRIM#w{%~51nWI;7AJYg;|4nTC$xGkh)bP}Qb(vy)0G4c&bltfQ{k^7g&$v4o9 z0}Y*vITvPj7i$!mYMZ0R5fg|3dQ!v5uclU%2%}c~z%^$mPl45uXz#rKy<+pqyq`Iw zyq2PClrkFA=7w^~&z!*4&3`?_d7q#jkaEy>1~2tKBvw)0bw258$;b$V7<@dA~& zP}8#)^B_DLHyPLzjCr+@S^UYk7cSX64%sxm*WSEESPiwF>=;j<_Thq=ZiWx{+(il! zI*^zvh){%l!4NImyDAvFHI3qGN}cx zs*OC%8kL5fbvHk(x;h!91?@un>pI}Zd4|VV;4W=uHig`|x%StBf<2}mA1N;j|0pl= zpcX!PM+etpCwqbVvp27=H8J+(;1|l3Z}6NAdTXC{%v_(tM^hz_50?+kC>mU!M{%)~ zRa8uWGg$`%hgjyM9pNDRtVXl zgxT_Pq)OPvSCYyndJ>cLIW8$5H}z(;S{8qYIe%tHWux4*c4vdSexZJJ?jfad=IZz| z7i((kw=GM!(wF|cE?ic-OhJ*4W;xV11Gu|lpoFH z4pQav&?0L%a-tc-GsFoSVb>qlRIsbq9k_acrumbeypAo!FROHMdhbxYZf9W(ye37@ zA5{EUI~+@l_Hqp$y>shNiPU|q6}M3;MO3oNO@loYO*h#0a9njDha++-mu=XeI$4j# zT9#;vB!6)_Dc|e%J&&dGz@`a_U;CD;5^1Gu0`3s^p6cx9a#kW;c|JkescW@Qkq#Yb z^cF65`8{Mj7*1T6mZbF7w>4E&rd~MDJeS^kj2y<^?vHW3?XteT{jm6#{|8uO-E>I> zPJbchOD&##U#qQ3Dxq!ZNyvcBU=k#Cjq z%vP+CW$jr@D+P@>U0XE{#a#_k3bP!p3qjj6BifE3EPP*b1-Gc419YZtKg< zoVFJ8*5|B7*mj+6wOqwz4-tDG=u5j``3$A+-yX423yf4VJx{T$+QslmW1F<$+*5Pw zH9Lcr_RzjG6h#*zD-&+76#ERfhF9cH2``?LniP^23Q#{C7VV_}r@2MaJ;(RH+;{wB zAgywozV;>ana0|%=jqHV0!Mv>eWGs}hY0>7){jdn62IU0r;tzW(_5-OJ2E{P(UD3j z6q`7~*jjnE_O@xIB34~x4v&=6J*R<-5!h_y+)w}pV<>lfS(R{2Beac6ne^E5_*4!T za6N)8Q+`3tADBQ)9Yl|4aXlfFjPQoasXP<7 z1dNm=&hx)^i=4g|iTrRA8Emq2Z}mJob@bS197UbpJP;Ps5aJ6_+E7T2_LLJn6C=#s zemJ=Kq1`S~MJP5T|DZ-|>3IJT-@2+dopUmKzkT=kkreWR<4j@Cq-BmjQ~21Fbu??X z9^27VegOuH%D56F`Gz%(ICVO6w8I&g8JuGo03sYXl)!m- z9fNVCjln>3HSk1`)A@K1s-9`EuXVhh;i+8F#nGi}-4>AhNtKB0!!$@Fr9ar*1m^3}1NjKE0Ocu{f<9<&3 zk3o?H0?8NSY}baSB2;+E%?d(o%8dixk7RVv<>wx{8W)Eo6m~h@dr}#|^bCmU7qh;n wnD33T4*BM8v~aA`s8g?NX%3euXl)45Ok9zMgX!Q$mdEReCuCgHPx9gZ1q&ZWYXATM delta 1387 zcmYL}dpOg39LK-Ay3B^T=Ndb?)T13jrXxwSm${d}I!>vQ|-^C>pY)KyRPB$ELQK!(i(xHYde zSfFm9PPq{t6UqbtmJJ~ihtX(Zw1`7|MYt%)M_VtL_$MtKw^$)i5%da)ShHUF zLIijA$)ng?$-c7`#uRsM^n1eV zB^4v76C#9cYphI7O|cCAjB0XXx>-$5usw?1*@Bd*lNSt=4VDU9>9abH{o-lyoM#tV zXQ@a-jLB3zJpN*8i<-{Ow7jg4>+)SvJu0hIoB61I;~N!>yd>RW3p${*)T<>fe||$< z@cx&Ddo{Ud9@ybfPxkC7{zDDdV~yZ>~iFLE$HM# z16OQD9$k@jAn`u)=ERSlbA2|aBvLDS*EiCP>E@xkcJOTt&2f>^F@ul%B)Db8!}G(o z#|kA=HJ3sNFO{hkZ3)Se-r!c!BirQn?~>r_J^Dg;3fu>G&!G#X*>lqv_6()S@l(sD z4<5xL8L8YH+1|7R2su|4JsMh@<_{75YM!CS_l{IAkdrD6x9>XtwZ!9kcdE}leG8c@ z>8J=@>q}iK(`e)dmU|0>Y`B3AZ&z45CwS>LO=Yh!KDl?wH2qZ~PiA(A7>s(q1IU0V z?Q@kY)AFRWXV*doEbwXU;|o0^4#)8PuyVg|PRn!pwrg2m>?J!$h4aM?F3>R;a zx+}>hH1@Ch`j6m}roXp$FXZ?wvabSFAB_k|??N|db%EQhjO z{5}Wf26c2^qfWvDytw{eIa7uQl?)DgC25p#Wq!ymUb21S=L&1~gADO}?dyI{%G)53 zzT;J#b+NB>|ww3#Uy$0}p#-7gWAx1kecsFe_LP+!D@*;?ScbR`M_jeCgzNI>u8zFqHb~Dhf@~j grX#uAADT;E<#Fz88@|!D&n8t_gN1)rRIL*IFY}i|#sB~S diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js index 97565371..5431db74 100644 --- a/couchpotato/static/scripts/couchpotato.js +++ b/couchpotato/static/scripts/couchpotato.js @@ -79,7 +79,7 @@ $(self.block.header).addClass('header').adopt( self.block.navigation = new BlockHeader(self, {}), self.block.search = new BlockSearch(self, {}), - self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'}) + self.block.more = new BlockMenu(self, {'button_class': 'icon-settings'}) ), self.content = new Element('div.content').adopt( self.pages_container = new Element('div.pages'), diff --git a/couchpotato/static/style/fonts.scss b/couchpotato/static/style/fonts.scss index ff4300a6..50717f50 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?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'); + src: url('../fonts/icons.eot?74719534'); + src: url('../fonts/icons.eot?74719534#iefix') format('embedded-opentype'), + url('../fonts/icons.woff?74719534') format('woff'), + url('../fonts/icons.ttf?74719534') format('truetype'), + url('../fonts/icons.svg?74719534#icons') format('svg'); font-weight: normal; font-style: normal; } @@ -15,6 +15,9 @@ font-style: normal; font-weight: normal; speak: none; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .icon-left-arrow:before { content: '\e800'; } .icon-settings:before { content: '\e801'; } @@ -23,6 +26,10 @@ .icon-filter:before { content: '\e804'; } .icon-thumb:before { content: '\e805'; } .icon-list:before { content: '\e806'; } +.icon-notifications:before { content: '\e807'; } +.icon-emo-cry:before { content: '\e808'; } +.icon-emo-coffee:before { content: '\e809'; } +.icon-emo-sunglasses:before { content: '\e80a'; } @font-face { font-family: 'OpenSans'; diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss index 6111ee48..e933b4e1 100644 --- a/couchpotato/static/style/main.scss +++ b/couchpotato/static/style/main.scss @@ -25,11 +25,16 @@ a { input, textarea, select { font-size: 1em; font-weight: 300; + padding: $padding/2; + background: $background_color; + border: 1px solid #f2f2f2; } +/* Header */ .header { - width: $header-width; - min-width: $header-width; + width: $header_width; + min-width: $header_width; + position: relative; a { color: #FFF; @@ -39,6 +44,7 @@ input, textarea, select { .navigation { .logo { + opacity: .05; background: $couch_color; display: block; text-align: center; @@ -46,8 +52,8 @@ input, textarea, select { font-family: Lobster, serif; color: #FFF; font-size: 38px; - line-height: $header-height; - height: $header-height; + line-height: $header_height; + height: $header_height; span:nth-child(odd){ display: block; @@ -69,8 +75,80 @@ input, textarea, select { } } + + + .menu, .search_form, .notification_menu { + position: absolute; + bottom: $padding / 3; + width: 44px; + height: 44px; + + > a { + display: inline-block; + height: 100%; + width: 100%; + text-align: center; + line-height: 44px; + } + } + + .notification_menu { + left: 50%; + @include translateX(-50%); + + .button:before { + font-size: 20px; + top: -2px; + } + + ul { + min-height: 60px; + max-height: 300px; + overflow: auto; + + &:empty:after { + content: 'No notifications (yet)'; + text-align: center; + width: 100%; + position: absolute; + padding: 18px 0; + font-size: 15px; + font-style: italic; + opacity: .4; + } + + &:empty:before { + content: '\e808'; + font-family: "icons"; + } + } + } + + .menu { + left: $padding / 3; + + .button:before { + font-size: 20px; + top: -2px; + } + } + + .search_form { + right: $padding / 3; + } + + .more_menu { + + .wrapper { + bottom: 0; + left: 44px; + right: auto; + } + + } } +/* Content */ .content { @include flex(1 auto); @@ -98,6 +176,7 @@ input, textarea, select { } } +/* Page */ .page { position: absolute; top: 0; @@ -116,8 +195,8 @@ input, textarea, select { @include flexbox(); position: fixed; top: 0; - height: $header-height; - left: $header-width; + height: $header_height; + left: $header_width; right: 0; background: $background_color; border-radius: 3px 0 0 3px; @@ -132,7 +211,7 @@ input, textarea, select { a { font-size: 24px; - line-height: $header-height; + line-height: $header_height; padding: $padding; color: rgba(0,0,0,.5); } @@ -147,8 +226,85 @@ input, textarea, select { } +/* Page levels */ @for $i from 1 through 4 { .level_#{$i} { z-index: #{$i * 10}; } } + + +/* Menu basis */ +.more_menu { + position: relative; + line-height: 1em; + + .button { + font-size: 24px; + cursor: pointer; + display: inline-block; + + &:before { + position: relative; + } + } + + .wrapper { + display: none; + position: absolute; + width: 320px; + right: 0; + background: $background_color; + z-index: 5000; + + &:before { + @include transform(rotate(45deg) translateY(-60%)); + content: ''; + display: block; + position: absolute; + height: 20px; + width: 20px; + background: $background_color; + left: -10px; + bottom: 2px; + z-index: 1; + opacity: 0; + } + + ul { + position: relative; + z-index: 2; + overflow: hidden; + } + + li { + display: block; + line-height: 1em; + + a { + display: block; + color: $text_color; + padding: $padding/4 $padding/2; + } + + &:first-child a { + padding-top: $padding/2; + } + + &:last-child a { + padding-bottom: $padding/2; + } + } + } + + &.show { + + .wrapper { + display: block; + + &:before { + opacity: 1; + } + } + } +} \ No newline at end of file diff --git a/couchpotato/static/style/mixins.scss b/couchpotato/static/style/mixins.scss index 54f0d203..a139ec98 100644 --- a/couchpotato/static/style/mixins.scss +++ b/couchpotato/static/style/mixins.scss @@ -1,10 +1,11 @@ $couch_color: #ac0000; $background_color: #FFF; $menu_color: #111; -$theme_off: #f2f2f2; +$theme_off: #eaeaea; +$text_color: #000; -$header-height: 80px; -$header-width: 130px; +$header_height: 80px; +$header_width: 132px; $padding: 20px; @import "susy";