From 9a95a5e68107a590e7f8aee3eb9daf32a07de27a Mon Sep 17 00:00:00 2001 From: AAloshine-scottlogic <125262433+AAloshine-scottlogic@users.noreply.github.com> Date: Thu, 22 Feb 2024 10:32:04 +0000 Subject: [PATCH] adding formatting for 200% magnification on standard screen (#835) * adding formatting for 200% magnification on standard screen * eslint+format * added some padding to the right header area so the reset progress/getting started buttons dont touch at 150% * converted from dpi to rem and added no wrap to the reset progress button * lint * changed media query to rem, magnification now working on laptop screen * eslint changing from fill avaliable * reverting uneccesary change * added chris' changes --- frontend/src/assets/images/SmolFace_sm.png | Bin 0 -> 11164 bytes frontend/src/components/ChatBox/ChatBox.css | 16 +++- .../src/components/ChatBox/ChatBoxFeed.css | 1 - .../components/MainComponent/MainFooter.css | 16 ++++ .../components/MainComponent/MainHeader.css | 89 ++++++++++++++++-- .../components/MainComponent/MainHeader.tsx | 6 ++ 6 files changed, 119 insertions(+), 9 deletions(-) create mode 100644 frontend/src/assets/images/SmolFace_sm.png diff --git a/frontend/src/assets/images/SmolFace_sm.png b/frontend/src/assets/images/SmolFace_sm.png new file mode 100644 index 0000000000000000000000000000000000000000..b465562aaef6e3dd3dd4c52ceb140dfbea719840 GIT binary patch literal 11164 zcmYki1ymft+6BlU!6is=cXtUA+=C773GVJ5Y=GeI1P|`+?(Qx_a0nKhndR;K_noaS zx!V%u$QV|HKgAwX=!O^W~QM~Xh}&i85tR4eLJ1FBv)Gx zbyJ7O>=GS4efaWP`|;_?!{gl5HFaah{~}{q?SC;%Q~Uo&>W0?e`v+4~lkbf3!03B! zIzIEB(>J#K&u8oQj=J&xJ*DaY)aV^uXW05`@iTsv+#~t+S(c$8~#WB5A^hOv$L~TS6973AnomKOiWDlE}p-CmvVG< z(wkcTPyF4VmzTF1d{_lO6doOXHz_G85AGjmSXe|wMd?IDLzdRwodpMaub*ES!hX8X zE;2;K2nh+&n_JUyaZw73&>Mc2l9G~_m)FqH@b>l|J->8yb=B3?-MRZ`X=z!uf6#Ms zW^Zp#%P$ZZ7?_`*FFiK&?c29^P3Gn<|FHkRu(`SUUkeNdzk_t> z+sVm^`r!CG&fDIrfI{h;I^S{3>Za=axbD(S)8X;M!^1mcI5KHHF?)G=`Hue^Zf|ej zfyUrCUw0=%Q>W4Blz8``Oz*I8=YZM9g5Jm^TT3@%bEjZOze3;0PbieJxr)DDGkxAo?3?^#aFy3Q=9?e7Y7 z^aY$81U#KH#HE1Vp6n*)BJZ!<)>pl*cdR$3177BBm#WJiZ*t#9{IeTSSsmv8S_Ywp z{0Biy6vVlppYL&E@KRu2<%pgJv{h1E+2S9g?ZU8g24{)%rQ0KQ-XkiC8)cOSB z28D%%KD|FC0Kg95902%x12}`d0{~uOVXuykptpb-$ju?_DF6Tk zoB&||bJWDQFT%jki_1%iYj|Z}70*6yv5&m`O>}Y-_j(gWm~0ZtG_YrcHVgV^4IfHzrK@3ixLGq za(hyG(B-+)_V6<8Gt>2Vt!e|+N1Xi_K?Kz3^>3c^%!9?StF{60CYix&rQVt_;+M4$ z9ir#GQ!Xs4K^kcG@Xryff2yMlgXvMhG+F$F^$ky`2R}Z2TU%T4pK1Lt)$Q|Xvc#X( zE@bNlS$|~Ifm062bz#dC2C#P`SQd5m-lmuLw9EMU;o{{` z-*nG&j)^D0#1eDTy%8bbCVuOrJCLgEFCz8k=4tS3)HGT81cMi#9SO-d5y{uk>q4TY zk7A_vNG`gAOSLR(V-*75FCU2LV+~Z{7?~oh5c0LEE)Zcr$Uf08O2p{Jf_7i%^YhRA zw34;NoYHK>t%B|HOA3{vczscPlWl9GEkwu>;nAMMaKk8&4kTv0M^Lht0slvYia5d; z2a8_B5=&nCEi8&)q{U%l{Y=GCVl^Tl0N0&YBFw?T@pUY7JJ{eKmEQ82q$?ilq$DpE z&vv84>H{f%OX3lOmDsT{Y(6xn`%?sYd_J^rnk;j|3bVg%$KEGUFFbAcH+DX2jtIxf zoUG8CMfBY5UB}zYJ@ikPnpb(RL<4w$F03tOc?ST=@K2v((piS3JH(!R9o+~G0R zZL&a%H9v)4b;)3mGloRR(E?J7C@3t(VT-O>k|C|yw&+*RjA_0z!uo|g^Qp`G>lk#) zV};mm)jTBCSp9C`GI$9q@JZUqxaO7yiK|`>N-wA;5t=Y&3iL3lJzobSf~v@*sGmi|!8=t^R?VQ`$}%1$Mk1%>CJrSM_6Eq!cC8x) zS>H12XQ@+fW*j7~`y2i9dqLdSO+aDuP)^HIx(qJEMyWJ~WvR4{x(D!lj4UggD~tT` z@yop!ak*fbtKZ)7-h0Wk z%pz&QhYlx#>+QCdAJ(@ttZaS$giwij&5dnw(jp2D$s%*NHIB-p%2!QLDtq9GD~Ai; z8AQh5MiEhM`ooHQ!J{j@!Ue%gFQ%>rvB38vt@#&srSQ^&HseI!JtMPrX z>R*DFS>c)tNsz)!~7Kx;EW@o;|OIA#Cs3-E2c=_dv7L4stiWaV5Y*5iy z>LMCSV~Sah=55g-1y89fr*dvMUyEM&f$pLmdTpCUz`QAqpsu^pa{rxtbG`h``~`!f z3Vpbo6OVY67FQV>d{QBRPs8Hh@%0D{@;GZ;Gc2KwDeY+cMUJjUZZ@b{TPMa9Yg&h) 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 F{{zM|5-$J% literal 0 HcmV?d00001 diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css index 7b6c0c845..38214137f 100644 --- a/frontend/src/components/ChatBox/ChatBox.css +++ b/frontend/src/components/ChatBox/ChatBox.css @@ -15,7 +15,6 @@ width: 100%; padding: 0.5rem 2rem 1.5rem; padding: 2rem; - font-size: 0.75rem; } .chat-box .footer label { @@ -67,3 +66,18 @@ .chat-box .footer .control-buttons > :focus-visible { outline-offset: 0.1rem; } + +@media only screen and (width <= 70.5rem) { + .chat-box .footer { + gap: 0.5rem; + padding: 1rem; + } + + .chat-box .footer .control-buttons { + gap: 0.5rem; + } + + .chat-box .footer .messages textarea { + padding: 0.5rem; + } +} diff --git a/frontend/src/components/ChatBox/ChatBoxFeed.css b/frontend/src/components/ChatBox/ChatBoxFeed.css index 729027c59..bbb371725 100644 --- a/frontend/src/components/ChatBox/ChatBoxFeed.css +++ b/frontend/src/components/ChatBox/ChatBoxFeed.css @@ -4,7 +4,6 @@ gap: 0.75rem; justify-content: stretch; overflow-y: auto; - height: fit-content; padding: 0.5rem 2rem; scrollbar-width: thin; } diff --git a/frontend/src/components/MainComponent/MainFooter.css b/frontend/src/components/MainComponent/MainFooter.css index 775f8db3c..ec64b4a96 100644 --- a/frontend/src/components/MainComponent/MainFooter.css +++ b/frontend/src/components/MainComponent/MainFooter.css @@ -40,3 +40,19 @@ display: inline-block; padding: 0 0.75rem; } + +@media only screen and (width <= 70.5rem) { + .main-footer { + height: 2rem; + } + + .main-footer a svg { + height: 1.75rem; + } + + .main-footer a svg, + .main-footer .links, + .main-footer .links a:not(:last-child)::after { + padding: 0 0.5rem; + } +} diff --git a/frontend/src/components/MainComponent/MainHeader.css b/frontend/src/components/MainComponent/MainHeader.css index 1a764c0b6..be89ccc62 100644 --- a/frontend/src/components/MainComponent/MainHeader.css +++ b/frontend/src/components/MainComponent/MainHeader.css @@ -4,7 +4,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - height: 6.25rem; + height: 5rem; padding: 0 2rem; background-color: var(--header-background-colour); } @@ -20,17 +20,20 @@ .main-header-left { display: flex; align-items: center; - width: 100%; - height: 100%; + height: 80%; } .main-header-left > .title-logo { - height: 80%; + height: 100%; +} + +.main-header-left .title-logo-small { + display: none; } .main-header-middle { display: flex; - gap: 1.5rem; + gap: 1rem; align-items: center; } @@ -41,9 +44,81 @@ .main-header-right { display: flex; - gap: 1.5rem; + gap: 1rem; justify-content: flex-end; align-items: center; - width: 100%; + width: fit-content; height: 100%; + padding-left: 0.5rem; +} + +@media only screen and (width <= 77rem) { + .themed-button > img { + display: none; + } +} + +@media only screen and (width <= 70.5rem) { + .main-header { + gap: 0.5rem; + height: 3.5rem; + padding: 0.25rem 0.5rem; + } + + .main-header .main-header-middle { + gap: 0.5rem; + } + + .main-header .main-header-middle .main-header-level { + font-size: 1.5rem; + } + + .main-header .themed-button.level-button { + height: 2.5rem; + padding: 0.5rem; + } + + .main-header .main-header-right { + gap: 0.5rem; + } + + button.level-mission-info-banner { + padding: 0 0.5rem; + border-width: 0.5rem 0.25rem; + } + + span.level-title-area { + min-width: unset; + font-size: 1.25rem; + white-space: nowrap; + } + + .main-header .header-button { + padding: 0.5rem; + white-space: normal; + } +} + +@media only screen and (width <= 50.5rem) { + .main-header .header-button { + padding: 0.25rem; + } + + .main-header { + gap: 0.25rem; + } + + .main-header .title-logo { + display: none; + } + + .main-header .main-header-left { + width: 10%; + } + + .main-header .title-logo-small { + display: block; + width: 4rem; + padding: 0.2rem; + } } diff --git a/frontend/src/components/MainComponent/MainHeader.tsx b/frontend/src/components/MainComponent/MainHeader.tsx index 1613a2ba4..b72115139 100644 --- a/frontend/src/components/MainComponent/MainHeader.tsx +++ b/frontend/src/components/MainComponent/MainHeader.tsx @@ -1,6 +1,7 @@ import GettingStarted from '@src/assets/icons/GettingStarted.svg'; import HandbookIcon from '@src/assets/icons/Handbook.svg'; import ResetProgress from '@src/assets/icons/ResetProgressIcon.svg'; +import SpyLogicLogoSmall from '@src/assets/images/SmolFace_sm.png'; import SpyLogicLogo from '@src/assets/images/SpyLogicLogo.png'; import SpyLogicLogoAffirmative from '@src/assets/images/SpyLogicLogo_Affirmative.png'; import LevelSelectionBox from '@src/components/LevelSelectionBox/LevelSelectionBox'; @@ -34,6 +35,11 @@ function MainHeader({ src={isLevelComplete ? SpyLogicLogoAffirmative : SpyLogicLogo} alt="Spy Logic" /> + Spy Logic

Spy Logic