From 3ce22bcb32b30ca66868239f911e778457ba396f Mon Sep 17 00:00:00 2001 From: ArtemB Date: Wed, 18 Oct 2023 16:16:45 +0300 Subject: [PATCH] 0.0.173 upd style.css for header, add switcher for languages --- static/css/styles.css | 84 ++++++++++++++++++++++++++++++--- static/img/png/en.png | Bin 0 -> 1564 bytes static/img/png/ru.png | Bin 1588 -> 929 bytes static/js/global_js.js | 45 ++++++++++++++++++ templates/blocks/b_header.html | 11 ++++- templates/tb_base.html | 2 - 6 files changed, 131 insertions(+), 11 deletions(-) create mode 100644 static/img/png/en.png diff --git a/static/css/styles.css b/static/css/styles.css index 04767b3..f1e2970 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -215,7 +215,7 @@ body { header { width: 1280px; margin: 0 50px; - padding: 40px 40px 40px 40px; + padding: 20px 40px 20px 40px; position: fixed; z-index: 1; } @@ -593,6 +593,76 @@ span.btn_profile_name { margin-right: 30px; } +/*Language select*/ +.dropbtn_lang { + padding: 7px 0 7px 0; + cursor: pointer; +} + +/* The container
- needed to position the dropdown content */ +.dropdown_lang { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content-lang { + display: none; + position: absolute; + background-color: #f9f9f9; + +} + +.dropbtn_lang +{ + background: url('/static/img/png/ru.png') no-repeat left center; + padding-left: 25px; + width: 40px; + color: transparent; +} + +.dropbtn_lang::after { + /*background: rgba(0, 0, 0, 0) url("c_keyboard_arrow_down_48px-16.png") no-repeat scroll center center;*/ + content: ""; + height: 16px; + position: absolute; + right: 0; + top: 7px; + width: 16px; +} + +.dropdown-content-lang a:first-child +{ + background: url('/static/img/png/ru.png') no-repeat left center; + color: transparent; + padding: 10px; +} + +.dropdown-content-lang a:last-child +{ + background: url('/static/img/png/en.png') no-repeat left center; + color: transparent; + padding: 10px; +} + +/* Links inside the dropdown */ +.dropdown-content-lang a { + color: black; + padding: 2px 0 2px 25px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content-lang a:hover {background-color: #f1f1f1} + +/* Show the dropdown menu on hover */ +.dropdown_lang:hover .dropdown-content-lang { + display: block; +} +/*END Language select*/ + + .header-second>div>img{ margin-right: 5px; } @@ -1763,8 +1833,8 @@ button#more_button{ position: relative; width: 90%; height: 194px; - margin: 0 auto 80px;; - padding: 145px 40px; + margin: 0 auto 0; + padding: 145px 40px 0 40px; } .top_block_static_wrapper{ @@ -1774,10 +1844,10 @@ button#more_button{ url(/static/img/png/Box3.png), url(/static/img/png/Box4.png); background-position: - bottom 115px left 200px, - top 145px left 80px, - bottom 100px right 180px, - top 145px right 50px; + bottom 83px left 110px, + top 230px left 218px, + bottom 34px right 58px, + top 209px right 210px; background-repeat: no-repeat, no-repeat, diff --git a/static/img/png/en.png b/static/img/png/en.png new file mode 100644 index 0000000000000000000000000000000000000000..705038314a801d745db37b878bab6b97212917bb GIT binary patch literal 1564 zcmV+%2IKjOP)!4P;AXVzzPhGMG*y0!~>dFmVVNK}02>!_rcu@BUDkD3^8;{UzT&-#OoTo^#3j ze22kUoL2XTp$Qh;7k_dB{6v^q#cW&&4FnKNT71$y%qCQ+ssm>~vL zhbnp+p6j;7X1$P;tk}cIP)3Y`0Emp4(Q`xuEMvr#aT4WjI0OnzGawBa$@sdf1lj;& zR;hdV1Z-qXcmejo!;CXvub9M$%L6d}4TN813gft|kSJw68kn}|TN&fnIRI9DDE=H~ z!$8^dm5I_W4FrWAvp5*BC_m$<(n@M)+2`^$)?y^@39yNnAo?qEUgVJ140ul-bwM^} zgvfj51eBcJiiovx2+a9!EG#hRBVw%_#Rr$b?MMQ&n|GRj*uS-~lYs+EqWo+(hPl;7 zt60*xd5{&jr+Y=65O@=Sc-(8I}95B3*S2y`V*_ zr)bqVA|kq>?tL%Y1@UXw6jLoz(3jzMhdVOV9JLEU%9pmz7gu(eAud|eQP0&{Fqc=bAaMdM9W z&W-{&4%Q)yVH>dqoJa@&sJhdDby25~b-n}uL?FRjr01y1$V7Tt0aHlJDK6pJ+$@zo zsJ&^**+O%Ekx}n@!=|~-kzI54q^B7AvY92V}bCK;${)@ymSqns;UJ!Q@&eF?l~z{1@X zLjo6=G{%*j;!2)RuxdMFECqO0yJI8$Fvigu0ASFyqHcd8?(I*4p{)&;pU;J3!VaSb zCw&|4C#IriTO3HQ$IxZ|c>2{stlxL~MIizKQ5^blS+>Ilwj}Qjz^^~7=@4%^dl71P zU)+sJfY8|qqt7HGdx}S|!r{BqplQ*Ay~l^O;tRO^k&eOh=b--32|S(`ghUS;WE@ez z(ZQ+(B6bDP~~vds}s<0Y1xB@cJ?q<(2gS0P(Dko~7ZgP-t)5Lf!eoaNzk5XH3}qOCC4E z?^vW~+gVJRgkd{F5qqf`yM6aTt7|h__*HWA%Hit03!w@xYzpy$Q1EP9t_-#>4ECG$ zQ-=Wn$ZOQQeYPX4rcO3dupsnQhx0c@*V=}t1KCJCnTH)4eK2`~y{53b(ep)nhk?k< zy$v@Uj*m~>6L$fCZJ(&WL~Z>e1Z+sIlTUZ~IP18gtR%o2pxVAR0HB7L z+3c+2icUAB*R!Bnr6x1JD?pd}PMhTuvG-ARu;kU2uEXe7+(Rv=x$?b<*s5Ex<@2MB~c-{ z)r&+0Jyt|ibRjT&2*G+N2!&p{KrcP?PzXT<76g?^fpjB-2y|toq}+DLb=SSj%;_Or z#H`(9FW=LdbN-y~H*o&*ogv6jfk2>`F}9O)z7@bK03HA(6U!k0J^=3sAx{&D#6wk8 z!&NP6A*V8c$aeK!>6z z=LsRPi~%%FTgW-@1h9OT#?$pm6vd{ZqM~nU0fNEc8bU}H05wbIlNvHjbEnhk{P0(R zi8p_l1M?IFV{Dx)%fpisbaKEsw{gzz=Fl7f=Igrt!0-1ChN(k3RW zSU4)4zS`x_tNDb)6FVwT(SaWkZvo5!0KV^WFZKP1y9)*|68F$hRF~41=0>4N(oO^6 zq);e;KsYJTw0WFE5kf#+4$&wSfXl%Qs@U0hp#T)S7^NQ7<|`C{N3{;nnlkB8p#a=2 z+e7A@BVTFf@6YOE<1`X8FgmUynlNFQJga5`C9qp4iY103n*b(DrdGD3g8+cfd$=$5 z==svDI;N3r*Orf-2iI3n0AR~&j}tL}VMr_@=;G>Qz?3VQujzPCtnOF6lnc+xA;Yo{SZrQlzlXXeWv5NMVXaB0rIF0*HUYtwEBF%hwWV00000NkvXXu0mjf D;{Tur literal 1588 zcmV-42Fv-0P)R;oA4ybV7J)W>qzOc7N)o%N_7U2yijY_gr4URPKIq158wimu z8d_4&MN36NYKt1Mn2ul$_hca<}vE z3Q)rCMQdxT$ji$UZnv9Y!US3u)tk9vVD$mHsV5_UEOi>h$vx#RG#!NbJZ$u&y zGb=00N?=Xy84$68m-&SY7X)^zfdLhht6)aMm;;NbE|*I&O;gy^3BfJPqJ>N>h{vV@ zU^=cN9*;+-doXCt%*>cC0<|3=-qzM8K)JvK8YXkBudh2Xu>)#yUc7kmbud*9K(Aur z0FKP)CPMh{2!K6VSXlVIzrTM#)3gn2Vq;}xC9=4#ITD_ooh4vab#=A* zLO?M!<>uxp*pes+*7#oYg9Ec?= z@xS6ZbZ}9!8C+^GP={d{E~w|@f`WpM{erO<5h74rT>NWAMa31&>zSLIbCF#lWYAiC zJ3zMGOifLxpi{#n?(^r*Uxlr-#BAgx#drAd;d|KNM=%37?#V6{S~D@IDzOWSy3nt> zv9aNR8@o=QK3#}-^F6>gSqcT}dJWFe1*2bvU0N`7tD~bs_VxAI1|DOGQ>@9(&KA%u zvEwW%D*7o!%p{Aiu(0s{+S-~!*L4lrP-*ShpbdxuAi!|wRV9HPeE=}W*Z~PPTvAzC z`60Ye!>t0A;@pUY9m0Dr#M_&ft!ntf%%H%HI^3fd)Pa^cYS|=DFFkg zN1RkU@fIX>B58lOec08y_E+2w0{fSdgVjG=&W#{#jJ=QZ<Nbp%scFW#qj&@ z0F2(#(__%uEE=HWfTENc)V54~)%+uRnjv;j!o~Dh-Pb?RTIJ>CadkZhh!B!tQ4fU@ zGZHE~bqz6KnWb20&d`aISK;bc7f%lK>P0 zD2Yx%E|r!o2G72I|COP?fPE72=gDp+Cnv4i+FEP7cXs^x zk<`g5$T`Znhu@u3S3_6O0G2V!JcW-#{wM&bmQN!DKhiV2osVn2>_g{bA~l! -1){ + img.style.background = "url('/static/img/png/ru.png')" + img.style.backgroundRepeat = "no-repeat" + img.style.backgroundPosition = "left center" + + }else if(window.location.href.indexOf("en") > -1){ + img.style.background = "url('/static/img/png/en.png')" + img.style.backgroundRepeat = "no-repeat" + img.style.backgroundPosition = "left center" + } +}); + +window.addEventListener('scroll', () => { + let headerBG = document.getElementById('header_bg') + + headerBG.style.backgroundColor = 'rgb(248 248 248 / 90%)' + headerBG.style.padding = '20px 40px' + // headerBG.style.paddingBottom = 'padding: 10px 40px 10px 40px' + // headerBG.style.paddingRight = 'padding: 10px 40px 10px 40px' + // headerBG.style.paddingLeft = 'padding: 10px 40px 10px 40px' +}) + // Действия при изменении URL + + +// function changeImgLang(el) { +// +// let img = document.getElementById('dropbtn_lang') +// +// if (el.innerText === 'RU'){ +// img.style.background = "url('/static/img/png/ru.png') no-repeat left center;" +// } +// else if(el.innerText === 'EN'){ +// img.style.background = "url('/static/img/png/en.png')" +// img.style.backgroundRepeat = "no-repeat" +// img.style.backgroundPosition = "left center" +// +// } +// +// } + + + // var window_messages = document.querySelector(".container-messages") // function middleWareJS (){ diff --git a/templates/blocks/b_header.html b/templates/blocks/b_header.html index 8505075..d9c4b14 100644 --- a/templates/blocks/b_header.html +++ b/templates/blocks/b_header.html @@ -1,5 +1,6 @@ {% load i18n %} -
+{% load base_tags_extra %} +
@@ -26,7 +27,13 @@
- +
+
RU
+
+ RU + EN +
+
diff --git a/templates/tb_base.html b/templates/tb_base.html index 8472ec9..32d7b90 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -16,8 +16,6 @@ - - {% if user and not user.is_anonymous %}