From 41998a13be0c9317e5d9944e6750e001f1f6d95e Mon Sep 17 00:00:00 2001 From: a-ill Date: Thu, 20 Jul 2023 13:26:26 +0300 Subject: [PATCH] Added resizing of input boxes on input --- .../svelte/src/groups-add-component.svelte | 66 ++++++++++++++++--- Server/config/libsoc.org.conf | 2 + .../js/components/groups-add-component.js | 2 +- Server/public/js/libraries/serverTools.js | 1 - 4 files changed, 59 insertions(+), 12 deletions(-) diff --git a/Server/app/svelte/src/groups-add-component.svelte b/Server/app/svelte/src/groups-add-component.svelte index 797e8e2..4f108da 100644 --- a/Server/app/svelte/src/groups-add-component.svelte +++ b/Server/app/svelte/src/groups-add-component.svelte @@ -68,6 +68,7 @@ city = "" } addressInput.value = fullAddress + resizeInput(addressInput) addressVec = [country,state,city] } getData(url,callback) @@ -108,7 +109,10 @@ let url = "/" + locale + "/groups-add-post/" sendText(url,JSON.stringify(data),updateConfirmationMsg) } - + } + + function resizeInput(el) { + el.nextElementSibling.innerHTML = el.value } onMount(() => { @@ -130,8 +134,20 @@
  • Press "Submit" to add yourself to our map;
  • Verify yourself by having a chat with us at our Discord server to show on the map;
    • -
    - +
    + +
    + resizeInput(addressInput)} id="address-input" type="text" readonly> +
    +
    +
    +
    + +
    + resizeInput(contactInput)} id="contact-input" type="text"> +
    +
    +

    mapCallbackGroups(createMap,$content,locale)}> @@ -162,20 +178,50 @@ width: 5.5rem; } - input { + input, .ghost-input { font-size: 1.15rem; font-family: var(--serif,serif); + } + + input { + height: 2.5rem; + display: inline-block; + position: relative; + } + + #address-input, #contact-input { + width: 100%; + } + + #address-input-wrapper { + margin-top: 2rem; + margin-bottom: 1rem; + } + + .ghost-input { + display: block; + visibility: hidden; + height: 0; + + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .input-wrapper { + display: inline-block; + max-width: calc(100% - 5.5rem); + min-width: min(20rem, calc(100% - 5.5rem)); height: 2.5rem; } - #address-input { - margin-top: 2rem; - margin-bottom: 1rem; - width: min(30rem,calc(100% - 10rem)); + .input-label-wrapper { + display: flex; + justify-content: start; } - #contact-input { - width: min(20rem,calc(100% - 10rem)); + .input-label-wrapper label { + position: relative; + top: 0.3rem; } .description { diff --git a/Server/config/libsoc.org.conf b/Server/config/libsoc.org.conf index 6aae4ef..2fbfabe 100644 --- a/Server/config/libsoc.org.conf +++ b/Server/config/libsoc.org.conf @@ -34,6 +34,8 @@ server { location / { proxy_pass http://127.0.0.1:8001/; } + + rewrite https://www.libsoc.org/communities https://www.libsoc.org/en/communes permanent; listen 443 http3; listen 443 ssl http2; diff --git a/Server/public/js/components/groups-add-component.js b/Server/public/js/components/groups-add-component.js index 56bd051..27843e5 100644 --- a/Server/public/js/components/groups-add-component.js +++ b/Server/public/js/components/groups-add-component.js @@ -1 +1 @@ -import{S as t,i as o,a as n,b as e,s as r,e as i,n as a,d as s,c as m,o as l,w as c,f as u,g as p,h as d,j as g,k as f,l as h,q as b}from"./index-4348483d.js";import{w}from"./index-71440b21.js";import{addMarkersGroups as y}from"../../../../../../../../../js/groups.js";import{loadLocaleContent as x,getData as v,sendText as k}from"../../../../../../../../../js/libraries/serverTools.js";import"../../../../../../../../../js/components/map-component.js";function j(t){let o,n,r,i,a,m,l,c,w,y,x,v,k,j,L,z,S,C,T,N,O,A,H,M,q,D;return{c(){o=u("div"),n=u("div"),r=u("h1"),r.textContent="Add a Group",i=p(),a=u("img"),l=p(),c=u("p"),c.textContent="If there are no groups in your town with whom you can organize then do the following:",w=p(),y=u("ol"),y.innerHTML="
  • Click on the map to show us where you are located;
    • \n
  • Add a way to contact you or leave blank for a pin to point to our discord;
    • \n
  • Press "Submit" to add yourself to our map;
    • \n
  • Verify yourself by having a chat with us at our Discord server to show on the map;
    • ",x=p(),v=u("label"),v.textContent="Location: ",k=u("input"),j=u("br"),L=p(),z=u("label"),z.textContent="Contact: ",S=u("input"),C=p(),T=u("button"),T.textContent="Submit",N=p(),O=u("p"),A=p(),H=u("map-component"),d(a,"id","groups-img"),g(a.src,m="/img/common/groups.svg")||d(a,"src","/img/common/groups.svg"),d(a,"alt","groups"),d(c,"class","description"),d(v,"for","address-input"),d(k,"id","address-input"),d(k,"type","text"),k.readOnly=!0,d(z,"for","contact-input"),d(S,"id","contact-input"),d(S,"type","text"),d(T,"id","submit-button"),d(O,"id","confirmation-msg"),f(H,"id","map"),f(H,"callback",M=t[13]),d(n,"id","text-container"),d(o,"id","container")},m(s,m){e(s,o,m),h(o,n),h(n,r),h(n,i),h(n,a),h(n,l),h(n,c),h(n,w),h(n,y),h(n,x),h(n,v),h(n,k),t[10](k),h(n,j),h(n,L),h(n,z),h(n,S),t[11](S),h(n,C),h(n,T),h(n,N),h(n,O),t[12](O),h(n,A),h(n,H),q||(D=b(T,"click",t[9]),q=!0)},p(t,o){16&o&&M!==(M=t[13])&&f(H,"callback",M)},d(n){n&&s(o),t[10](null),t[11](null),t[12](null),q=!1,D()}}}function z(t){let o,n=2==t[3]&&j(t);return{c(){n&&n.c(),o=i()},m(t,r){n&&n.m(t,r),e(t,o,r)},p(t,e){2==t[3]?n?n.p(t,e):(n=j(t),n.c(),n.m(o.parentNode,o)):n&&(n.d(1),n=null)},d(t){n&&n.d(t),t&&s(o)}}}function S(t){let o,n=t[3],m=z(t);return{c(){m.c(),o=i(),this.c=a},m(t,n){m.m(t,n),e(t,o,n)},p(t,[e]){8&e&&r(n,n=t[3])?(m.d(1),m=z(t),m.c(),m.m(o.parentNode,o)):m.p(t,e)},i:a,o:a,d(t){t&&s(o),m.d(t)}}}function C(t,o,n){let e,r,i=w(0);m(t,i,(t=>n(3,e=t)));let a,s,u,p,d=w({});m(t,d,(t=>n(4,r=t)));let g=0,f=0,h=function(t,o){let n=new L.Icon({iconUrl:"/img/common/markers/marker-black.png",shadowUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-34],shadowSize:[41,41]});return L.marker([t,o],{icon:n})}(0,0);h.setOpacity(0);let b=x(d,"groups-component",i);function j(t,o,e){let r=t([22,0],2);y(r,o,e),h.addTo(r),r.on("click",(function(t){let o=t.latlng.lat,e=t.latlng.lng;g=o,f=e,function(t,o,n){let e=L.latLng(o,n);t.setLatLng(e)}(h,o,e),h.setOpacity(1),v(`https://nominatim.openstreetmap.org/reverse?lat=${o}&lon=${e}&format=jsonv2`,(t=>{let o=(t=JSON.parse(t)).address,e=o.city||o.town||o.village||o.hamlet,r=o.state,i=o.country,a=i;null!=r?a+=", "+r:r="",null!=e?a+=", "+e:e="",n(1,s.value=a,s),p=[i,r,e]}))}))}function z(t){!1!==t?(n(0,a.innerHTML="You have been added to our database! Now go to our Discord to verify yourself.",a),n(0,a.style.color="green",a)):(n(0,a.innerHTML="Something went wrong.",a),n(0,a.style.color="red",a))}x(d,"countries",i),l((()=>{}));return[a,s,u,e,r,i,d,b,j,function(){if(null!=p){let t=[...p,g,f,u.value];k("/"+b+"/groups-add-post/",JSON.stringify(t),z)}},function(t){c[t?"unshift":"push"]((()=>{s=t,n(1,s)}))},function(t){c[t?"unshift":"push"]((()=>{u=t,n(2,u)}))},function(t){c[t?"unshift":"push"]((()=>{a=t,n(0,a)}))},t=>j(t,r,b)]}class T extends t{constructor(t){super(),this.shadowRoot.innerHTML="",o(this,{target:this.shadowRoot,props:n(this.attributes),customElement:!0},C,S,r,{},null),t&&t.target&&e(t.target,this,t.anchor)}}customElements.define("groups-add-component",T);export{T as default}; +import{S as t,i as n,a as e,b as i,s as o,e as r,n as a,d as s,c as l,o as m,w as p,f as c,g as u,h as d,j as g,k as h,l as f,q as b,r as w}from"./index-4348483d.js";import{w as y}from"./index-71440b21.js";import{addMarkersGroups as v}from"../../../../../../../../../js/groups.js";import{loadLocaleContent as x,getData as k,sendText as j}from"../../../../../../../../../js/libraries/serverTools.js";import"../../../../../../../../../js/components/map-component.js";function S(t){let n,e,o,r,a,l,m,p,y,v,x,k,j,L,S,z,C,T,H,M,N,O,A,q,E,D,I,J,R,U,$,G,P,V,Y;return{c(){n=c("div"),e=c("div"),o=c("h1"),o.textContent="Add a Group",r=u(),a=c("img"),m=u(),p=c("p"),p.textContent="If there are no groups in your town with whom you can organize then do the following:",y=u(),v=c("ol"),v.innerHTML="
  • Click on the map to show us where you are located;
    • \n
  • Add a way to contact you or leave blank for a pin to point to our discord;
    • \n
  • Press "Submit" to add yourself to our map;
    • \n
  • Verify yourself by having a chat with us at our Discord server to show on the map;
    • ",x=u(),k=c("div"),j=c("label"),j.textContent="Location:",L=u(),S=c("div"),z=c("input"),C=u(),T=c("div"),H=u(),M=c("div"),N=c("label"),N.textContent="Contact:",O=u(),A=c("div"),q=c("input"),E=u(),D=c("div"),I=u(),J=c("button"),J.textContent="Submit",R=u(),U=c("p"),$=u(),G=c("map-component"),d(a,"id","groups-img"),g(a.src,l="/img/common/groups.svg")||d(a,"src","/img/common/groups.svg"),d(a,"alt","groups"),d(p,"class","description"),d(j,"for","address-input"),d(z,"id","address-input"),d(z,"type","text"),z.readOnly=!0,d(T,"class","ghost-input"),d(S,"class","input-wrapper"),d(k,"id","address-input-wrapper"),d(k,"class","input-label-wrapper"),d(N,"for","contact-input"),d(q,"id","contact-input"),d(q,"type","text"),d(D,"class","ghost-input"),d(A,"class","input-wrapper"),d(M,"class","input-label-wrapper"),d(J,"id","submit-button"),d(U,"id","confirmation-msg"),h(G,"id","map"),h(G,"callback",P=t[15]),d(e,"id","text-container"),d(n,"id","container")},m(s,l){i(s,n,l),f(n,e),f(e,o),f(e,r),f(e,a),f(e,m),f(e,p),f(e,y),f(e,v),f(e,x),f(e,k),f(k,j),f(k,L),f(k,S),f(S,z),t[10](z),f(S,C),f(S,T),f(e,H),f(e,M),f(M,N),f(M,O),f(M,A),f(A,q),t[12](q),f(A,E),f(A,D),f(e,I),f(e,J),f(e,R),f(e,U),t[14](U),f(e,$),f(e,G),V||(Y=[b(z,"input",t[11]),b(q,"input",t[13]),b(J,"click",t[9])],V=!0)},p(t,n){16&n&&P!==(P=t[15])&&h(G,"callback",P)},d(e){e&&s(n),t[10](null),t[12](null),t[14](null),V=!1,w(Y)}}}function z(t){let n,e=2==t[3]&&S(t);return{c(){e&&e.c(),n=r()},m(t,o){e&&e.m(t,o),i(t,n,o)},p(t,i){2==t[3]?e?e.p(t,i):(e=S(t),e.c(),e.m(n.parentNode,n)):e&&(e.d(1),e=null)},d(t){e&&e.d(t),t&&s(n)}}}function C(t){let n,e=t[3],l=z(t);return{c(){l.c(),n=r(),this.c=a},m(t,e){l.m(t,e),i(t,n,e)},p(t,[i]){8&i&&o(e,e=t[3])?(l.d(1),l=z(t),l.c(),l.m(n.parentNode,n)):l.p(t,i)},i:a,o:a,d(t){t&&s(n),l.d(t)}}}function T(t){t.nextElementSibling.innerHTML=t.value}function H(t,n,e){let i,o,r=y(0);l(t,r,(t=>e(3,i=t)));let a,s,c,u,d=y({});l(t,d,(t=>e(4,o=t)));let g=0,h=0,f=function(t,n){let e=new L.Icon({iconUrl:"/img/common/markers/marker-black.png",shadowUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-34],shadowSize:[41,41]});return L.marker([t,n],{icon:e})}(0,0);f.setOpacity(0);let b=x(d,"groups-component",r);function w(t,n,i){let o=t([22,0],2);v(o,n,i),f.addTo(o),o.on("click",(function(t){let n=t.latlng.lat,i=t.latlng.lng;g=n,h=i,function(t,n,e){let i=L.latLng(n,e);t.setLatLng(i)}(f,n,i),f.setOpacity(1),k(`https://nominatim.openstreetmap.org/reverse?lat=${n}&lon=${i}&format=jsonv2`,(t=>{let n=(t=JSON.parse(t)).address,i=n.city||n.town||n.village||n.hamlet,o=n.state,r=n.country,a=r;null!=o?a+=", "+o:o="",null!=i?a+=", "+i:i="",e(1,s.value=a,s),T(s),u=[r,o,i]}))}))}function S(t){!1!==t?(e(0,a.innerHTML="You have been added to our database! Now go to our Discord to verify yourself.",a),e(0,a.style.color="green",a)):(e(0,a.innerHTML="Something went wrong.",a),e(0,a.style.color="red",a))}x(d,"countries",r),m((()=>{}));return[a,s,c,i,o,r,d,b,w,function(){if(null!=u){let t=[...u,g,h,c.value];j("/"+b+"/groups-add-post/",JSON.stringify(t),S)}},function(t){p[t?"unshift":"push"]((()=>{s=t,e(1,s)}))},()=>T(s),function(t){p[t?"unshift":"push"]((()=>{c=t,e(2,c)}))},()=>T(c),function(t){p[t?"unshift":"push"]((()=>{a=t,e(0,a)}))},t=>w(t,o,b)]}class M extends t{constructor(t){super(),this.shadowRoot.innerHTML="",n(this,{target:this.shadowRoot,props:e(this.attributes),customElement:!0},H,C,o,{},null),t&&t.target&&i(t.target,this,t.anchor)}}customElements.define("groups-add-component",M);export{M as default}; diff --git a/Server/public/js/libraries/serverTools.js b/Server/public/js/libraries/serverTools.js index 3748b19..1fca108 100644 --- a/Server/public/js/libraries/serverTools.js +++ b/Server/public/js/libraries/serverTools.js @@ -53,7 +53,6 @@ export function sendText(route,data,callback) { if (status === 0 || (status >= 200 && status < 400)) { // The request has been completed successfully if (callback !== undefined) { - console.log(xhr.responseText) callback(xhr.responseText) } } else {