From 3b32ac61346a5eb302f5dc3b03b2543a817d2116 Mon Sep 17 00:00:00 2001 From: Romano Licker Date: Mon, 27 Feb 2012 16:06:59 +0100 Subject: [PATCH] [designfix] use css sprite for displaying arrows in project navigation fixes loading lag on hover and toggle --- .../double_arrows_grey_white_sprite.png | Bin 0 -> 1293 bytes .../double_arrows_grey_white_sprite.xcf | Bin 0 -> 2832 bytes public/stylesheets/application.css | 51 +++++++++++++----- 3 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 public/images/double_arrows_grey_white_sprite.png create mode 100644 public/images/sources/double_arrows_grey_white_sprite.xcf diff --git a/public/images/double_arrows_grey_white_sprite.png b/public/images/double_arrows_grey_white_sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..6afc0d5b50bc0e3edfe569d52be72f1aa7f2bd12 GIT binary patch literal 1293 zcmbu9{a4a=6vsc`FC=~yO`};BDT{MBG6YEw#+SB1%;Jre>C@ zrym?-xe_0n(^aApXi}oMDXIBDS&}<8T@TvRrWl%I`wMo??m73~_c`zT%f07y?m12* z%fW7q9RR=~G=#a^+8Ne-V{2orH!8la0{}Y|%G?%x3Ysn}JVN%t=X&YsM@&Cv8oAM{ zz1Ispr@QK|A}jZqn(F5d`xD#pOm4;ctM`9yFY7E2!#uc@Fi!5LfegYkGA|Q*r@h_% zonJ$`-{!dDg|R zcthLy1G>OFxDY(uOSS2!o_cClEizo3y77CuwkkDqT<|_!i<78C;jn6D7TR$M1r+Wm zOb~4R2+sOK5L=~OMj79|068YYuw0OA&(>C%F+}MGXd>zioFr@-w*hZgAFRQ}JcGf2 zc|Yj|ko0=WA;#xAzOMClPTeZeQh9A4oS@LmI1|}e(Cx5uBgk^b=mVvHjO(L zTBHWVe5@nIh>$Mx6X$xcS0bp7rEG@3{{D;%3AmipyeLOgips{k2m=3s6pIh^h`2=) zPZ>{9JeuXhw*tlDcDD8rvvK+)75dO&qjv0@umzrbjlXq<=fnXg%X??_)R*eWPfhlW zg5eWu-o}B~TwMM;z~s5wn&wbvn21|Bw6Ti}!WaQ|q%%E@6oj|4ro)eNEvLt~kgdHC zdG;uqfs-Y!xrDlwIU41t8%<*~s4VeZ2lf@kZJI_Qm6A1< z1XxTc7P}Fg3>U{1y&=sx)|O%}}7`3+3HnCeI9Hwf!xNIz3O z%w}xXH^osHgy(yGp)sOSa_PSe`;3^UohEJtw77=?9sfebul?s%0p>)@cFx+OB4Hg4 z=z?iGd-a^=hn?-6mafO7m`SE`XyQt5Okbr;j%kFTD1#~DUY6aqg=bC`D|2R`(S0#!ONN(p8bjw$3_i!ki|i)DrijVD|Nr0 zyb3)zgUP*)u^3)I!PyQL9R?*j`;ER}e`VQ7)06jiW#U+4b;Z1XgsrkOy^>%(gd{X9 zRigBU+>Vrtcta&m{!B`MX+s|M*1c{&AGn7-Rr^(J2R8bAaH((D0ZP}x7R-?okh&clS}EDBK)0j>zf0iJ0h74!MyCh0q(3pNdN!< literal 0 HcmV?d00001 diff --git a/public/images/sources/double_arrows_grey_white_sprite.xcf b/public/images/sources/double_arrows_grey_white_sprite.xcf new file mode 100644 index 0000000000000000000000000000000000000000..9d92e14d41a7436a7c5103db597f799caef90bea GIT binary patch literal 2832 zcmd5;zi-n(6n^JAZtNl$4N74yg25U(WBldv|`{ouAVUHwQ~kTb-p&xX~8aE#N0_ zU}pfO@N*WZi@dz80Z&^O{dYv1Ya(;cMBFbT-m1v_8xcPc2_Be%Xb~^-0Oz|ri29G( ztzobEBy2RJs6TFOv^&Gbcs(4ZPvK#Z3nTyodCx#UyGJ9Z0rs5&ZUUT~fh9w>)H@5yqOU)C%4Zz_ literal 0 HcmV?d00001 diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index aa134dd0a4..31717ca3a4 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1488,24 +1488,29 @@ div#optional_login_fields { position:absolute; right:0px; top:0px; - background:url(../images/projectnavi_arrow_down.png) no-repeat 22px 7px; width:40px; height:25px; } -#main-menu ul.menu_root li .open .toggler { - background-image:url(../images/projectnavi_arrow_up.png); -} -#main-menu ul.menu_root li .open:hover .toggler { - background-image:url(../images/projectnavi_arrow_up_white.png); +#main-menu .toggler { + /* Arrow down */ + background-image: url(../images/double_arrows_grey_white_sprite.png); + background-position: 10px -1px; } -#main-menu ul.menu_root li .selected .toggler { - background-image:url(../images/projectnavi_arrow_down_white.png); + +#main-menu ul.menu_root li .open .toggler { + /* Arrow up */ + background-image: url(../images/double_arrows_grey_white_sprite.png); + background-position: 10px -26px; } -#main-menu ul.menu_root li .selected.open .toggler { - background-image:url(../images/projectnavi_arrow_up_white.png); +#main-menu ul.menu_root li .selected.open .toggler, #main-menu ul.menu_root li .open:hover .toggler { + /* Arrow up white */ + background-image: url(../images/double_arrows_grey_white_sprite.png); + background-position: 10px -159px; } -#main-menu ul.menu_root li a:hover .toggler { - background-image:url(../images/projectnavi_arrow_down_white.png); +#main-menu ul.menu_root li a:hover .toggler, #main-menu ul.menu_root li .selected .toggler { + /* Arrow down white */ + background-image: url(../images/double_arrows_grey_white_sprite.png); + background-position: 10px -120px; } #main-menu ul.menu_root li li .toggler { @@ -2810,14 +2815,32 @@ ul.action_menu_more { #main-menu #toggle-project-menu a.navigation-toggler { position:relative; float:right; - background: url(../images/projectnavi_arrow_left.png) 160px 5px no-repeat; width:100%; height:15px; + + /* Arrow left */ + background-image:url(../images/double_arrows_grey_white_sprite.png); + background-position:148px -91px; + background-repeat:no-repeat; } #main-menu #toggle-project-menu.show a.navigation-toggler { - background: url(../images/projectnavi_arrow_right.png) 4px 5px no-repeat; width:15px; height:100%; + + /* Arrow right */ + background-image:url(../images/double_arrows_grey_white_sprite.png); + background-position:-8px -200px; + background-repeat:no-repeat; +} +#main-menu #toggle-project-menu a.navigation-toggler:hover { + /* Arrow left white */ + background-position:148px -58px; + background-repeat:no-repeat; +} +#main-menu #toggle-project-menu.show a.navigation-toggler:hover { + /* Arrow right white */ + background-position:-39px -200px; + background-repeat:no-repeat; } #menu-sidebar.hidden { display:none;