Added resizing of input boxes on input

This commit is contained in:
a-ill 2023-07-20 13:26:26 +03:00
parent ca3acdf8aa
commit fb705bab7c
4 changed files with 59 additions and 12 deletions

View File

@ -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 {

View File

@ -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

View File

@ -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 {