From db0f5bf237e4335a595c8fd2c3a7e3991af46a5d Mon Sep 17 00:00:00 2001 From: sgenoud Date: Thu, 9 May 2019 16:34:28 +0200 Subject: [PATCH] fix: Fix ios design issues (#1199) * Take into account the layout weirdness on iPhones This makes the menu bar full screen in landscape mode and allow the snackbar to have enough bottom padding * Improve the icon for PWA fixes #1198 --- src/build/template.html | 2 +- src/routes/_components/snackbar/Snackbar.html | 16 +++++++++++++++- static/apple-icon-120.png | Bin 1320 -> 2557 bytes static/apple-icon-180.png | Bin 1766 -> 3473 bytes 4 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/build/template.html b/src/build/template.html index fd86e0d..9587912 100644 --- a/src/build/template.html +++ b/src/build/template.html @@ -2,7 +2,7 @@ - + diff --git a/src/routes/_components/snackbar/Snackbar.html b/src/routes/_components/snackbar/Snackbar.html index 6755dea..ab3599f 100644 --- a/src/routes/_components/snackbar/Snackbar.html +++ b/src/routes/_components/snackbar/Snackbar.html @@ -32,13 +32,27 @@ transform: translateY(100%); } + /* For iOS < 11.2 */ + @supports (padding-bottom: constant(safe-area-inset-bottom)) { + .snackbar-container { + --safe-area-inset-bottom: constant(safe-area-inset-bottom); + } + } + + /* For iOS >= 11.2 */ + @supports (padding-bottom: env(safe-area-inset-bottom)) { + .snackbar-container { + --safe-area-inset-bottom: env(safe-area-inset-bottom); + } + } + .snackbar-container { width: 562px; /* same as .main, minus 20px padding */ overflow: hidden; display: flex; align-items: center; background: var(--toast-bg); - padding: 10px 20px; + padding: 10px 20px calc(10px + var(--safe-area-inset-bottom)) 20px; font-size: 1.3em; color: var(--toast-text); border-radius: 4px 4px 0 0; diff --git a/static/apple-icon-120.png b/static/apple-icon-120.png index d80686bd8cde47fb0b34801541ebd2c4d18499ac..949e9594874ebfa406b87e151df8ffb589a896b9 100644 GIT binary patch literal 2557 zcma)8c{~)_7av7tCNgCw86#^MyT^=e7z`p=8p}^vW-^u;jFG{!g;%z0*=CHIX%JZo zVGQX-B}$?rq_4+D)4^CkO- zQ2c{Q(0xpApWtwc5e%ljUqt=yDtqm!|I_cD^ABS@X^$p(kB^ki-TA#^O7u53cL;N| zGJ{%MnCod8=;^6x!8HK@{9-lt&JvR$Jf*Pk5v?i z&e2eY=6crnOvy!8%IHG}JN`bM0pW83L_-MyhXLcIin>q4cF(&joVaSaGAXe0Fep=n zMgpG&@sFJ8o0gf>Q;Vi@LA`I+Sar?Azol=rYnG^ymT43>L4}a#)=Ha_5f48U{s9MScvWB9qJb2yF>JN`3lmwu=o- zsh$t#r8YL0*caUVIDk>N-=JkhvESa+1chMS!T^B7!u!etpcP910Ef1$(I{tX@fU_$ zkh6UXOb8}<$$Q|Es+~$`0h)|sZUZ>{6!&eGQ4;n=iF-U6#s^LEVb4r zE)3N)W~Ovrx!>I2obL{i0ulYodrh0>f{btIVB87OyQ?>~wP&IiaW7WZdpWyX{hUpk zl8g+rsjT3_p_5=Uon!w}zzc^Ad2&(O$k9SZ&3XhnVCO4`Twf5LW(gc+mD|5ua-Xsf z?fMmGuo^fsGv2Uy=(d1|uGV)3!jaK!C7mPNcn0XE-_y$J{j<_KU;<0oVx3G2ji1iz zeZWR=cI1u#+gasyLzxruq)BYUdsU&0Y~SU~=H!b5@{a;W1oX$20p)#Ck`+g$W@{Qi zl86yO$@u1DcEHH)>f`T9+_gqw)>ZVCxQ})^a_GC5v2F$z%Sn&Aj(f(OHJ+ZK3oV`L zIbMo?pT*x!)cL|>_@~{}t|tNIzNyh5tWg`}ct~5*E0y}M$_qcvxgws`1?JJK z7m^@$Koy$z+csM10{W;O@Z0C2jhfI?T6Bk#320%n3x%Y&+^0`)|53^(m|-S$27gQm z9IFN?(IAfJacU(*RE^G23t_XyJY-qARo?@}I|PgTjoPqsC<%J<4#Di&d)2tsKdVRO z_~cSf(I7dD8jtNdnR573mQ!&m>t64DwN2NsIt|6Zr>q`v1xjtRY# zP+$j-Er|&r2GJVp^iwXYowlfT&0-Idv+3#=gQRcTM;uHqBG4_Iw8W!_H6-f(SiHlg z+u#*js+6C{i@FOYgCtv$>y=;l2BAIDX|Ez%1!iJZFEk8D4+WtMqN)@RM#%lVgTu!f zSEKrFHJz_7>-Bw78=>qhGAK19fNpp3X`*qYU&OG>l}jX@59waMT0a>6lUMqnqgyeX z>BZ-+ba$%?m;gLV^7Sg98@27jI=iBWN_?!4^|ox;Q++XdTfN4#p0q5W^F zlKL(gN-Zl2^d2$o8Cu#c^%M+i&`E@3-ooRS6?~;F-|N~4q3gPh_*m;|h-7Y=jER(1 zUy@wZl#ld^y)tlhRnAvvo~3ksxQ)|k$rY0lnWFRf3AL~U5&lAh!odNU#vaZaFB5dj z5xqQvS57`lC68jkjB#-pK)XpmW=hvwkX^t`F1vgIe3uRcUxW{?@^0PWGl_hUJH?8MyoyA_b2S1hmrDDswr=8Efl@$wmMgaBP~T@&FvK* zE%MaU9B^|TP490r!x zfUSIw{VF>*f|>g9>TRVM2aAN18m`#)Qh3d!`Bic5LQRK&-vPR!(dBOOb6m%%WK7a= z6G6RVP}S_y>4~}eO`gNJu8R6iX?kKj-vOna%;Ghar;&u?7z9wv*anEnfUQjQKfL{% zF}ZG=`&+}3YoM|~aZb{B_eunM;{@r;e9H4TEq9gbW*ipU?7u&CdZXPMifrCZ5?=-$ zJCfi<*##~2DRxzGWZmiY!v!r(CkQFbPqr80s0#`C^R^8z=Tz>*dPbYHabQhwdV=Vu zVfql=X0thAR5o_gv?o&>Q8B{Gk*!2F#iD*aQ;O8nbF99VS!D1>c~s zikrsf9|CEF8$Z|2PLz*xADWCN{QT%1H1O+nH5pZN->XtHI45DFgA|=OU@{+F8PL){ z8ovFt9+Xs=^401thQwWL>><$?>zEGZ{;U{iD9X1ZEGTQ|JP=1VUMmc^Sbh1V33PJ delta 1312 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 delta 1761 zcmV<71|Ip58|Dp=8Gi!+000UT_5c6?0wPdMR7F8);Z=F$i=*tMxA3#W^P;x!iK6UM zcH?J<=gHLe|NsB}{rT-|hNN(cl?)%{8 z`a^5shM((qlj+6L^|!|J=j{91;`#CP{PXqwMs4A3jOfVJ_J3A-882yLTcf`&h^{l`ReccWrgPS_Wk?({(+n8{Qdrnr0kci?xD2s zptSItuu@AQFY_j-}t@D^pvXZZ;j~f@%&VH^Z5DwuD|lw;P_;P=GNZ$maOh_kbmf}!17>$<)^ywp|$Yj>H1@Y z=AX0gy2$j3qwGp>;$45`_4oaDlj*X;@_?J`c$MkK()N6q>P>Uwu`?f zw}%^kEZSG z@B8fV{C|_G?%d<~L~G%Hn(DB@@`$1AsJiirqU_b)_)vA@Y>VfSsO{wH`r+vMbCKzp zukXy)_gQ@8KNT(_000DkNklk3qNyvw2$`U zcRuZ-{VH@o`{5LGKxswo$1tS_uMzm=~h{jqWMC0g~5RDT?bjC-B zM)g$GcqW3zxhT3PgT_$Md@&b7M=s^iS6Lx6uEosCNB}MUAUBXh-`>fX?<0a}JjkFQ zA&G81NtmNmQ8b=Q0_YdWqA`$Iv@|+@|9|J`S4gAZ+OY?1+mR>=!?T^9*S3zcuWj45 zZQHi3W83Hb`U$d=N-9;W$IbTy|3G0a&VXinmc<{v_aE(7N2F*g*WSMUCZZ=FfKCT# zBASPw(U!wzqB|XdK1XRLnv0>$vF@g#ryhVV<7g_H+n~vD*Ie|8HPB-b%|-Jhw0{^# zlhLF0K!a1KjYjhfG&o7K(Pt6ex$cIexfGF|r|IYmh-wavM_=56Xtqu;9vyw|xD;cPAGXs3DMoQLc#nT5z%~(;2!p;jOe2XZ0rjPiB2J~o|FDrD~-!!e8L^;vD5Xh_76coJ}L9Bd3Nzr!@#083qcDKUcZQ71j9~9rZ(to0Rz|Xt6 zloovnKDy*ErfBDVSoh)M;GaPpREQQTiB6)E=p;Ic7A%QQqLb((`UA!K2roA&);f5} zrdXfgWedgH3NHgFmHQc?seb_JWL%^`Co+)MzZ9qt=@n6+Vx+g{F~ynG7d|dfoDJ}E zo#MQMpRo%l%=@wMRYGBUz+XlwMJdZb0M{r=IfB@eOF>5MLm<;B$ZiBPpn_t2twcZt zE`@O4A+Y-tVhDo!X9Pt!ybubiC_-;2sipwipe7?l>n>+N(YZ;q?0@kiD0|+GR!x3_ z5PrC{$gM#rU1`xZgj7pwHX*c`v}D^@gje2)7P#9HNzr5)*R2i_4a%WmBSs^#k@Ykx zbpRSvj&W(upDUq9@8L9L)JtfydRr$N;2vs#PR?b+bC)_;!rE%mQmGt61B-0*E<77e0JJiXb3;iKC`tFCapYD zHS5C8-0lpad+yZ>vw9z?ge{e?jva9n9O-yfiC@uwJ8bEMl%VY-00000NkvXXu0mjf D*m%+j