From b7e6aa008aa2b3d616c7a45ecabc1c66251f5daa Mon Sep 17 00:00:00 2001 From: Paradox Date: Thu, 14 Jul 2011 13:31:51 -0700 Subject: [PATCH] Options expandos on links, cleaned up old parts of CSS, added icons --- r2/r2/public/static/compact/domain.png | Bin 0 -> 937 bytes r2/r2/public/static/compact/email.png | Bin 0 -> 675 bytes .../public/static/compact/options-active.png | Bin 0 -> 1561 bytes r2/r2/public/static/compact/options.png | Bin 0 -> 1326 bytes r2/r2/public/static/compact/report.png | Bin 0 -> 779 bytes r2/r2/public/static/compact/save.png | Bin 0 -> 488 bytes .../public/static/compact/selftext-active.png | Bin 0 -> 1479 bytes r2/r2/public/static/compact/selftext.png | Bin 0 -> 1237 bytes r2/r2/public/static/compact/unsave.png | Bin 0 -> 730 bytes r2/r2/public/static/css/compact.scss | 297 +++++++----------- r2/r2/public/static/js/compact.js | 194 ++++++------ r2/r2/templates/link.compact | 52 ++- 12 files changed, 258 insertions(+), 285 deletions(-) create mode 100644 r2/r2/public/static/compact/domain.png create mode 100644 r2/r2/public/static/compact/email.png create mode 100644 r2/r2/public/static/compact/options-active.png create mode 100644 r2/r2/public/static/compact/options.png create mode 100644 r2/r2/public/static/compact/report.png create mode 100644 r2/r2/public/static/compact/save.png create mode 100644 r2/r2/public/static/compact/selftext-active.png create mode 100644 r2/r2/public/static/compact/selftext.png create mode 100644 r2/r2/public/static/compact/unsave.png diff --git a/r2/r2/public/static/compact/domain.png b/r2/r2/public/static/compact/domain.png new file mode 100644 index 0000000000000000000000000000000000000000..43f3c368ed57b8b8e5ca05de035a5fd7ec1c7a99 GIT binary patch literal 937 zcmV;a16KTrP)OUQ5@HljR@hK7cMTU%Qx(x#ye z+Tt26H^;%d<>lq*_4PIR7vLIP+s=Vub8|CQtJTPDfNR-E#1528OH0w)l2af@y?!?x zjE|3-s?{n%TwPs-pnrdGaPW=Fc*x~)Md%j*CRUDIVh0MR)0wJNDkPiD7NJ+65PB2J zwzs!GrPJv$j#(rUiG3RV?(XggI4qzXxsbErV03i!MY&ui2*2MSV~Y|FhxIEfDGU7SZt+Ii6DZ(V4gV*ll}eu=13$`qI!yW zJbsA%(a}*n6bj{FyZ{k|s2({R4%}|Hr&uf!3WvjiAx_TC%|&*0c7Cxs22%hXU_YPF zXTe@QHa2EDK0eN)9!}Jkh69(&jgawj|WfYJ`FPlb?>A>CswTe<3uh;9paaD*v zxV5!470Mv&nnIzFvAVszy~ohK0R-?q>g??Fot~b~!uSE@k;~;3>^tzMySuyTg;giN z2Y3c21nVQ2pPwJx*w|QHfJW_RW@bi|O646om&s&58#|9iqejRh;Q`Wt`F(=6FrSUZ zVi~IQ`Fs&dcz%9fW!E7ma{q~-x3~8*PIyqO)ryIUiMMFi)z$U&y0gYCx6`IwFfsK-LBcKiL8Ez!)b}k6Qy7U@2W>(TqZMAq@TiQ53Wke}K^cAi7g`7DX3|Vi0T>-4ujE3o?r`0in_^+_fq* zzVXrTNE0%e(wRDLN&`2^ckemp=DRn!k+0Wl*&z>w?7+vt6CB|rm&Aojc zMEQ??IZivB&ZEU*;qLeQhJBQEI^B=ua`~O2s8h16%aA3L$-Jg%`kdpqcdONEy^lcy zTF`{{rUxdI$gwK3k_&NQ)n^|NG6jH=JPoni^W({uFLBR0}Bqg z(BS<$31Gos@Se-%I`RAcA7`^!_fO)$01FPd;+XIjVL|FAG|K68YK=xC?RLA*8;!<= zTCJv}8aka$IgiIPN~hDb&1TbxHGaDT-mF%uhGkiMu~>Z7?RM+iarh7e23RSLD+!Q& z+f*vmq*N-sj7Fn2QrjBu$31+A0VBoTDbe;!BA|;x&BocX6 zsZDJkFTSW{r5;SWEeU1qa;i5?yIB$=vpOy(6;a=N5}abKUO%Sa86F z#!iz7;Ok^E;lknYxLhtjzKOUv3AoUJ7Bn}56v4q@V9(`p_kBKJUa3^x*=N|1L3ddw z6#Rie;G0&fJ=-L}xF$`qleqSl#`Qq2*Pm^)|Nk=o{RBS+7yv~y;(3O8$MOIG002ov JPDHLkV1lhWLKFZ1 literal 0 HcmV?d00001 diff --git a/r2/r2/public/static/compact/options-active.png b/r2/r2/public/static/compact/options-active.png new file mode 100644 index 0000000000000000000000000000000000000000..9fcee548b00c0aead4469a75f100f761003cde75 GIT binary patch literal 1561 zcmV+!2Il#RP)VAs0Sg$tubCqTnmxO*N-v7d;*NY@?(IS@Dv$&7scNNyAkY7U} z5P+ikAj>kCoqy{R!WFEJg}jldra!>9Wp zD=KkHLLSaqR|pfE#RBr#6(o{r6kH`k-JL{k)VP{}&#A5%YHy1o6lsGV3_(@3RcjxC zSXk{kuuZbn=M!@mmy;n=@_kDxudR*ov6i5YK&XWz3{59DleLXV&HIyZvR=sKU<|&^ zyXqG}?zV-u=$Wh!liL$n=jhtx>LpD*M1;CO08P{3*>mSn^!Gth zd~gY?jLUA1MMJF>S1Z&gm_#O53GHIr#>tbXpzFE-92^`(JRYx*mfPEd$I;o@S$XF< z=PzC-S8H&qFa?L;B4^Zug~&LI%cANbT)Vkc*&-}kwrr_+Z`8+gcy2Y8h^N+~hj5|%7AA(l$S z9yzcyaS25u301OT9@qv)_m1r0i8v+~(v^jc%_U${NcwxbysefuaQEsjuv`UNxD~OU z0~K7Up~Vur8iJHTUwQGch#MzQkMb^~w+jK?Q|*q*xHC77wyitGdt&~E=qraJ zSFrHM$U>Ee%E?vZ=`|LYR#t7z(#)8+VZ>EOGB7ZJuCR;AzkU?L&)ioYXI-9CjUlg> z)ukIs2*-otT*w*dY>`F6R392gjvNtEb0d`+>++mJAqzba7Fdn0Rk@bfg(9J1wN8h7 z|1-6=B8CaG{hk-?4Tq-%j-FaHl<>^FC<}-or z^PE*M9nrUvw{YcFvP#d}VlEd1gekBckE>$wn@0~_AzxUDw1HwF50fefz985dNh+V= zt1`EkMw*UB7Jgnk?rn9hy=)>Z3QWc(FjH`qEvCzPxo>y($j#fcPsgGuXjBAn7HYaC zst|7vu2!40#YvJ4t4oj26$>v?&6P0>7%OSSmkm7mc=sqNEZ1c9=~FL#{q9F+KbxGn z7vv0N_xP#GRH@2T6#0>AE_ShHdR1ncj!wcv-d3{AQMa99(eT+%&YXPVgRj1Sd31Uq z))h;mqrFumiA-0h*oO}y7e!v#+9H-yY0NLKAZsbPk59kx6LU1ItEm=>(cgz(e)rpR zfBrqTSC(9rGgENlAuSfQHDIy3UCG+FXZ!fjJIAgD{n`*mY28m4TEGb|EXHmwwBNax zP&e}ZvaO@d>fO<`M2|m{e8X4yLw`Hb0=nsM(?-9YNM@T2{wKfy;osZkd>GPY00000 LNkvXXu0mjf0zL2* literal 0 HcmV?d00001 diff --git a/r2/r2/public/static/compact/options.png b/r2/r2/public/static/compact/options.png new file mode 100644 index 0000000000000000000000000000000000000000..f9d5fc6b4cfb87ee0268041c0eb4f0799984b2d0 GIT binary patch literal 1326 zcmV+}1=0G6P)tDbI6EGB0 zehS11`GHCla9b$?(Vs)p7Ac4xdZ^SNsZvo0_a1wxS}9eIt$HX`s~oB#wMx}Qs?s!6 zf{-``H8=qi!WwK-Y>fZF_U`u0bG_KRYfQ~bqn$Tz=6y5sX6L4vM&r(ARxu zJ6>^icR-ER0)kLlxGI$jV(|prntK2@XaAldqG1B=RRY!#-9KJ(cJ=gj9fweK7t$Pm zr2S_!YA~DhaA*D@{Ce9pOM-ZTfG2TIo#Ww$&TdD~$&MEAhhmUSalrG!kqFoLCmaVy zTQfMj96bc%Bc(llx5-`)(cNUxNZ5z>ArkaczQSq)d&k)W_2YXfXlks7X_xyQGW;wT zxW=g0bsCLE>S?j(nT8r@aduOFWtD}*A#8AMy-wRn3eHN>9i+f^o3$~vn^FXg?}WfT zd!6zvr}}Ax{bxF%va*uOEEWs=zOX?vu(I$cl^yRH0+YE)4sOsxRfVaEuo+-;nZby_ zoCKIlCn5CM1ry^J>3C{t3Or91;kD;KAk{92z#iB4Pw4+G-_N&3Y;R};^^oo==FL!9vK+{pU)?PW}lJa^H5h;CyvqPmziZ!y4pNFG()Vs zswQHRYCexNIs-gf4^yBl*=)AFv62jJ&{n!0V#ul*MV!JOdp5$*ZnuI-pYcAG=HbCw z5SG@r>A3BwN;uJI1udf%D;RAAm0Grzpx81csb=SI!EQ7J8sOku=X+q#TB!W~GAW`! zRMc~`A=)0FZMV_!UOWnqrhg<>8ZeYsf&KK0ipT{ce)(J<-8U?r%>HENmV6OeBq-}{ ztEIfzY=()62?&S7v>yK26pBPl#2mlhBHP>B>6_>C+a|{=w^6BHMMVXrd;Vp`WUF&4 z4kONz$F~DP(yyh36kK!X=^>#^rblcS+3h?%K`3x6=B9dj(J%6^Ki33hhKy=!H3Lhm z8_H{2GKX$p1=@~j#jS|#reSJkwP+_R7;%=iy>3V*BH|}8FfahERt@;?{Y(jYlx62p z7j2Z*DiES3f?2&Udl1Ra|yIx9C;H(^VP#0~`R-S5s zVu`6f(b}-Nu)MB#I&DRgFnQCHCqsbp|B5Y2iV5x3gK@Ze`*G2G7-ESLUl{6Pd7fK| zMq`J%S94p9g kmX&y)$LPX^CjS*+047rI{NtvcnE(I)07*qoM6N<$f;!N13jhEB literal 0 HcmV?d00001 diff --git a/r2/r2/public/static/compact/report.png b/r2/r2/public/static/compact/report.png new file mode 100644 index 0000000000000000000000000000000000000000..6119b822cc825a89f911e15fcb8c17bf01e5bc8e GIT binary patch literal 779 zcmV+m1N8ifP)_SRRv#o2y7kj+Uxb!)9G}F2&`JIvfJC+CmN0B(`*ysoDu@Jj7H<e)jL$BB4a1*fR>E8;dtX69d7xE<2>9h;amjD;Q3U~&{(n5(u;*9?iSpkE=;A=D* zV<1IhQmIr}i^XzRq&KQiC{*C{5PrYEihfyva5!A&IF8Wpcs!+9Pkx(Dr+Z#5msvWm z)9G+f+J|xi)^@wiU0hrc8t5~d%?I?!ipS$;!aM{t{!mgN7z{=ylL-++sZ?Tt_%R*; zpU+p7%FE~TeMy02GWlUV9uq0-@9%%J+wJe66l1wOnsZU?{LU;V?CR#`=1sj`e`jfF z=?mmd=~%ztH!m+QU;pDM&}x}X=I#0UIYD441gRUbSnL#x(`vOlLZ02--9vt@WQmH! zqK{=+f^a&WG5SclT&_GHOQljB!RS~=AI9qS`VUEg;c&jR;!Kq z7{cv#QWbw3)7p7K5(tyYUK)r&%*z)~@W z=2Xx#2&XADi-Gf8hDKh49Ze&V$Vng&xFI%Xv)ODHpEjFq1)rnQD7v<`_Gpe%D1ZiY z$b)_Rm$?t~sHjvbx72ENm*y1x;Xu+JBt3xnGIwcYkb}+rA{TOregSWAp_thi_DF2} z81QO!b#+hbha)RM31N+I&#*EhJ_h3NV)>E+|K(5r$_0K3FaXPUanwS>-24Cl002ov JPDHLkV1kW|ZR7v| literal 0 HcmV?d00001 diff --git a/r2/r2/public/static/compact/save.png b/r2/r2/public/static/compact/save.png new file mode 100644 index 0000000000000000000000000000000000000000..fdce50ed33e1a19344f0ee1a9e7175afba321cce GIT binary patch literal 488 zcmVP)kL5tI!A&wzLf5TC`Ri4o)jA}nwa6%}pH%*>RxwYBBtp8iDF_(@5~)NRWg#ebWaYj2aEkgm_7eKIjXHl6ZRqgjf)@n@1Z$%y=eh{s4y$*_C%u!2Y=0!a=* z6h$z0c0G^~9%pr37p`NYUaz5CZNP$Dq2XtV{OoeXQNo^61V>LL;s|R|gw!xZNhVH# z%gVgz6Zih#U?#cTog}qR9 zcelpHWP!(`Zuqd%Q^G6;1d8jjB|&;wIqLS9PZQh3ecEc&Ga zzpvFS)b;U|hn%olxGe0cgx(VnOVnsGiA-#hCE~ugii7(PHi>IE_U$RCJ%cMFZo}jp zoU1drnjsPcX|=U!jjv7CR8>Vf7Dlyg+-X!$nY+S!)~?0cZQCZR{3H;Y$>27s*zo8e53@0U16O|i#@~lY*7hX=o#`_taeL}Kwr?K6 zma!)SopvmS-OhY(a<$EK#h6DXGs->4X0teY^eDe)ZT;{7a#u?f>UkV^YXYty$W36!;nB4O92J~Ai+^Xz5x_NHlfQfMzO zAb;yBYIM1y{T;-9a^XI6+)A#dqUTu1jtp_)>$8Qx7}Iu9sayPgZHJ;`tBAqC z_VLX@sO@^$CtW71J3`$${@8pl3v;H1+_Zt>qDdcz0=>!UBEm`tT4n@QTf|?a6Aepv zZ0pmwMG45hVNIcZpDq98j@7$}JxGE-*DQQS&GsWf$76e=$iw7g63bG&ig;FLq0wrx??+H{Vy%ys$N zTg{Q^3pj?y3If99*sjkN5Wl{A$Db4nyI_=IHtMjba&T$cuxdgOuu4)^dpSgCa!iIz zU>4_Ug_;iM{8)Bq^4g7?TT_V=6gt3J7AmU3s}O$;KD^rWycVIy4L7Ogs+7wpFB+K3 zm+|<9p$nvt??|pg6E7Zn=Y!*)T$#>kECX41!c=9-RAsU%q??+HFD1*bGL2FRgo(N% zRT;-US)EEmkAHOdjpyF`;=4T;re;$EDFc~w56^Cqj!?c1SKzYiwY)WvFBzCwSfnK< z)jmA*>JN-#*}9ra&lGjT+y$nC36w%hFZA~B<$u9*4p2%jY%6$@U;n4){Qkes?{|LZ_Sc*`cLDn;Uw<@K z*L#}#fP0A;>+~s2oVxR{;J1mq-`Zq#ah$#`YM~$@97`^f>O~?Kh!fepz->f6^Ywd9 z3=ewHVz**rqrPx88VxdH7QgssaQVvZDbjSBz?Z9md7}I43&R6L&kP(vJe`BAsQb#l zUZ;h{B;e|ezwyK5^c51s2!R)9pSHxqcZLVOL%p6(gyI<#Bn7Ivu`i)EA_)=R!;fKj zz&k`3?{4$7B@VvT(e6Y#SAa@fJ4g}p5;_h!DdWv@aEnpk`;128zN4%q)V9ELeW%ZV zY-eepKkcpdLz$e!6l#@ZbagXt91oMlURTbI1_8E4QwOQW7}(NaFjBBm1H2wugf<;y zby1Qbct`4( zmrt{qEA|P30JEUmrCZ3R5m}f)A(!49(ndR)J9?ng^X2HBrB>QhE#h1%hUa}A28yTi zu$cuk5l7ZabR%cz;$=w$=*&h*c`?DD;0C5T8^vC>il{L4o5GGz~k{?e0-eMY3Xu1 zNrX|z$uLIWI17cC`uWBREV&e1Est!0H!5azm53`9+pGffK9iI2{k33mX}vV~C~?Sv z!tb|Xw>N?3d8|d_hz8~$>+?{Lx~kekwV^JLSd|Ot>2@>l>{6uImlP$W!~%1m)xsl% zP3Ibn0vvpXO|tEw&WkDN4d(kryn7vQ5UrVrhDZp}LkaG*F!n>4mb;s=J?U4&%NM`+@!5&1vnM%@ z>(J}#yU@$B3`vp}2EFb}=SN?hHW~QONpoh;FA3tn6XbDh_TEa{|PVvw)67ixY#IK00000NkvXXu0mjfmosmd literal 0 HcmV?d00001 diff --git a/r2/r2/public/static/compact/unsave.png b/r2/r2/public/static/compact/unsave.png new file mode 100644 index 0000000000000000000000000000000000000000..1c69b080abc30e36f8258e5b6a112a8ed31e020e GIT binary patch literal 730 zcmV<00ww*4P)RCwC7Ry&9qVG!1M1dUHnQN%N; z)JlZ2(9W3BXOSk@c`glZ48MG3GgKI=hr4i!;;SK^mF!8Z*0}*xe z&!V!~=&CU{@VT?|&(3@^|4TMO5Uksj6Zm1X*@t{{M$tP6?QM=g{^Wqb&k>&3?RM45 z&}y}QH5!dPQr{pnw`SQPLWB>|Xta%C*o>e_u~@_`7RwjpfGMVt$jb|_z9xvm*SeK#K>z`FB z6?{6K68{6aTn>X}yKa%+@Aql7+IwK2qg*c60sGnkCX-1R4u@Z^TV%7@?r&;MKA$gj zyWLaJCzDADZ73s?ohnwVRliQa;c%vC9sl9bY&I`DosQAt@sJarOeR^V^b+X3UhkA@ zuh;9Br~{9v-;2d!@=3NxE|-6zmzhqdf4JRl>FOPHU=5(#!I%C$kH@Q!2PwSZIQ{_X z*Hi|nRO-7zq4;Vxn~hAXrcfx9pdv^_8+yp+^RLJX1OmYgN_38PBer7Ta=D~jF861@ z-~YI2A^|W4KHy6mJ4Z3E))lPo19VzKB_0IHiiX$gRYW2YpGu{=OQqLtx2K^{=v^X_ z=+T&8h(w~BU8m_vUd7|_Z{zWp*aR2@AEpb3DS?wII4z0u;2Ui;8o{JVX#_5o&!=k^ zPNx)nB@zki;2Ui?9L5lcC1Shmhqj26!C(*r>}#hdVBhxNmfr#l0HnwsI$NXYUH||9 M07*qoM6N<$f=ftJBme*a literal 0 HcmV?d00001 diff --git a/r2/r2/public/static/css/compact.scss b/r2/r2/public/static/css/compact.scss index bed88cfc1..099b4b420 100644 --- a/r2/r2/public/static/css/compact.scss +++ b/r2/r2/public/static/css/compact.scss @@ -1,29 +1,13 @@ +//Requires Compass and Sass to compile properly +//gem install haml +//gem install compass /* mixins */ -@mixin rounded($radius) { - border-radius: $radius; - -moz-border-radius: $radius; - -webkit-border-radius: $radius; - -khtml-border-radius: $radius; -} +@import "compass/css3"; -@mixin vertical_gradient($from, $to) { +@mixin vertical_gradient($from, $to) { background-color: ($from + $to) / 2; - background: -moz-linear-gradient(-90deg, $from, $to); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); - background: -khtml-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); -} -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; - -moz-box-shadow: $shadow; - box-shadow: $shadow; -} - -@mixin border_box { - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - -khtml-box-sizing: border-box; + @include background(linear-gradient(top, $from, $to)); } /* meat */ @@ -50,7 +34,7 @@ textarea { } /*UI stuff*/ .button, .button:visited { - @include rounded(6px); + @include border-radius(6px); @include vertical_gradient(#BFD0E0, #80A2C4); height: 30px; line-height: 30px; @@ -66,7 +50,7 @@ textarea { text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4); background-color: #80A2C4; border: 1px solid #517191; - @include box-shadow( "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1)" ); + @include box-shadow(inset 0px 1px 0px hsla(0,0%,100%,.75), 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) ); } .button:active, .button[selected], .button.active, /*Vote toolbar styles*/.button.upmod, .button.downmod @@ -87,7 +71,7 @@ button.button { } .small_button, .small_button:visited { - @include rounded(6px); + @include border-radius(6px); @include vertical_gradient(#BFD0E0, #80A2C4); line-height: 20px; @@ -110,7 +94,7 @@ button.button { .group_button { - @include rounded(0); + @include border-radius(0); border-left: 1px solid hsl(211, 40%, 75%); border-right: 1px solid hsl(211, 28%, 37%); } @@ -133,29 +117,26 @@ button.button { border-right: 1px solid hsl(210, 28%, 44%); } -/*Options triangle popups*/ -.triangle_link { +/*Options popups*/ +.options_link { font-size: x-small; - margin: none; - display: block; - float: right; clear: left; margin: 2px 0px 0px 10px; -} - -.triangle_link.button { - color: white; - margin-bottom: 2px; - padding: 3px; - line-height: normal; - height: auto; + display: inline-block; + width: 30px; height: 30px; position: absolute; - bottom: 2px; - right: 2px; + top: 35px; + right: 10px; + background: url('/static/compact/options.png') no-repeat; + + &.active { + background: url('/static/compact/options-active.png'); + } } -.message .triangle_link, .comment .triangle_link { + +.message .options_link, .comment .options_link { border-bottom-left-radius: 8px 8px; border-bottom-right-radius: 0px 0px; border-top-left-radius: 0px 0px; @@ -169,8 +150,8 @@ button.button { top: -1px; } -.message .triangle_link .button_contents, -.comment .triangle_link .button_contents { +.message .options_link .button_contents, +.comment .options_link .button_contents { background: url(/static/compact/mobilesprite2.png) no-repeat -51px -2px; display: inline-block; height: 16px; @@ -178,102 +159,62 @@ button.button { width: 16px; } -.options_triangle_parent { - position: relative; -} -.options_triangle { - margin: 15px -5px 5px 0px; - position: absolute; - top: -3px; - z-index: 1000; - right: 0; +/*Options expando*/ - -} -.options_triangle:before { - content:"\00a0"; - display:block; /* reduce the damage in FF3.0 */ - position:absolute; - z-index:-2; - top:-29px; - right:15px; - width:0; - height:0; - border-width:15px 10px; - border-style:solid; - border-color:transparent transparent hsl(0, 0%, 60%); -} -.options_triangle:after { - content:"\00a0"; - display:block; /* reduce the damage in FF3.0 */ - position:absolute; - z-index:1001; - top:-28px; - right:15px; - width:0; - height:0; - border-width:15px 10px; - border-style:solid; - border-color:transparent transparent hsl(235,1%,94%); -} -.options_triangle.left-side:before { - left:15px; -} -.options_triangle.left-side:after { - left:15px; -} - - -.options_triangle.hidden { +.link .options_expando { + background: hsl(210,35%,20%); + margin: 5px -5px -1px; + border-top: 1px solid hsl(210,35%,10%); display: none; + padding: 10px; + @include box-orient(horizontal); + @include box-align(center); + @include box-pack(center); + @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8)); + text-shadow: 0px -1px 0px hsla(0,0%,0%,.8); + + a { + display: block; + color: white; + font-size: 11px; + padding: { + left: 5px; + right: 5px; + } + + } + + &.expanded { + @include display-box; + } } -.options_triangle.left-side { - left: 0px; - right: auto; +.email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon { + display: block; + width: 24px; + height: 24px; + margin: { + left: auto; + right: auto; + bottom: 5px; + } +} +.email-icon { + background: url('/static/compact/email.png') no-repeat; +} +.report-icon { + background: url('/static/compact/report.png') no-repeat; +} +.save-icon { + background: url('/static/compact/save.png') no-repeat; +} +.unsave-icon { + background: url('/static/compact/unsave.png') no-repeat; +} +.domain-icon { + background: url('/static/compact/domain.png') no-repeat; } -.message .options_triangle, -.comment .options_triangle { - width: auto; - right: -3px; - top: -3px; -} -.message .options_triangle:before { - right: 7px; -} -.comment .options_triangle:before { - right: 7px; -} - -.message .options_triangle:after { - right: 7px; -} -.comment .options_triangle:after { - right: 7px; -} -/* Triangle buttons */ -.options_triangle .button { - @include vertical_gradient(hsl(235,1%,94%), hsl(236,2%,85%)); - color: hsl(0,0%,30%); - text-shadow: hsla(0,0%,100%,.6) 0px 1px 0px; - border: 1px solid hsl(0,0%,60%); - border-left: 1px solid hsl(0, 0%, 85%); - border-right: 1px solid hsl(0, 0%, 50%); -} -.options_triangle .button:hover, .options_triangle .button:active, .options_triangle .button:focus { - @include vertical_gradient(hsl(210, 35%, 81%), hsl(210, 37%, 64%)); - border-left: 1px solid hsl(211, 40%, 75%); - border-right: 1px solid hsl(212, 28%, 37%); - color: white; - text-shadow: hsla(0, 100%, 100%, 0.0976563) 0px 1px 1px, hsla(0, 0%, 0%, 0.398438) 0px -1px 1px; -} -.options_triangle .button:first-child { - border-left: 1px solid hsl(0,0%,60%); -} -.options_triangle .button:last-child { - border-right: 1px solid hsl(0,0%,60%); -} /*Toolbar*/ #topbar { height: 45px; @@ -281,7 +222,7 @@ button.button { background-color: #A8C4E0; @include vertical_gradient(#CEE3F8, #A8C4E0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; - @include border_box; + @include box-sizing(border-box); padding: 0px 10px 10px; } #topbar > h1 { @@ -378,7 +319,7 @@ body[orient="landscape"] > #topbar > h1 { /*Subtoolbar (eg hot)*/ .subtoolbar { - @include border_box; + @include box-sizing(border-box); height: 32px; @include vertical_gradient(white, #ccc); border-bottom: 1px solid #bbb; @@ -409,7 +350,7 @@ body[orient="landscape"] > #topbar > h1 { @include vertical_gradient(#ddd, #aaa); /* no color-stop outside of webkit */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(.4,#ddd), to(#aaa)); - @include rounded(8px); + @include border-radius(8px); border: 1px solid #aaa; padding-top: 2px; padding-bottom: 1px; @@ -438,12 +379,12 @@ body[orient="landscape"] > #topbar > h1 { } /*Links*/ .link { - min-height: 60px; + min-height: 70px; border-bottom: 1px solid #999; border-top: 1px solid #ddd; padding: 5px 5px; padding-bottom: 0px; - @include border_box; + @include box-sizing(border-box); background: rgba(255,255,255,.6); position: relative; } @@ -577,16 +518,18 @@ body[orient="landscape"] > #topbar > h1 { /*Expando*/ .link .expando-button { float: left; + display: block; height: auto; line-height: inherit; margin: 3px 5px 2px 0; - color: white; -} -.link > .expando-button.video { - font-size: 15px; -} -.link > .expando-button.expanded { - @include vertical_gradient(#7E8994, #80A2C4); + width: 30px; + height: 30px; + background: url('/static/compact/selftext.png'); + + &.expanded { + background: url('/static/compact/selftext-active.png'); + } } + .link > .expando { clear: both; margin: 5px 0; @@ -594,7 +537,7 @@ body[orient="landscape"] > #topbar > h1 { border: 1px solid #999; @include vertical_gradient(#ddd, #aaa); padding: 5px; - @include rounded(8px); + @include border-radius(8px); font-size: 11px; } @@ -612,7 +555,7 @@ body[orient="landscape"] > #topbar > h1 { /* Comment count */ .commentcount { float: right; - margin: 5px 1px 5px 5px; + margin: 5px 1px 45px 5px; width: 45px; text-align: right; } @@ -622,7 +565,7 @@ body[orient="landscape"] > #topbar > h1 { margin: 0; padding: 3px 10px; text-decoration: none; text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4); - @include rounded(10px); + @include border-radius(10px); @include vertical_gradient(#BFD0E0, #80A2C4); border: 1px solid #517191; @include box-shadow( " 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "); @@ -652,15 +595,15 @@ body[orient="landscape"] > #topbar > h1 { background: white; margin: 0 10px 5px; border: 1px solid rgb(217,217,217); - @include rounded(8px) + @include border-radius(8px) } .commentarea > .usertext textarea { margin: 0; padding: 5px; width: 100%; height: 100px; border: none; - @include border_box; - @include rounded(8px); + @include box-sizing(border-box); + @include border-radius(8px); border-bottom: 1px solid rgb(217,217,217); } @@ -735,8 +678,8 @@ padding: 5px; border: 1px solid rgb(217,217,217); width: 100%; min-height: 100px; - @include rounded(5px); - @include border_box; + @include border-radius(5px); + @include box-sizing(border-box); } .child form.usertext.cloneable { margin: 5px; @@ -747,7 +690,7 @@ padding: 5px; background: white; border: 1px solid rgb(217,217,217); margin: 10px; - @include rounded(8px) + @include border-radius(8px) } .comment > .midcol { float: left; @@ -796,7 +739,7 @@ padding: 5px; position: relative; border: 1px solid rgb(217,217,217); margin: 10px; - @include rounded(8px) + @include border-radius(8px) } .message > .midcol { float: left; @@ -813,7 +756,7 @@ padding: 5px; /* TODO */ margin-right: 10px; padding: 2px 5px; - @include rounded(15px); + @include border-radius(15px); } .message .correspondent a { text-decoration: none; @@ -870,7 +813,7 @@ padding: 5px; .subreddit { background-color: white; - @include rounded(5px); + @include border-radius(5px); margin: 5px; } @@ -968,9 +911,9 @@ padding: 5px; font-weight: bold; } #compose-message input[type="text"] { - @include border_box; + @include box-sizing(border-box); border: 1px solid rgb(117,117,117); - @include rounded(5px); + @include border-radius(5px); margin-bottom: 5px; padding: 5px; width: 100%; @@ -999,7 +942,7 @@ padding: 5px; border: rgb(81, 113, 145) 2px solid; background: white; @include box-shadow( 0px 0px 5px rgba(81, 113, 145,.6)); - @include rounded(5px); + @include border-radius(5px); font-size: 1.5em; font-weight: bold } .thing_suboption_popup { @@ -1010,7 +953,7 @@ padding: 5px; border: rgb(81, 113, 145) 2px solid; background: white; @include box-shadow( 0px 0px 8px rgba(81, 113, 145,.6)); - @include rounded(5px); + @include border-radius(5px); } .thing_options_popup a { display: block; @@ -1095,11 +1038,11 @@ padding: 5px; #login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] { width: 100%; margin: 0 0 5px; - @include rounded(5px); + @include border-radius(5px); border: 1px solid rgb(117,117,117); /*It was the coins fault!*/ font-size:17px; padding: 5px; - @include border_box; + @include box-sizing(border-box); } #login_login > div > ul li input[type="checkbox"] + label, #login_reg > div > ul li input[type="checkbox"] + label { display: inline; @@ -1151,9 +1094,9 @@ body.toolbar { } /*Close toolbar button*/ .toolbar .close { - @include border_box; + @include box-sizing(border-box); @include vertical_gradient(hsl(3, 68%, 77%), hsl(4, 33%, 48%)); - @include rounded(30px); + @include border-radius(30px); border: 1px solid hsl(4, 33%, 40%) ; bottom: -13px; @@ -1201,7 +1144,7 @@ body.toolbar { position: absolute; top: 75px; left: 0; - @include rounded(30px); + @include border-radius(30px); background-color: white; text-align: left; z-index: 1001; @@ -1250,7 +1193,7 @@ body.toolbar { } #newlink .tabmenu li a { width: 100%; height: 100%; - @include border_box; + @include box-sizing(border-box); display: block; padding: 5px; color: hsl(0, 0%, 30%); @@ -1289,16 +1232,16 @@ body.toolbar { padding: 0px 5px; } #newlink .roundfield-content textarea { - @include border_box; + @include box-sizing(border-box); width: 100%; height: 5em; - @include rounded(5px); + @include border-radius(5px); } #newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] { - @include border_box; + @include box-sizing(border-box); width: 100%; height: 2em; - @include rounded(5px); + @include border-radius(5px); } #newlink .title { font-weight: bold; @@ -1320,14 +1263,14 @@ body.toolbar { background: hsl(0, 0%, 90%); border: 1px solid hsl(0, 0%, 50%); padding: 8px; - @include rounded(8px); + @include border-radius(8px); } #suggested-reddits ul li { display: inline; } #suggested-reddits ul li a { @include vertical_gradient(hsl(210, 35%, 81%), hsl(210, 37%, 64%)); - @include rounded(10px); + @include border-radius(10px); display: inline-block; margin: 5px; padding: 3px 7px; @@ -1401,7 +1344,7 @@ body.toolbar { background-color: white; padding: 10px; margin: 10px; - @include rounded(10px); + @include border-radius(10px); } .instructions h1 { @@ -1417,7 +1360,7 @@ body.toolbar { .instructions img { width: 290px; margin-left: 15px; - @include rounded(10px); + @include border-radius(10px); border: 1px solid #888; } @@ -1432,7 +1375,7 @@ body.toolbar { max-width: 280px; padding: 10px; background-color: white; - @include rounded(10px); + @include border-radius(10px); margin: 10px auto; } diff --git a/r2/r2/public/static/js/compact.js b/r2/r2/public/static/js/compact.js index dc8d01434..ccaf8abe3 100644 --- a/r2/r2/public/static/js/compact.js +++ b/r2/r2/public/static/js/compact.js @@ -1,5 +1,12 @@ /*This hides the url bar on mobile*/ (function($) { + /* + Creates an element on the body that works to create a modal box + The callback function runs when the cover is clicked + Use it, for example, to hide your modal box. + + It is kind of tricky to use on mobile platforms, subject to many odd bugs, likely caused by the way mobile platforms handle z-index + */ function tool_cover(callback) { var toolcover = $("#toolcover"); if (toolcover.length == 0) { @@ -7,149 +14,149 @@ toolcover = $("#toolcover"); } toolcover.css("height", $(document).height()) - .show().one("click", function() { - $(this).hide(); - if (callback) callback(); - return false; - }); - }; + .show().one("click", function() { + $(this).hide(); + if (callback) callback(); + return false; + }); + } + + ; $.fn.show_toolbar = function() { var tb = this; - tool_cover(function() { $(tb).hide(); }); $(this).show(); }; - $.fn.hide_toolbar = function() { - $("#toolcover").click(); - }; $.unsafe_orig = $.unsafe; $.unsafe = function(text) { /* inverts websafe filtering of reddit app. */ text = $.unsafe_orig(text); - if(typeof(text) == "string") { + if (typeof(text) == "string") { /* space compress the result */ text = text.replace(/[\s]+/g, " ") - .replace(/> +/g, ">") - .replace(/ + +/g, ">") + .replace(/ + .entry, .message > .entry").live("click", function(evt) { var foo = (evt) ? $(evt.target) : null; var thing = $(this).parent(); - if(thing.hasClass("active")) { + if (thing.hasClass("active")) { thing.removeClass("active"); return false; - } + } /* collapsed messages/comments should uncolapse */ - else if(thing.hasClass("collapsed")) { + else if (thing.hasClass("collapsed")) { thing.removeClass("collapsed"); return false; - } + } /* unread messages should be marked read */ - else if(thing.hasClass("unread") || thing.hasClass("new")) { + else if (thing.hasClass("unread") || thing.hasClass("new")) { read_thing(thing); return false; } /* otherwise, fire a menu */ - else if(foo && - foo.filter("a").length == 0 && - !foo.hasClass("arrow") && - !foo.hasClass("button") && + else if (foo && + foo.filter("a").length == 0 && + !foo.hasClass("arrow") && + !foo.hasClass("button") && foo.filter("textarea").length == 0) { - thing.find(".triangle_link:first").click(); + thing.find(".options_link:first").click(); return false; } - }); - /*Finally*/ - $('a[href=#]').live('click', function() { return false; } ); + }); + /*Finally*/ + $('a[href=#]').live('click', function() { + return false; + }); }); $(function() { - var eut = edit_usertext; - edit_user_text = function(what) { - $(what).parent().parent().toggleClass('hidden'); - return eut(what); - }; + var eut = edit_usertext; + edit_user_text = function(what) { + $(what).parent().parent().toggleClass('hidden'); + return eut(what); + }; - }); +}); function showcover() { $.request("new_captcha"); $(".login-popup:first").fadeIn() - .find(".popup").css("top", $(window).scrollTop() + 75).end() - .find(".cover").css("height", $(document).height()).end() - .find("form input[name=reason]").val(reason || ""); + .find(".popup").css("top", $(window).scrollTop() + 75).end() + .find(".cover").css("height", $(document).height()).end() + .find("form input[name=reason]").attr("value", (reason || "")); return false; } function hidecover(where) { $(where).parents(".cover-overlay").fadeOut(); return false; -}; +} function show_edit_usertext(form) { var edit = form.find(".usertext-edit"); @@ -160,8 +167,8 @@ function show_edit_usertext(form) { edit.show(); form - .find(".cancel, .save").show().end() - .find(".help-toggle").show().end(); + .find(".cancel, .save").show().end() + .find(".help-toggle").show().end(); textarea.focus(); } @@ -172,33 +179,34 @@ function fetch_more() { var o = document.location; var path = o.pathname.split("."); - if (path[path.length-1].indexOf('/') == -1) { + if (path[path.length - 1].indexOf('/') == -1) { path = path.slice(0, -1).join('.'); } else { path = o.pathname; } var apath = o.protocol + "//" + o.host + path + ".json-compact" + o.search; var last = $("#siteTable").find(".thing:last"); - apath += ((document.location.search) ? "&" : "?") + - "after=" + last.thing_id(); + apath += ((document.location.search) ? "&" : "?") + + "after=" + last.thing_id(); if (last.find(".rank").length) "&count=" + parseInt(last.find(".rank").html()) $.getJSON(apath, function(res) { - $.insert_things(res.data, true); - $(".thing").click(function() {}); - /* remove the loading image */ - $("#siteTable").next(".loading").remove(); - if (res && res.data.length == 0) { - $(window).unbind("scroll"); - } + $.insert_things(res.data, true); + $(".thing").click(function() { }); + /* remove the loading image */ + $("#siteTable").next(".loading").remove(); + if (res && res.data.length == 0) { + $(window).unbind("scroll"); + } + }); } function toggle_collapse(elem) { $(elem).thing().addClass("collapsed").addClass("active") - .find('.thing_option_close:first').click(); - return false; + .find('.thing_option_close:first').click(); + return false; } diff --git a/r2/r2/templates/link.compact b/r2/r2/templates/link.compact index e3bc3dab5..aa9ab84f4 100644 --- a/r2/r2/templates/link.compact +++ b/r2/r2/templates/link.compact @@ -23,12 +23,12 @@ from r2.lib.template_helpers import add_sr import urllib from r2.lib.filters import _force_unicode, _force_utf8 - from r2.lib.template_helpers import add_sr %> <%namespace file="printable.compact" import="delete_report_buttons"/> <%namespace file="printable.html" import="arrow, score"/> <%namespace file="link.html" import="tagline"/> <%namespace file="utils.html" import="plain_link" /> +<%namespace file="printablebuttons.html" import="state_button" />
@@ -68,16 +68,14 @@ ${thing.title}

%if thing.link_child and not c.permalink_page and thing.link_child.css_style.strip(' ') != 'video': - + %endif
${tagline()}
- Options + <% expand = thing.link_child and thing.link_child.expand %> @@ -86,7 +84,7 @@ ${thing.link_child.content()} %endif -
+
+ +<%def name="save_button()"> + %if c.user_is_loggedin: + %if thing.saved: +
Unsave + + %else: + +
Save + %endif + %endif + + + +<%doc> +%if thing.is_loggedin: + %if thing.saved: + ${printablebuttons.state_button("unsave", _("unsave"), \ + "return change_state(this, 'unsave', unsave_thing);", _("unsaved"))} + %else: + ${printablebuttons.state_button("save", _("save"), \ + "return change_state(this, 'save', save_thing);", _("saved"))} + %endif + %endif + + \ No newline at end of file