Added resizing of input boxes on input
This commit is contained in:
parent
ca3acdf8aa
commit
fb705bab7c
|
@ -68,6 +68,7 @@
|
||||||
city = ""
|
city = ""
|
||||||
}
|
}
|
||||||
addressInput.value = fullAddress
|
addressInput.value = fullAddress
|
||||||
|
resizeInput(addressInput)
|
||||||
addressVec = [country,state,city]
|
addressVec = [country,state,city]
|
||||||
}
|
}
|
||||||
getData(url,callback)
|
getData(url,callback)
|
||||||
|
@ -108,7 +109,10 @@
|
||||||
let url = "/" + locale + "/groups-add-post/"
|
let url = "/" + locale + "/groups-add-post/"
|
||||||
sendText(url,JSON.stringify(data),updateConfirmationMsg)
|
sendText(url,JSON.stringify(data),updateConfirmationMsg)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeInput(el) {
|
||||||
|
el.nextElementSibling.innerHTML = el.value
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
@ -130,8 +134,20 @@
|
||||||
<li>Press "Submit" to add yourself to our map;</li>
|
<li>Press "Submit" to add yourself to our map;</li>
|
||||||
<li>Verify yourself by having a chat with us at our Discord server to show on the map;</li>
|
<li>Verify yourself by having a chat with us at our Discord server to show on the map;</li>
|
||||||
</ol>
|
</ol>
|
||||||
<label for="address-input">Location: </label><input bind:this={addressInput} id="address-input" type="text" readonly><br>
|
<div id="address-input-wrapper" class="input-label-wrapper">
|
||||||
<label for="contact-input">Contact: </label><input bind:this={contactInput} id="contact-input" type="text">
|
<label for="address-input">Location: </label>
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<input bind:this={addressInput} on:input={() => resizeInput(addressInput)} id="address-input" type="text" readonly>
|
||||||
|
<div class="ghost-input"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-label-wrapper">
|
||||||
|
<label for="contact-input">Contact: </label>
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<input bind:this={contactInput} on:input={() => resizeInput(contactInput)} id="contact-input" type="text">
|
||||||
|
<div class="ghost-input"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<button id="submit-button" on:click={submitLocation}>Submit</button>
|
<button id="submit-button" on:click={submitLocation}>Submit</button>
|
||||||
<p id="confirmation-msg" bind:this={confirmationMsg}></p>
|
<p id="confirmation-msg" bind:this={confirmationMsg}></p>
|
||||||
<map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content,locale)}></map-component>
|
<map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content,locale)}></map-component>
|
||||||
|
@ -162,20 +178,50 @@
|
||||||
width: 5.5rem;
|
width: 5.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input, .ghost-input {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
font-family: var(--serif,serif);
|
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;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#address-input {
|
.input-label-wrapper {
|
||||||
margin-top: 2rem;
|
display: flex;
|
||||||
margin-bottom: 1rem;
|
justify-content: start;
|
||||||
width: min(30rem,calc(100% - 10rem));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact-input {
|
.input-label-wrapper label {
|
||||||
width: min(20rem,calc(100% - 10rem));
|
position: relative;
|
||||||
|
top: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
|
|
|
@ -34,6 +34,8 @@ server {
|
||||||
location / {
|
location / {
|
||||||
proxy_pass http://127.0.0.1:8001/;
|
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 http3;
|
||||||
listen 443 ssl http2;
|
listen 443 ssl http2;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -53,7 +53,6 @@ export function sendText(route,data,callback) {
|
||||||
if (status === 0 || (status >= 200 && status < 400)) {
|
if (status === 0 || (status >= 200 && status < 400)) {
|
||||||
// The request has been completed successfully
|
// The request has been completed successfully
|
||||||
if (callback !== undefined) {
|
if (callback !== undefined) {
|
||||||
console.log(xhr.responseText)
|
|
||||||
callback(xhr.responseText)
|
callback(xhr.responseText)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in New Issue