From 7e7ce44c7745c6710a51b35b34e0c4cb6021cebd Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Wed, 15 May 2024 17:28:39 -0500 Subject: [PATCH] fix(shops): lots of layout corrections --- .../npc/normal/customizations_background.png | Bin 0 -> 2661 bytes .../static/npc/normal/customizations_npc.png | Bin 0 -> 5917 bytes website/client/src/assets/scss/shops.scss | 90 +++++++++++++ .../client/src/assets/scss/typography.scss | 3 +- .../avatarModal/customize-options.vue | 2 +- .../client/src/components/creatorIntro.vue | 6 +- .../src/components/inventory/items/index.vue | 2 +- .../components/shops/customizations/index.vue | 23 ++-- .../src/components/shops/seasonal/index.vue | 23 ++-- .../components/shops/timeTravelers/index.vue | 127 +++--------------- website/client/src/components/ui/itemRows.vue | 33 +++-- .../src/components/ui/showMoreButton.vue | 2 +- website/common/locales/en/customizations.json | 4 +- website/common/script/libs/shops.js | 4 +- 14 files changed, 166 insertions(+), 153 deletions(-) create mode 100644 website/client/public/static/npc/normal/customizations_background.png create mode 100644 website/client/public/static/npc/normal/customizations_npc.png create mode 100644 website/client/src/assets/scss/shops.scss diff --git a/website/client/public/static/npc/normal/customizations_background.png b/website/client/public/static/npc/normal/customizations_background.png new file mode 100644 index 0000000000000000000000000000000000000000..847bd6d03e4be0e84797773a2e9efed87c8d4a6a GIT binary patch literal 2661 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 W`RGy?g4q0t1YkDy)@4@SxBmfit?9`C literal 0 HcmV?d00001 diff --git a/website/client/public/static/npc/normal/customizations_npc.png b/website/client/public/static/npc/normal/customizations_npc.png new file mode 100644 index 0000000000000000000000000000000000000000..282915a0fb15a2d1b1692f50bea50581ee01ff4e GIT binary patch literal 5917 zcmeHKXIoQSuns67(nP9=fFRODfvBMvKzdVp?_Ij|UJk_&dXXYkKtNjPh?LL~L_k7E zia_Wk^n?<);hgj3;`syjdG7v@WUoE%yJpS2Gm{Nfc`ZwJli?-+03ef>lTrf!uGisy zPuw8HeIAY5mI44b`D`R5RpcclS>C!hS=rcI0swN*%w$gujd5DYV6&%BPCp+tmn5p0 zjHMY=gpe{#y<@_8jU4#2@_sHprL@#_nwP<>gi-HUD_JALf=t?&;#fX*noz5%dIPJp z+?JM_Q&Q%bt^Mt?o6%rvl>b-*Ag&4fwaHEAX3*2DAm)W7h1jTw0`pTm(jCCH9{`go z0U*8vxFbkTl*#cxDV_?$dLszr*~tR{MK^`4y6s%ZrzN$~g(I#*CxZKXEui%(okf$u zq?P_Mog)}({tiz5eQ6@<%BEB*y2+jDK~|B-51HNOkve|Mq#g|VKftWBY3#^w`dvC_ zRoaw9-UWTuF(sM;XX!I7#`JDeEBqi<=oUUXk9=nV>%-j+iD{`OY5*hGE>Fxw1VIMl zUl=vVwL4$^9L*AfV10Q0M%zGM3aeIGr-#1xX&g-kI;83X-> z&pl&Sbz@^P%iUJSH0v#n=dYl?jdJC|VrbIbL;p%_lCcjM5T&c?;Ne% zTPB`T;InY8>z}r2qjR7u?D8x<6+r&pfr01CE;`){!RI*_YdfHWQFK(-+Bql1OlD#$ zb-~Tmg@#Im`f!+^j}>8JSI%9mcld?#Z{zF^zR<+hc~`I8@V7(noxP#C9{Uppc%V$# zmA!LystePJ>>9ywR#gU3Jlj(KIEIh-$Z^r2+*^3JUBzpzVTVA0euB4Jnr@6jyS`pL zTAizIw_IRPOveZf@IHtdxV=|Ri|!n}{SgmO4xd{Ez%71l6`#$7+&&2WmXN8H?s_oa zEdnh(S~+~1Ad0G&q7yeF#EB>HJVI<$NEpPa-r#YF6A6+%4(j_YT#x4%LS%A1DrCik zunBMf)^*eS0#bibvuMhZ2n7AOPl&wXEq<ZHeQb4?kb$h7{)reG+-WmbHmtAcSOo>n)7|1#`%+ zd6FG>%<~ucVi0S}pj(s-x$o%jlXj93OXbF24~;FAjEGnG#ANfbAv)k&UyWE+C6+PhIU z+@1+{lr)x@lZnlnGvT9WkRdV;+3l7xP2jiV%TL9oYW?v3!D2-UjO;R_sUXxLvS&$# z(wIb6_*QgaA%-_-T67gfniXQAr znZLVZh`~D(49H@6_4B^qt@azeq0yn-5+w7t=kL$c#LH=LOx+HF8Y~c+(d-KD-gJJC ziFqK2;P@JECMSXLK$s%D5nu$5z=zUT9uH*`36NXJhkMd{=6m|Y5uuf#vDfv@nx&$p z8av}UN#vV8C4Y)Ua`(RIRp?DjxRx-i=Edc}1>!0g5iVjVQdjFxt42`U0N2FVp025_ zv#rUaM->_13+kQAV^?B={79kL)}s`^}&fis13QG-+yvM%|mAX%j)??~O+ z!qS4*vcuBV!p>r_C+6p^wCDYhWCfnQ%#SlU%_-{1uJMaK4vBX0cN5YRjagBT2IHS3 zJ0-R7UKsra`<)Y)TcMsKIUmoeplZyo!>_*^w7}lA#y-M+q^P49k&>a~Voa=s(7vgv zm**x|q->+5D?OCq@MtD1OQAd$ z{nL8n{YcYjsI9v#)^>kgc)f3wWJG_I+2+<$dIn+!8ipALU|Mk+UfOY5e;T@WM~}4Z zK^a)DSk1v_CUt)iZ@!+uS~*!{ zn+1*pxD*Yj4Itj-o0G4TD?x-Il(G%x8H+E!QF1)vC{S-6rm`lpu5-=X4~@)Htm@-W zp@S8`{KlV;3xPzw)H<%rPsc#Zf>kB9ZT^~Wf0;QQly5{TYJ z5bNDLFz0(H$XWjoV-v0`7a-@v$^P{D!JE}|zVV8x3Zg#u6p|EAh~m3%p`frq>3Z4s zvQbiLQn2VIrhNLY==G>>8Hg-MW)QZcQ|a5~6{V@9`Xe(*n8#Ji$S}X2+kNzdPOpyD zX0M=|fz)(@D8vNNOLQU>%oBy=ydR|?W;2vwJV zEuSPmYyfh6hPJHobaB`-P%!yE|2}Lad}QpYfu6w>R~G4$u<=A#LRO+^s%f0+d;Y2^ z$HVPWpr2TP`NQ{L1*+A>X|PI%#O`6~VR^bSy3cf-synKcm*rM=TuxjLUB4{7MtU#% zHxkyqt1S>Q<_$DIU)4*gb>H~tzPr&dZddxmKn&hy*AX8b8qIY#keiQ}^NCk8mzlbD zj?4VJ_R4;v^z_IF5g6$X{mm~Uj?xZGj$3n9l@6#n<*v;IJN5$hBz9&6-TZMl|7pQ` zde|26uhYKLKJv}h&EH$~)x$O`@h)q7O?#Dwc#Ts$t2A9S<(}WR;d(Z@x{Z(u*?Q|w z-&=}Z%a>>G`HE?9XwJc$%WP%}Yn*<;zhXDBl0+F4H6z^P$s=&F9tT99L7swaU)sEt>HbJ%syPVmdI78M z`kW6-8q;%OWTayXJo2ALd%nhGu8Q^wPVR+_QJhY3I&^KR_&S~{$*O&mv({Mo%{8Y! zV|ZlfAjWXvg{hfZO9NI}e;>F#K$~SKnBwVpr%U?A+} z(POjP{tBI*;&eRS5a2tx)h5!1n!Xovhv{n{T*Ujy;cVZjE_#L8-YYyn=S*&0b;&&c z+o9M7c3RjB>|!Oy7{O7ZimxA%VEFNKvWB|#Q@WMkknq%QO;}ZIY`(q8jyHo6#&DOwf|y6 z(W89kWSg>62hW4BDu=2l^Kp(AWePe3E$unMwbcDHYLK)D?k^;Zxt!W70Kn%V01y-k z0G!~Kf>r?lcRm1M-2?y-P6Yty-exqYzQ8>oG*gt70$c!4fU$F~j937G)K*^VrH0qk z)=XgOsO3GPoseAoeZrXCj?Vta9X0ur%nmndB8Q%AsSPtmjA;yL1cbUyeh8ceZAZYzT-rkb-Jqvcx{&_yNi#kJ(ZM}X_*w4UhRL2o^dzK14>zd`$eD1Tq z1D-?egICTEH@#6sqd15D|N4&ze4G|EZd)xHH1No^_cOUDaGoW>S^XZ#SmwF3W|5`6 ze1QP;AiQv9lm2f!k=9Is1(?{S+RuASYIBMkkpAd?dSgGVnb=dD-A`H%dpz8C96O2r zCC);g#+kY-!`BMQ79z`9s0n`!V=p-DIJXL1Yy5<&H&35q#97gc{E3QE(&q#3&GP!P zdg}33t{-&N1f;?h9a^0({i}i8`-i@_o%V7YT{US&HtQyg5^{UCE1p91!UK7LY|}H} zw1svEVfo6K3sCqtv!9Ru*r$?g*8eD{XIRwT6R1UOiK`-i`( zf&h0bo~%JBqLEjwdS*V;lO30u73zhk#;pScO#iU^)&tizg1+$XjzZWGQjpd8XRR?7 zj22KFKfVNPnf(Ef9g6-{*G2p;b}S;1%$Jro!tSBisS55u>1?Q(szP4Z?d{Ba$1@g= zC`Q3s-lwjENpLnCQ>#vu`DI9g9_db8y3C?j9De7`!Lx|KQXcMTHV@^?XQY#r|M>st z-|TQq)wbo4&?RTZ31SsJWsRJV_j+s`D(n=rkx)Y_eV^_4Hnw;o3Njf-n4Qe*PJ4Hc z)5Yp+&ufY6I6C3ztI_AOtFB4Lw88?rFygKzJ%i+h$vT>1r454#`YBRILg*ho>ku4J zys+|$uZ#W!TS;1H>%f#u&c=d9PmeWgwBsZYi5)(ff4l8E^gc4-tAm=@-@7JX-SwGW z^)c15Gp7G&5avHiX0$Y!qo_&N0U%3Qy+XcD~5PM4qX*-s&UA$zjA9B(FF? z$32?rHm){<<}0owp*Y+jZj53$Vh)$BPFw<6V5m!}?TUb8;ig+;@lF>%wj@PC*v-Q^ zT?U~t=CQkndXv+|%LbN$hmx1hssD%kmZ2&cYnvZ z(ifeWmeh8N!O!%N6vhID2Wd61dKc+_VknNSHE#1?A^+QY64JCG!bgafyqIy|7o6=} zQ$tz4uaWa^J7RaMu}+pLaPkh@9!NF&>!alh`0SH!7y@R&CoY=2&Px#@tR<|M+0nep zsZJ>(rziG8RLE@0(@B*17z0PMq79~p5!m7Hral+L1ES4t?E!4jSv^M(*w!TPKJ}I3_IIhL=A{i)0YHdCJCoD(md;voODF(Nr8TfnF?R!#QC2 zB#X-XH}x#m4(!URyqQLS-19rWCj>&s2Ks{Wy=>dxul5Pe&gY6e0qM5Vhvmh|sl_jZ z_?^{wcQY4M+U7?nEPX@3bDT62c8 zi1TsF%0_%_=_678-M`%9K`>reQ86>T*3I8J+d_2hg{N_g$a2f#>VUIkv(xx{n3-s= zd^m0sKw*2#KSgU{`cKmaPtEf3(sGe786~jeAezPN z5KR<04*iq+Pjve`*OPhq@h>`PU-b6Z_`wGBJTg#}b}hcIflbU)TUE@!{af+q$j6ilBj-29mthF!|(LHqf9k6YCCTV6w0&zzy}#e2GsE0#~Hn1usj=<#8 z)jFi9Bv-=;Z5@K`Kc~;G^>#-V<5ci{6Jo298r zV~=|)))Z38PSP9Jq4I83{(DkfjVscvkzCVVV&N|kg_O~ZaYl0eJ{3@};i5!4fXxLb zQ-s~?V&?5Rq|@cFUFEzI!rr3rd!LE}Qq!CRyq9)xe!VNbIgriwWZSsWW%W4YDMW@> zv?TdbU~c$-By_^c23s*S9=>~U&>?S_$jZ$0;>=jg?%PnN>itsCx^!)Ykc!X6!Pk;) z9nI-g(OM}S%}4CjuE(HDB(yftZYoz2CL~ISGx@FYzk`We`oDkiVknGwb`#R4(}9lE literal 0 HcmV?d00001 diff --git a/website/client/src/assets/scss/shops.scss b/website/client/src/assets/scss/shops.scss new file mode 100644 index 0000000000..243e51c045 --- /dev/null +++ b/website/client/src/assets/scss/shops.scss @@ -0,0 +1,90 @@ +.featured-label { + margin: 24px auto; +} + +.group { + display: inline-block; + width: 33%; + margin-bottom: 24px; + + .items { + border-radius: 2px; + background-color: #edecee; + display: inline-block; + padding: 8px; + } + + .item-wrapper { + margin-bottom: 0; + } + + .items > div:not(:last-of-type) { + margin-right: 16px; + } +} + +.timeTravelers { + .standard-page { + position: relative; + } + + .badge-pin:not(.pinned) { + display: none; + } + + .item:hover .badge-pin { + display: block; + } + + .avatar { + cursor: default; + margin: 0 auto; + } + + .featuredItems { + height: 216px; + + .background { + background-repeat: repeat-x; + + width: 100%; + position: absolute; + + top: 0; + left: 0; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .background-open, .background-closed { + height: 216px; + } + + .content { + display: flex; + flex-direction: column; + } + + .npc { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 216px; + background-repeat: no-repeat; + + &.closed { + background-repeat: no-repeat; + } + + .featured-label { + position: absolute; + bottom: -14px; + margin: 0; + left: 78px; + } + } + } +} \ No newline at end of file diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss index b80ce6da3b..970fd41737 100644 --- a/website/client/src/assets/scss/typography.scss +++ b/website/client/src/assets/scss/typography.scss @@ -60,9 +60,8 @@ h1 { h2 { font-size: 20px; - line-height: 28px; + line-height: 1.4; margin-bottom: 16px; - color: $purple-300; } h3, h4 { diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue index d16a656a02..2df1895016 100644 --- a/website/client/src/components/avatarModal/customize-options.vue +++ b/website/client/src/components/avatarModal/customize-options.vue @@ -200,7 +200,7 @@ export default { margin-top: -5px; } } - &.color, &.bangs, &.beard, &.flower { + &.color, &.bangs, &.beard, &.flower, &.mustache { background-position-x: -6px; background-position-y: -12px; } diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue index 5e717f13bf..cff5f47a8f 100644 --- a/website/client/src/components/creatorIntro.vue +++ b/website/client/src/components/creatorIntro.vue @@ -573,10 +573,14 @@ } #avatar-modal { + h2 { + color: $purple-300; + } + .avatar { cursor: auto; - &:not(.new-user) { + &:not(.new-user)[class*=background] { box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24); } diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue index 5c278b176a..b64658a276 100644 --- a/website/client/src/components/inventory/items/index.vue +++ b/website/client/src/components/inventory/items/index.vue @@ -444,7 +444,7 @@ export default { const isSearched = !searchText || item.text() .toLowerCase() .indexOf(searchText) !== -1; - if (isSearched) { + if (isSearched && item) { itemsArray.push({ ...item, class: `${group.classPrefix}${item.key}`, diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue index 5343fc4cc9..6d893ebe8a 100644 --- a/website/client/src/components/shops/customizations/index.vue +++ b/website/client/src/components/shops/customizations/index.vue @@ -33,6 +33,12 @@ class="npc" :style="{'background-image': imageURLs.npc}" > +
+ {{ $t('customizationsNPC') }} +
@@ -81,6 +87,7 @@ -