hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 17:10:10 +00:00
Code Issues Projects Releases Wiki Activity

fix form layout

Browse Source
This commit is contained in:
Harvey Tindall 2021-12-31 18:52:03 +00:00
parent 8bee09cd01
commit 7e0e0b0520
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
8 changed files with 41 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/base.css
View File

@ -186,11 +186,6 @@ span.sm:not(.heading) {
} }
} }
.monospace {
background-color: inherit; /* so we can use a17t code blocks */
font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}
sup.\~critical, .text-critical { sup.\~critical, .text-critical {
color: var(--color-critical-normal-content); color: var(--color-critical-normal-content);
} }

16
html/admin.html
View File

@ -46,8 +46,8 @@
<div class="modal-content content card"> <div class="modal-content content card">
<img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner"> <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
<span class="heading"><span class="modal-close">&times;</span></span> <span class="heading"><span class="modal-close">&times;</span></span>
<p>{{ .strings.version }} <span class="code monospace">{{ .version }}</span></p> <p>{{ .strings.version }} <span class="code font-mono bg-inherit">{{ .version }}</span></p>
<p>{{ .strings.commitNoun }} <span class="code monospace">{{ .commit }}</span></p> <p>{{ .strings.commitNoun }} <span class="code font-mono bg-inherit">{{ .commit }}</span></p>
<div class="row col flex"> <div class="row col flex">
<a class="button ~neutral mr-2 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-2"></i>github</a> <a class="button ~neutral mr-2 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-2"></i>github</a>
<a class="button ~urge mt-4 mb-4 mr-2 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a> <a class="button ~urge mt-4 mb-4 mr-2 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
@ -68,7 +68,7 @@
<a class="button ~urge mt-4 mb-4 @low discord lang-link" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-2"></i>discord</a> <a class="button ~urge mt-4 mb-4 @low discord lang-link" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-2"></i>discord</a>
</div> </div>
<p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p> <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
<pre class="monospace">{{ .license }}</pre> <pre class="font-mono bg-inherit">{{ .license }}</pre>
</div> </div>
</div> </div>
<div id="modal-modify-user" class="modal"> <div id="modal-modify-user" class="modal">
@ -177,12 +177,12 @@
<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">
<span class="button ~urge @low mb-2 mt-4" id="announce-variables-username" style="margin-left: 0.25rem; margin-right: 0.25rem;"><span class="monospace">{username}</span></span> <span class="button ~urge @low mb-2 mt-4" id="announce-variables-username" style="margin-left: 0.25rem; margin-right: 0.25rem;"><span class="font-mono bg-inherit">{username}</span></span>
</div> </div>
<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 monospace"></textarea> <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 font-mono bg-inherit"></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>
@ -232,7 +232,7 @@
<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 monospace"></textarea> <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 font-mono bg-inherit"></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">
@ -335,7 +335,7 @@
<span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span>
<p class="content"> <p class="content">
<h2> <h2>
<a id="update-version"></a> (<span class="monospace" id="update-commit"></span>) <a id="update-version"></a> (<span class="font-mono bg-inherit" id="update-commit"></span>)
</h2> </h2>
<p class="content" id="update-description"></p> <p class="content" id="update-description"></p>
<p class="support" id="update-date"></p> <p class="support" id="update-date"></p>
@ -643,7 +643,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="card @low dark:~d_neutral col" id="settings-sidebar"> <div class="card @low dark:~d_neutral col" id="settings-sidebar">
<aside class="aside sm ~info mb-2" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> <aside class="aside sm ~info mb-2 @high" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside>
<span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span> <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
<span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span> <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span>
</div> </div>

6
html/crash.html
View File

@ -11,7 +11,7 @@
<section class="section ~critical"> <section class="section ~critical">
<span class="heading">Crash report for jfa-go</span> <span class="heading">Crash report for jfa-go</span>
{{ if .Err }} {{ if .Err }}
<div class="monospace pre-line mt-4 mb-4"> <div class="font-mono bg-inherit pre-line mt-4 mb-4">
Error: {{ .Err }} Error: {{ .Err }}
</div> </div>
{{ end }} {{ end }}
@ -31,11 +31,11 @@
</label> </label>
</div> </div>
<div id="log-normal"> <div id="log-normal">
<pre class="monospace pre-line">{{ .Log }}</pre> <pre class="font-mono bg-inherit pre-line">{{ .Log }}</pre>
</div> </div>
<div id="log-sanitized" class="unfocused"> <div id="log-sanitized" class="unfocused">
<p class="subheading">An attempt has been made to remove sensitive info, but make sure to check yourself.</p> <p class="subheading">An attempt has been made to remove sensitive info, but make sure to check yourself.</p>
<pre class="monospace pre-line">{{ .SanitizedLog }}</pre> <pre class="font-mono bg-inherit pre-line">{{ .SanitizedLog }}</pre>
</div> </div>
</section> </section>
</div> </div>

22
html/form.html
View File

@ -30,7 +30,7 @@
<div class="modal-content card"> <div class="modal-content card">
<span class="heading mb-4">{{ .strings.linkTelegram }}</span> <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
<p class="content mb-4">{{ .strings.sendPIN }}</p> <p class="content mb-4">{{ .strings.sendPIN }}</p>
<h1 class="ac">{{ .telegramPIN }}</h1> <p class="text-center text-2xl mb-2">{{ .telegramPIN }}</p>
<a class="subheading link-center" href="{{ .telegramURL }}" target="_blank"> <a class="subheading link-center" href="{{ .telegramURL }}" target="_blank">
<span class="shield ~info mr-4"> <span class="shield ~info mr-4">
<span class="icon"> <span class="icon">
@ -48,7 +48,7 @@
<div class="modal-content card"> <div class="modal-content card">
<span class="heading mb-4">{{ .strings.linkDiscord }}</span> <span class="heading mb-4">{{ .strings.linkDiscord }}</span>
<p class="content mb-4"> {{ .discordSendPINMessage }}</p> <p class="content mb-4"> {{ .discordSendPINMessage }}</p>
<h1 class="ac">{{ .discordPIN }}</h1> <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
<a id="discord-invite"></a> <a id="discord-invite"></a>
<span class="button ~info @low full-width center mt-4" id="discord-waiting">{{ .strings.success }}</span> <span class="button ~info @low full-width center mt-4" id="discord-waiting">{{ .strings.success }}</span>
</div> </div>
@ -72,6 +72,7 @@
</div> </div>
</div> </div>
{{ end }} {{ end }}
<div class="top-4 left-4 absolute">
<span class="dropdown" tabindex="0" id="lang-dropdown"> <span class="dropdown" tabindex="0" id="lang-dropdown">
<span class="button ~urge dropdown-button"> <span class="button ~urge dropdown-button">
<i class="ri-global-line"></i> <i class="ri-global-line"></i>
@ -82,9 +83,10 @@
</div> </div>
</div> </div>
</span> </span>
</div>
<div id="notification-box"></div> <div id="notification-box"></div>
<div class="page-container"> <div class="page-container">
<div class="card ~neutral @low"> <div class="card dark:~d_neutral @low">
<div class="row baseline"> <div class="row baseline">
<span class="col heading"> <span class="col heading">
{{ if .passwordReset }} {{ if .passwordReset }}
@ -106,15 +108,15 @@
{{ if .userExpiry }} {{ if .userExpiry }}
<aside class="col aside sm ~warning" id="user-expiry-message"></aside> <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
{{ end }} {{ end }}
<form class="card ~neutral @low" id="form-create" href=""> <form class="card dark:~d_neutral @low" id="form-create" href="">
{{ if not .passwordReset }} {{ if not .passwordReset }}
<label class="label supra"> <label class="label supra">
{{ .strings.username }} {{ .strings.username }}
<input type="text" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}"> <input type="text" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}">
</label> </label>
<label class="label supra" for="create-email">{{ .strings.emailAddress }}</label> <label class="label supra" for="create-email">{{ .strings.emailAddress }}</label>
<input type="email" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}"> <input type="email" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}">
{{ if .telegramEnabled }} {{ if .telegramEnabled }}
<span class="button ~info @low full-width center mb-4" id="link-telegram">{{ .strings.linkTelegram }}</span> <span class="button ~info @low full-width center mb-4" id="link-telegram">{{ .strings.linkTelegram }}</span>
{{ end }} {{ end }}
@ -148,10 +150,10 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<label class="label supra" for="create-password">{{ .strings.password }}</label> <label class="label supra" for="create-password">{{ .strings.password }}</label>
<input type="password" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}"> <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}">
<label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label> <label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label>
<input type="password" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}"> <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}">
<label> <label>
<input type="submit" class="unfocused"> <input type="submit" class="unfocused">
<span class="button ~urge @low full-width center supra submit"> <span class="button ~urge @low full-width center supra submit">
@ -165,7 +167,7 @@
</form> </form>
</div> </div>
<div class="col"> <div class="col">
<div class="card ~neutral @low"> <div class="card ~neutral @low mb-4">
<span class="label supra" for="inv-uses">{{ .strings.passwordRequirementsHeader }}</span> <span class="label supra" for="inv-uses">{{ .strings.passwordRequirementsHeader }}</span>
<ul> <ul>
{{ range $key, $value := .requirements }} {{ range $key, $value := .requirements }}
@ -176,7 +178,7 @@
</ul> </ul>
</div> </div>
{{ if .contactMessage }} {{ if .contactMessage }}
<aside class="col aside sm ~info">{{ .contactMessage }}</aside> <aside class="col aside sm ~info mt-4">{{ .contactMessage }}</aside>
{{ end }} {{ end }}
</div> </div>
</div> </div>

4
ts/modules/accounts.ts
View File

@ -904,7 +904,7 @@ export class accountsList {
if (req.readyState == 4) { if (req.readyState == 4) {
const preview = document.getElementById("announce-preview") as HTMLDivElement; const preview = document.getElementById("announce-preview") as HTMLDivElement;
if (req.status != 200) { if (req.status != 200) {
preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`; preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
window.modals.announce.show(); window.modals.announce.show();
this._previewLoaded = false; this._previewLoaded = false;
return; return;
@ -912,7 +912,7 @@ export class accountsList {
let templ = req.response as templateEmail; let templ = req.response as templateEmail;
if (!templ.html) { if (!templ.html) {
preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`; preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
this._previewLoaded = false; this._previewLoaded = false;
} else { } else {
preview.innerHTML = templ.html; preview.innerHTML = templ.html;

4
ts/modules/invites.ts
View File

@ -257,7 +257,7 @@ class DOMInvite implements Invite {
this._header.appendChild(this._codeArea); this._header.appendChild(this._codeArea);
this._codeArea.classList.add("inv-codearea"); this._codeArea.classList.add("inv-codearea");
this._codeArea.innerHTML = ` this._codeArea.innerHTML = `
<a class="invite-link code monospace mr-4" href=""></a> <a class="invite-link code font-mono bg-inherit mr-4" href=""></a>
<span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span> <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
`; `;
const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement; const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
@ -427,7 +427,7 @@ export class inviteList implements inviteList {
<div class="inv inv-empty"> <div class="inv inv-empty">
<div class="card ~info dark:~d_neutral @low inv-header flex-expand mt-2"> <div class="card ~info dark:~d_neutral @low inv-header flex-expand mt-2">
<div class="inv-codearea"> <div class="inv-codearea">
<span class="code monospace">${window.lang.strings("inviteNoInvites")}</span> <span class="code font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
</div> </div>
</div> </div>
</div> </div>

6
ts/modules/settings.ts
View File

@ -797,7 +797,7 @@ class EmailEditor {
this._templ = req.response as templateEmail; this._templ = req.response as templateEmail;
this._textArea.value = this._templ.content; this._textArea.value = this._templ.content;
if (this._templ.html == "") { if (this._templ.html == "") {
this._preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`; this._preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
} else { } else {
this._preview.innerHTML = this._templ.html; this._preview.innerHTML = this._templ.html;
} }
@ -818,7 +818,7 @@ class EmailEditor {
this._variables.innerHTML = innerHTML this._variables.innerHTML = innerHTML
let buttons = this._variables.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>; let buttons = this._variables.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>;
for (let i = 0; i < this._templ.variables.length; i++) { for (let i = 0; i < this._templ.variables.length; i++) {
buttons[i].innerHTML = `<span class="monospace">` + this._templ.variables[i] + `</span>`; buttons[i].innerHTML = `<span class="font-mono bg-inherit">` + this._templ.variables[i] + `</span>`;
buttons[i].onclick = () => { buttons[i].onclick = () => {
insertText(this._textArea, this._templ.variables[i]); insertText(this._textArea, this._templ.variables[i]);
this.loadPreview(); this.loadPreview();
@ -838,7 +838,7 @@ class EmailEditor {
this._conditionals.innerHTML = innerHTML this._conditionals.innerHTML = innerHTML
buttons = this._conditionals.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>; buttons = this._conditionals.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>;
for (let i = 0; i < this._templ.conditionals.length; i++) { for (let i = 0; i < this._templ.conditionals.length; i++) {
buttons[i].innerHTML = `<span class="monospace">{if ` + this._templ.conditionals[i].slice(1) + `</span>`; buttons[i].innerHTML = `<span class="font-mono bg-inherit">{if ` + this._templ.conditionals[i].slice(1) + `</span>`;
buttons[i].onclick = () => { buttons[i].onclick = () => {
insertText(this._textArea, "{if " + this._templ.conditionals[i].slice(1) + "{endif}"); insertText(this._textArea, "{if " + this._templ.conditionals[i].slice(1) + "{endif}");
this.loadPreview(); this.loadPreview();

4
ts/modules/update.ts
View File

@ -38,9 +38,9 @@ export class Updater implements updater {
const el = document.getElementById("update-description") as HTMLParagraphElement; const el = document.getElementById("update-description") as HTMLParagraphElement;
el.textContent = description; el.textContent = description;
if (this.version == "git") { if (this.version == "git") {
el.classList.add("monospace"); el.classList.add("font-mono", "bg-inherit");
} else { } else {
el.classList.remove("monospace"); el.classList.remove("font-mono", "bg-inherit");
} }
} }