fix textareas

tailwind
Harvey Tindall 3 years ago
parent 7e0e0b0520
commit dd5eecf9f9
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2

@ -391,6 +391,10 @@ select, textarea {
-moz-appearance: none; -moz-appearance: none;
} }
html.dark textarea {
background-color: #202020
}
input { input {
color: inherit; color: inherit;
border: 0 solid var(--color-neutral-300); border: 0 solid var(--color-neutral-300);
@ -532,3 +536,7 @@ div.card:contains(section.banner.footer) {
.pb-0i { .pb-0i {
padding-bottom: 0px !important padding-bottom: 0px !important
} }
.text-center-i {
text-align: center !important;
}

@ -173,7 +173,7 @@
<form class="modal-content wide card" id="form-announce" href=""> <form class="modal-content wide card" id="form-announce" href="">
<span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span> <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
<div class="row"> <div class="row">
<div class="col flex-col content mt-8"> <div class="col card ~neutral @low">
<div id="announce-details"> <div id="announce-details">
<span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span> <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
<div id="announce-variables"> <div id="announce-variables">
@ -182,7 +182,7 @@
<label class="label supra" for="announce-subject"> {{ .strings.subject }}</label> <label class="label supra" for="announce-subject"> {{ .strings.subject }}</label>
<input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4"> <input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4">
<label class="label supra" for="textarea-announce">{{ .strings.message }}</label> <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
<textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 font-mono bg-inherit"></textarea> <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-4 font-mono"></textarea>
<p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p> <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
</div> </div>
<label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p> <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
@ -226,13 +226,13 @@
<form class="modal-content wide card" id="form-editor" href=""> <form class="modal-content wide card" id="form-editor" href="">
<span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span> <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
<div class="row"> <div class="row">
<div class="col flex-col content mt-8"> <div class="col card ~neutral @low">
<span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span> <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
<div id="editor-variables"></div> <div id="editor-variables" class="mt-4"></div>
<span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span> <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
<div id="editor-conditionals"></div> <div id="editor-conditionals"></div>
<label class="label supra" for="textarea-editor">{{ .strings.message }}</label> <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
<textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 font-mono bg-inherit"></textarea> <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-4 font-mono"></textarea>
<p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p> <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
<div class="flex-row"> <div class="flex-row">
<label class="full-width ml-2"> <label class="full-width ml-2">
@ -609,13 +609,13 @@
<th>{{ .strings.username }}</th> <th>{{ .strings.username }}</th>
<th>{{ .strings.emailAddress }}</th> <th>{{ .strings.emailAddress }}</th>
{{ if .telegramEnabled }} {{ if .telegramEnabled }}
<th>Telegram</th> <th class="text-center-i">Telegram</th>
{{ end }} {{ end }}
{{ if .matrixEnabled }} {{ if .matrixEnabled }}
<th>Matrix</th> <th class="text-center-i">Matrix</th>
{{ end }} {{ end }}
{{ if .discordEnabled }} {{ if .discordEnabled }}
<th>Discord</th> <th class="text-center-i">Discord</th>
{{ end }} {{ end }}
<th>{{ .strings.expiry }}</th> <th>{{ .strings.expiry }}</th>
<th>{{ .strings.lastActiveTime }}</th> <th>{{ .strings.lastActiveTime }}</th>

@ -15,7 +15,7 @@ const hasDark = (item) => {
const fixHTML = (infile, outfile) => { const fixHTML = (infile, outfile) => {
console.log(infile, outfile) console.log(infile, outfile)
let doc = new parser.JSDOM(fs.readFileSync(infile)); let doc = new parser.JSDOM(fs.readFileSync(infile));
for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field"]) { for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field", "textarea"]) {
let items = doc.window.document.body.querySelectorAll("."+item); let items = doc.window.document.body.querySelectorAll("."+item);
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
let hasColor = false; let hasColor = false;

@ -194,7 +194,7 @@ class user implements User {
this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused"); this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
this._matrix.innerHTML = ` this._matrix.innerHTML = `
<div class="table-inline"> <div class="table-inline">
<span class="chip btn @high">${window.lang.strings("add")}</span> <span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>
<input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im"> <input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
</div> </div>
`; `;
@ -214,15 +214,20 @@ class user implements User {
private _addMatrix = () => { private _addMatrix = () => {
const addButton = this._matrix.querySelector(".btn") as HTMLSpanElement; const addButton = this._matrix.querySelector(".btn") as HTMLSpanElement;
const icon = this._matrix.querySelector("i");
const input = this._matrix.querySelector("input.stealth-input") as HTMLInputElement; const input = this._matrix.querySelector("input.stealth-input") as HTMLInputElement;
const addIcon = addButton.querySelector("i");
if (addButton.classList.contains("chip")) { if (addButton.classList.contains("chip")) {
input.classList.remove("unfocused"); input.classList.remove("unfocused");
addButton.innerHTML = `<i class="ri-check-line"></i>`; addIcon.classList.add("ri-check-line");
addButton.classList.remove("chip") addIcon.classList.remove("ri-link");
if (icon) { addButton.classList.remove("chip", "w-100")
icon.classList.add("unfocused"); const outerClickListener = (event: Event) => {
if (!(event.target instanceof HTMLElement && (this._matrix.contains(event.target) || addButton.contains(event.target)))) {
document.dispatchEvent(new CustomEvent("accounts-reload"));
document.removeEventListener("click", outerClickListener);
} }
};
document.addEventListener("click", outerClickListener);
} else { } else {
if (input.value.charAt(0) != "@" || !input.value.includes(":")) return; if (input.value.charAt(0) != "@" || !input.value.includes(":")) return;
const send = { const send = {
@ -259,7 +264,7 @@ class user implements User {
this._telegramUsername = u; this._telegramUsername = u;
if (!u) { if (!u) {
this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused"); this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused");
this._telegram.innerHTML = `<span class="chip btn @high">${window.lang.strings("add")}</span>`; this._telegram.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
(this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram; (this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
} else { } else {
this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused"); this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@ -324,7 +329,7 @@ class user implements User {
const lastNotifyMethod = this.lastNotifyMethod() == "discord"; const lastNotifyMethod = this.lastNotifyMethod() == "discord";
this._discordUsername = u; this._discordUsername = u;
if (!u) { if (!u) {
this._discord.innerHTML = `<span class="chip btn @high">Add</span>`; this._discord.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
(this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id); (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused"); this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
} else { } else {

Loading…
Cancel
Save