From b4eb83d66ff3304653bfc80a1b2f4982351eae73 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 16 Dec 2015 09:30:46 -0500 Subject: [PATCH] Added scroll to bottom arrows for mobile --- web/react/components/posts_view.jsx | 27 +++++++++++++++++++++--- web/sass-files/sass/partials/_post.scss | 18 ++++++++++++++++ web/static/images/postArrows.png | Bin 0 -> 5684 bytes 3 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 web/static/images/postArrows.png diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index a4dd51e19f..aedf431af9 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -23,6 +23,7 @@ export default class PostsView extends React.Component { this.createPosts = this.createPosts.bind(this); this.updateScrolling = this.updateScrolling.bind(this); this.handleResize = this.handleResize.bind(this); + this.scrollToBottom = this.scrollToBottom.bind(this); this.jumpToPostNode = null; this.wasAtBottom = true; @@ -283,9 +284,7 @@ export default class PostsView extends React.Component { } updateScrolling() { if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) { - window.requestAnimationFrame(() => { - this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; - }); + this.scrollToBottom(); } else if (this.props.scrollType === PostsView.SCROLL_TYPE_NEW_MESSAGE) { window.requestAnimationFrame(() => { // If separator exists scroll to it. Otherwise scroll to bottom. @@ -335,6 +334,11 @@ export default class PostsView extends React.Component { handleResize() { this.updateScrolling(); } + scrollToBottom() { + window.requestAnimationFrame(() => { + this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; + }); + } componentDidMount() { if (this.props.postList != null) { this.updateScrolling(); @@ -460,9 +464,26 @@ export default class PostsView extends React.Component { ); } + let scrollToBottomArrows = null; + if ($(window).width() <= 768) { + let scrollToBottomArrowsClass = 'post-list__arrows'; + if (this.state.isScrolling && !this.wasAtBottom) { + scrollToBottomArrowsClass += ' scrolling'; + } + + scrollToBottomArrows = ( +
+ ); + } + return (
{floatingTimestamp} + {scrollToBottomArrows}
KLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z000YLNklZ&X#r~$-=n9PvTG|^ZwsWT-r zCX$XgC_-fjscp2HHW{(ipmr29riRoC(^AH1fu_TcI2e^_)GDxKLzRHbuU%O7=j%V` zIX5qF_q~ni^v%3^!?JtM`P_Tnx#ygFRq%hQ{QQr{qr1MB9X!v2lM$wp_>6yqpsE1u zko=7EBXAnsDv@9>-8?;24+&DxIZb2_3&V@-`Hn4|4}sI@e;j}y=6^f@58ZACc&Z@< zeL;*ZK@zsO8C$$kwr~<~K>()Ht){0S*aN@?z)9bAF~BOG=N}kSrBbnQzHH%r*z%nL zpC%f$X(S{VzzhIk03xqkx$;(TZ|?!MT0Ij$H~V^o$&0S8uCAuY$jEE}O8_jG3P?Y2PXJgN85x<~)6>%|wxzAD?KnZk z)Au#(Oo{=60YuPfEbQ#;JjMICOeRxnOiWA;fTd)_9CF=|Kp{nNAtdKMTue+%j>%+d z_hrk~t5;6~(39N}#PJ=#AQC8 zb6KO~2Owh|ufxv8}DG?`gGKqfBh#tyb$jxiv@ZqWY$$rb9f>d*w#2zrX)_ za&mGm03*E%vNP#t=HdYuQ&Li1=#x$K!FGIdkS$0MY?G#VivcQp<#R7DE9<0npOauQ+ky#5*33$0etDczC!k zH#c`9fK)PiF0(#OC*{+b^;UpOUB7<)rje16J_T^j4?q0yZ2&9CJ}m{8Q1N0f24o>; zh#`+0Ia20!yC>xg7#kbAyJ^#=EdZ7=kTXeUC_QJ=s3!nemY0{e#cH+o%gJ`T-IE`D z@WIbTa8Y8{lme833?)Ofg1a6%bZEEB<+95eVzb!>wr<_}69CI8)6mj8GK-#Ca;@e0 z`T1LIHrt?_Oqa_wap1s#UF4QY{$`G?2mM7=7IK~dxo_XTold87T+X2J@$sQI-+c3R zGH4M+$T)f~0+3!%Q1JT1#Ke%CET_|HD=#nK!NARvgYyR{2boqIwy02TsB&&$hu&1$s{D0q(?pMLsjoy+BN$bHvpwSKdC z^X69xZXxN5CH+wnwIHV?$cPu=F!J>|6zb>Et);~F2?`cz8#ivu8yy|J!%x9AIy(B_ zb?essnA~z9>Cus1!G^hH*G#fAMCyHHlWmp6>X#8T5BBxrGgu`y*Z??4PY~(VR99DLmX(z)A}}Gr4;Hzq z%2!1nEGk(HyLaz?d2({{8@Jm%e(cz>Hz*S7MPXkLV0l(n)=L(PrRV$1oW)}4&dA94 z5v`qi($C5_R#jDPce~vacDud5u(0qY>MXFOTCl&0UdUjgN$`@QqM|K!yWPTO5=W07 zEv9$FK$%D!DbWL1mX?g36j6;ipd!{HbzDJj`Z>*HL1piw&Jlmv ze06p8y8xb+fJ_3gEIvN|`M$ostN!5n`ue_zkB@(zlJg`9xTnvYIdi~YHRE(ThYue< zyn%vHq`0D&Y*~zqjI=4K$IhKQ_nsff)Y#bAXU%5wC8^){_V%_@Unj*ETun{QZp>OUoX$TCFF8gh(mCB?HK8Zf>qtqR(tLcg&wZ z{~3z1ICzjf=@KQ$UnHo^JqtozGFB_TB$P46RF(M zQr3|Oz^Kt^*4(^#vr*xo{gvamECz122u>A9%R=Q3vZJHp&kEh?vxta@9Lg^Zl&Kg1 zERTwcdbX>p>t9ObT)K4WPZYowD}_^1(TgFYY4jHZ$Y^V8JEz3Bo}Qle=;-KN0IO-e zTpb-9ooh0gE-4ILXX$qaCg;?M0!qLw3l{Qzslq@S06g8?+9vKs;YN99*;8+IJes^wV@Iv2lp@l6>Zd1R#xs+vQZ6K3G-@m^|ZbL<8pZ}o&D%q&n;dDA}KDynu^78VZF>U#I zfx;0$pWeizc-u`K-Cn@ zpwwYHjyWZ$W?JiBIw|O++r=D<