make notif box a resizable textarea with placeholder, for easier use

This commit is contained in:
nelle 2024-07-08 16:59:15 -06:00
parent 6c3b9f3a13
commit f7630eaa19
3 changed files with 16 additions and 9 deletions

View file

@ -59,9 +59,8 @@
border-radius: 10px; border-radius: 10px;
} }
input, textarea {
select { width: 85%;
width: 50%;
appearance: none; appearance: none;
outline: none; outline: none;
font-family: inherit; font-family: inherit;
@ -72,7 +71,3 @@ select {
-moz-box-shadow: 0 0 20px #f5a97f; -moz-box-shadow: 0 0 20px #f5a97f;
box-shadow: 0 0 20px #f5a97f; box-shadow: 0 0 20px #f5a97f;
} }
select {
width: unset
}

View file

@ -23,3 +23,15 @@ let chromium = /Chrome|Chromium|OPR|Opera|Edge|UC|QQ|Brave/.test(
if (chromium) if (chromium)
window.location.replace("/nochrome"); window.location.replace("/nochrome");
} }
// Resizable textarea
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + "px";
}

View file

@ -66,8 +66,8 @@ import Layout from "../layouts/Layout.astro";
<p><a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA">==> Youtube</a></p> <p><a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA">==> Youtube</a></p>
<br> <br>
<div class="ntfy-box"> <div class="ntfy-box">
<p>send me a notification! put word and press send</p> <p>send me a notification! type words and press send</p>
<input id="ntfy-input"> <a class="ntfy-send nob4" href="javascript:sendNotification()">send</a> <textarea id="ntfy-input" placeholder="Hi Nelle~!"></textarea><a class="ntfy-send nob4" href="javascript:sendNotification()">send</a>
</div> </div>
<!-- <!--
<p></p> <p></p>