From 9caec782000956561d757b2b32303657c1bd7800 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sat, 12 Dec 2020 19:09:38 +0000 Subject: [PATCH] First attempt at clock styling --- src/assets/images/moon.png | Bin 3035 -> 1613 bytes src/assets/images/sun.png | Bin 3366 -> 4388 bytes src/components/map/control/ClockControl.vue | 39 +---- src/leaflet/control/ClockControl.ts | 3 +- src/scss/_placeholders.scss | 1 + src/scss/leaflet/_controls.scss | 11 ++ src/scss/style.scss | 184 ++++++++------------ 7 files changed, 93 insertions(+), 145 deletions(-) diff --git a/src/assets/images/moon.png b/src/assets/images/moon.png index 5907d3f005b89b53b7ceee53d203eec94650ab0c..589cd24099896194d87e0b1f411df1f819c3f098 100644 GIT binary patch literal 1613 zcmb7_`!~}K9LK*im$~e*ND+~eZlq(f;(3&%kWz`+7$%y=T*_^^WJ8gZ4&}BXy2;&k z6tVfHRE#ZYaw+zN=C%#R9u^+YInO`P`<(atbIhfcq6Po}+}X*& zZJoL6rofcf6LCfzu@2P;CtM@|sB8ac2vEq-1puWrX9s(C3Pb$GCEeh-!MizWYfvo9 zgm{{0nPH)&HTS^boBkZ!F4;80_s{gQi4GN~ZOLkAMfTM353uB62lRm{`wzQ=vt8bx z;+*?rJ0}Y-TH{diiTSf%S?p1XDcUrrXgQJ4FD{Uj5=E_R6|0`nDe1o5makyN-?Fc1wUf<>U0a2Ekp_d34y1*YurWrJU0q-9em|9wDoNYo{875of z>Myicjpmq?Vk)Djb`&kf#m)NWYL4Z_NwYRVV?on-nJ$>065 zttk*kB*uhsmbT8qjU$$6(=-8?2SVBk#ttq?YiKRkH@0@P-}#x|GhGJ6+ZWf z9i&(`96;n!Wz-+EBG4Pe2=@xTh0fBIH|X$Sq6H*Rp~rRWLc;jUp$rK>Ui$RM{(TS( z!t(QLa41zFWar4`U^1CJn5WyY~3 zMUgHv7A%03MO{hl5PQ#yxcBO}H>4u4A+VH%GHwWhx9UansQo;|-C)?S-lF6{48Mqrz%p`d&2#nG!68@=^W#XsM6>EC`k@iKb)``4bs zpU+H6$Jr&FOfu8AmOp60wcLCEpk2)J*BoIIu(IO0ktCgbD2e%5$94NsQbPamN=zG zZWktRn4fpYC7q(7A4#~{7JP#woch&M1FNf4-F$vy#)BrU#tX%xz^ZGuNvGt%pgUa1 zu+?v**H!p)X58?8Sd8)d=G}8%mrtE+BrLqp4PV|AO|Zw_K8x4#yVM$G$7QbJPx$3e zU-@Om)ip2(T$&$$L<%N8*P|Fvn!Kv7^-S`kY|@+dDNanR=zMRS9P%U;N|3B)!3~4G zK7l{=D$ieNo%H^nbcM=eQN5_ia%}kWlT3lX`q!V;dF^w1n#nbE&duNWt?BQ}7A%+> W#4B!t9h~)k0GyAzI@F*E$^QaV*C3Vv literal 3035 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 diff --git a/src/assets/images/sun.png b/src/assets/images/sun.png index fa2d245542efec9cb2c99bd87d383a59302bb011..fb77713d684eb687537f4fa60c7c733737c7ff2d 100644 GIT binary patch literal 4388 zcmai1RZtrYvn4GKDems>?kyhN-6;}WOL33^T6o-!YP(m(s$-AKb^L2SiM(R-;om!@WHWAz)u1ipcMoO_cZ zKe5OoNX*%2sPiGW?%&{0gh2GaqlR~q4+sCm@0!->{`xcq*zvgiT_CG`7Qa)E?(=nj zZlb*pD7F`uayoeOuaEaXZSB$}#c_6(9lpS!2#yNPuKasxu(NPqn{#`>cmJ(@n?~fh zbLyZZGoofSQE9$qUiF4tU6j2s8g#(yK`*r|f5yA_aYh@i-Z_6cnT0YgY885w#%{ip zoOe5Y5Xb~vulZV-oH4oZoSlE+FZ43Ww0hjAIvx%>T3{R49cJ$$$Ca$Bge292 z$=%{mSGu&~P*1mLsQ|C$P7z)-lqo=yS&mO!$LIY74O4E8x~>}%i$`4 zV?n2tPK(ohW0#)O8?m$QW96lF!>6rFrl$0D!xScM$-3ZiQhk|oDsB4mlp_&3Yb{)o z^E`kZ_lzNVB|d!8cX}H?rU*T@CNH~SoKGG-mZ4H8aC~if@~N;pQuJA4eOJnc^YhVj z%p{W5t@V0PvVeE4nEHsB?jcWH=Fv`X9KlC+qSou`(LSb!mrQ#Irpc&@gELm$Bq?Sq z*vBO)%|auQB-9^Df7k{;j$Lgv)PhewFqpwG~6lSwyQ$!nyxJ-k)Jv; z2>%PoJ6g=1kgR}GG+~tlF>5GhGtgu#DHRTt?(v6zj9IL~0@K-|J5n^45h@(B2ew-B zCL9kmXzmtl=%z2v;2gnsoxqJ_ZmbD0np+(4g?2K0JGMtoIrfkC=GCfIbqqVKE7|I* zC`;O1#ayt{Gp$e5+}tG77LB@9Qbp%Y2OV^+gYk^=MFzcDMqPT!vR%+9P912)F?PwH zMPW%J(@9q>+VteMd)_->j-wTC2p5>( z+C$T5+iNA;X4YEi7ewzDx8o4E5fTe=x`nuuy%$8K+AX95)1>Tr2jFb)nF!+g*^<_T z%5SO71%k|v^g`a4*Ys=hv#?gZ)p5~`As{b24ZQuDWb=+dIpi&ftsFLfxB3eYy54%_ zSa}u{Q4^YYtVQ3@f8E^A+CUYODpm6l2|tI%&na^Y9O}tkhMAx&qNv%>!*lJx)p$Wl6Pdtb0p}%|DOAYJUoTeV-j`hyG!tv{jKNuzIdcD3%WDERw%yF>S!c z6Dc$>1>nYK3`PCSQ;YO(>YFM_;)f$==}97eKt8Im8W>%ozKy)E5`Bxv+ulJGm`4I2 zL#fO%OlnOG9}nsY^DqXE4{+Z1D^CC3gE=LngYjsL-B{iFmI7KWcZMAWKlNK+^)orCTJW6L|v*ar1ugb9;R1H zL&(Cl`k%af)sY_k{lN1+kzNOfSM3xZ6#kCaZ$olXlQxx=ZghX!*c@Hk5+RS}=O`EF zRC*VvoUT(U((8W2mm@pYW!AFL-j%K_v$l}?qLA@V_vK}9=8x2nxm|FJQ9n+Jr=@Yf zQQ?y|2-?xYdxBdn#mohfthi7sTj1ljIt)1Vqsxq`erwD5g!{8DJ0$GmSk{CNbiVWRkC0&v4Wit@p z`1t#M^5JJ!*)P(EjG`dh=aIeNJdq&GoL$?=`&!O+e>g+}hf$+iE6xKHegx6Tc&S5| zxwF(doj869ln^Xp$Bhfq`4x=iiBoE@9(zS&sf%zeSedQ+s+Z>eSls2)Gm^Nnc4tz8 z4HhLZQeRsv|HP-Ir)D0}<|lge>xR9_Z*Ksbz$b@O-N{PX?!tGt_W z1MkLq7MsIUKqeKj9CioHA!0OmChHESYA`Z+g0|vomL+*(6>Zf0Dm!Pd6+=NK>LE9} z1snEGZ=G78l+ziqsF?+hI?*mVplA!N4ykb+$2^FsRIO<(oW-Q+5Ip|esZq_M$mXM` z8vgl^Ga?^OjT;uV&ynO^n%dY*3~DD(-`_{M9%{f)a838TdHMCNtEb#27z$S+w#k9I z5Ap!&CS@W$-$sR~9;qPs*onI9>0I8#493!SBqkq;-yzW|K^p2$bPMjlEY2odhmnDUMACs0f~7M2_{#|N>zt8OcQK7EyfCB&TEVz|OeC&<$M)=daVz`Mg*WHS zf=~Gj1Y@2aY_OuKA|L=Fz%nu#AQ_qe7t*itIVUhlLh;9Y;;4->B{|l2pRnD>G;-Oa zgQK-8t#H^=A=1_F7{5P%NQt5!9@cc@5WZ_R@OE=w`Zb`7jTrnshddYGv}EW!Svr>Z zT=;CO=RC0E@f|iPL0OjRPDquZJS!z$bB8X^MN9$T0XGMawt5K>-vzn(?FIaabFjJl z_?bLVY5ik}I(|QIu8L>#+$ebutB8a@W_Ebf`HJyR*}T(#wuj6n;Zz zm$hG3AJUJOS;0-_Sat1RB@%!X?f+8h{aIYxG7!e`Og-R+vTT_&ajq#EeO&Ob7W`R)e> zU)p|Rcs=8PMTnv0W5p?-b8*&>Df*}*wBb28!N0al z;?MKnV8mOK`_pX1YSX;r7OjQi8YNM!IS9|l&8_l-7_C_q>bgE;!|KF--|g;`hzZak zs%b`n-Msc8v*{_VlV0eyrvum7qCmz5Uv*^tL(Ii_Ll7+kjkEJ~#I%3~@M1)?Hq) z_?7*8IMA5NWL4|c@zg3SwC?OXMM<*&`5G>AsZ^kJ)5DO%e#LKba`~r9;JAY)_TF!s zIFEbD$a>K~F~YE*9j9rIaQ~~vCj#gOZjEi^@h4E*(Glju%B;?hMSpfE7L+rl$RNe5 zV)^*gmf1ZANn65z*5YgRJi@P&VmJ9v4dvs$LkmaPIYmYRF*eM8yI zO@I=(kU548$34?RAmnr>nKI3*xWu&6&rU{&_D1cpYW7AFbRd*ZBu4{^JhjGwzZ=Lp z)mUSP?WPY$PLSNP5SETIr_GCwriY1u^ywwWb+<5oHq~TnJ$#s_NbZe} z?qIn!0B48frh8?SPyl@Tq zbXrjILm>NQ_>*9jB^b=Yb?a+vJoqcd;?G&C#4iQi!lppO`Qx8If9kd^td<7%;aJ}t zdFpEY4yw1!Et$*zDAQm&XThCVfz?3AR9Uv{$1NuUyCgTb83q=JejoYi?= zEY}Val(f=qE_=-C`9>ffP!!>+S>aH?|9T$;1dFU^Ku>(ZDAvT?%zx7$IW^fjX^XJ` E13GtJ@&Et; literal 3366 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 diff --git a/src/components/map/control/ClockControl.vue b/src/components/map/control/ClockControl.vue index 4628de6..d768fe4 100644 --- a/src/components/map/control/ClockControl.vue +++ b/src/components/map/control/ClockControl.vue @@ -1,48 +1,27 @@ - - \ No newline at end of file diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts index 1ca0e86..d215487 100644 --- a/src/leaflet/control/ClockControl.ts +++ b/src/leaflet/control/ClockControl.ts @@ -19,9 +19,8 @@ export class ClockControl extends L.Control { private _weather?: HTMLElement; constructor(options: ClockControlOptions) { - super(options); + super(Object.assign(options, {position: 'topcenter'})); - options.position = 'topleft'; L.Util.setOptions(this, options); } diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss index 738b6b5..c2cadb1 100644 --- a/src/scss/_placeholders.scss +++ b/src/scss/_placeholders.scss @@ -32,6 +32,7 @@ flex-direction: column; padding: 1.5rem; position: relative; + box-shadow: 0 0 1.5rem 0 #121212; h2:first-child { margin-top: 0; diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index 20d2a57..a2b9af9 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -160,6 +160,17 @@ } } +.leaflet-center { + left: 0; + right: 0; + justify-content: center; + flex-direction: row; + + .leaflet-control { + margin: 0; + } +} + .leaflet-control-layers-toggle { width: 5rem; height: 5rem; diff --git a/src/scss/style.scss b/src/scss/style.scss index f379e49..726cba0 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -138,125 +138,87 @@ button { border-radius: 0 0 3px 3px; } -/******************* - * sidebar panels - */ - - - - -/******************* - * Sidebar clock style - */ -/* -.dynmap .clock { - display: inline-block; - height: 16px; - z-index:50; - - font-weight: bold; - background-repeat: no-repeat; - - padding-left: 20px; - margin-left: 8px; -} -*/ -.largeclock.digitalclock { - text-align: center; - font-size: 50px; - font-weight: bold; -} - -.digitalclock { - text-align: center; - font-size: 20px; - font-weight:bold; -} - -.digitalclock.night { - /* background-image: url(../assets/images/clock_night.png); */ - color: #dff; -} - -.digitalclock.day { - /* background-image: url(../assets/images/clock_day.png); */ - color: #fd3; -} - -.digitalclock.night, .digitalclock.day { - transition: color 8s 8s linear; -} - - -/******************* - * Large clock style - */ - .largeclock { - position: absolute; - top: 0; - left: 0; - right: 0; - border-color: rgba(0,0,0,0.5); - width: 150px; - height: 60px; - background: rgba(0,0,0,0.6); - z-index:50; - - margin: auto; -} - -.timeofday { - background-repeat: no-repeat; -} - -.timeofday.sun { - background-image: url(../assets/images/sun.png); -} - -.timeofday.moon { - background-image: url(../assets/images/moon.png); -} - -.timeofday.digitalclock { + @extend %panel; position: relative; - bottom: 25px; -} + width: 15rem; + height: 6rem; + z-index: 50; -/******************* - * Clock weather style - */ + .digitalclock { + text-align: center; + font-size: 2rem; + line-height: 2rem; + font-weight: bold; -.weather { - position: absolute; - top: 5px; - right: 0; - width: 32px; - height: 32px; - display: block; - background-repeat: no-repeat; -} + &.night { + color: #dff; + } -.weather.sunny_day { - background-image: url(../assets/images/weather_sunny_day.png); -} + &.day { + color: #fd3; + } -.weather.stormy_day { - background-image: url(../assets/images/weather_stormy_day.png); -} -.weather.thunder_day { - background-image: url(../assets/images/weather_thunder_day.png); -} + &.night, &.day { + transition: color 8s 8s linear; + } + } -.weather.sunny_night { - background-image: url(../assets/images/weather_sunny_night.png); -} + .timeofday { + background-repeat: no-repeat; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; -.weather.stormy_night { - background-image: url(../assets/images/weather_stormy_night.png); -} -.weather.thunder_night { - background-image: url(../assets/images/weather_thunder_night.png); + &.digitalclock { + top: auto; + bottom: 0.5rem; + } + + &.sun { + background-image: url(../assets/images/sun.png); + } + + &.moon { + background-image: url(../assets/images/moon.png); + } + } + + .weather { + position: absolute; + top: 5px; + right: 0; + width: 32px; + height: 32px; + display: block; + background-repeat: no-repeat; + + &.sunny_day { + background-image: url(../assets/images/weather_sunny_day.png); + } + + &.stormy_day { + background-image: url(../assets/images/weather_stormy_day.png); + } + + &.thunder_day { + background-image: url(../assets/images/weather_thunder_day.png); + } + + &.sunny_night { + background-image: url(../assets/images/weather_sunny_night.png); + } + + &.stormy_night { + background-image: url(../assets/images/weather_stormy_night.png); + } + + &.thunder_night { + background-image: url(../assets/images/weather_thunder_night.png); + } + } } /*******************