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

trim base css of most redundant classes

Browse Source
This commit is contained in:
Harvey Tindall 2023-12-24 18:55:58 +00:00
parent d56d45a404
commit 2be7baea4a
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
14 changed files with 58 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
css/base.css
View File

@ -106,48 +106,6 @@ div.card:contains(section.banner.footer) {
padding-bottom: 0px; padding-bottom: 0px;
} }
.tab-button {
font-size: 2rem;
}
.al {
text-align: left;
}
.ar {
text-align: right;
}
.ac {
text-align: center;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.inline-block {
display: inline-block;
}
.align-top {
align-items: top;
}
.flex-expand {
display: flex;
justify-content: space-between;
}
.flex-row-group {
display: block;
flex-grow: 1;
}
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -172,23 +130,7 @@ span.sm:not(.heading) {
margin: .25rem; margin: .25rem;
} }
.flex-col { /* Who knows for half of these to be honest */
display: flex;
flex-direction: column;
}
.flex-form {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.flex-form {
flex: 1;
margin: 0.5rem;
}
}
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.row { .row {
flex-direction: column; flex-direction: column;
@ -219,52 +161,6 @@ sup.\~critical, .text-critical {
font-size: 1rem; font-size: 1rem;
} }
.inv {
overflow: visible;
}
.inv-profileselect {
min-width: 100%;
}
.inv-codearea {
max-width: 40%;
min-width: 10rem;
display: flex;
justify-content: start;
align-items: center;
}
.inv-empty .inv-codearea {
justify-content: start;
}
.invite-link {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: auto;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.no-pad {
padding: 0px 0px 0px 0px;
}
.elem-pad > * {
margin: var(--spacing-4, 1rem);
}
.icon.clickable {
padding: 0.5rem 0.6rem;
}
.input { .input {
box-sizing: border-box; /* fixes weird length issue with inputs */ box-sizing: border-box; /* fixes weird length issue with inputs */
} }
@ -283,10 +179,6 @@ sup.\~critical, .text-critical {
width: 100%; width: 100%;
} }
.flex-auto {
flex: auto;
}
.center { .center {
justify-content: center; justify-content: center;
} }
@ -295,14 +187,6 @@ sup.\~critical, .text-critical {
align-items: center; align-items: center;
} }
.no-lp {
padding-left: 0px;
}
.block {
display: block;
}
.focused { .focused {
display: block; display: block;
} }

34
html/admin.html
View File

@ -62,8 +62,8 @@
</a> </a>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~neutral mb-2 w-100 lang-link">GitHub</a> <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~neutral mb-2 w-full lang-link">GitHub</a>
<a href="https://ko-fi.com/hrfee" target="_blank" class="button ~neutral mb-2 w-100 lang-link">Ko-fi</a> <a href="https://ko-fi.com/hrfee" target="_blank" class="button ~neutral mb-2 w-full lang-link">Ko-fi</a>
</div> </div>
</div> </div>
</div> </div>
@ -84,11 +84,11 @@
<span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span> <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
<p class="content my-4">{{ .strings.modifySettingsDescription }}</p> <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<label class="flex-row-group mr-2"> <label class="grow mr-2">
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked> <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
<span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span> <span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span>
</label> </label>
<label class="flex-row-group ml-2"> <label class="grow ml-2">
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user"> <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
<span class="button ~neutral @low supra full-width center">{{ .strings.user }}</span> <span class="button ~neutral @low supra full-width center">{{ .strings.user }}</span>
</label> </label>
@ -115,11 +115,11 @@
<span class="heading"><span id="header-enable-referrals-user"></span> <span class="modal-close">&times;</span></span> <span class="heading"><span id="header-enable-referrals-user"></span> <span class="modal-close">&times;</span></span>
<p class="content my-4">{{ .strings.enableReferralsDescription }}</p> <p class="content my-4">{{ .strings.enableReferralsDescription }}</p>
<div class="flex flex-row mb-4"> <div class="flex flex-row mb-4">
<label class="flex-row-group mr-2"> <label class="grow mr-2">
<input type="radio" name="enable-referrals-user-source" class="unfocused" id="radio-referrals-use-profile" checked> <input type="radio" name="enable-referrals-user-source" class="unfocused" id="radio-referrals-use-profile" checked>
<span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span> <span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span>
</label> </label>
<label class="flex-row-group ml-2"> <label class="grow ml-2">
<input type="radio" name="enable-referrals-user-source" class="unfocused" id="radio-referrals-use-invite"> <input type="radio" name="enable-referrals-user-source" class="unfocused" id="radio-referrals-use-invite">
<span class="button ~neutral @low supra full-width center">{{ .strings.invite }}</span> <span class="button ~neutral @low supra full-width center">{{ .strings.invite }}</span>
</label> </label>
@ -365,7 +365,7 @@
<p class="content my-4" id="settings-backed-up-location"></p> <p class="content my-4" id="settings-backed-up-location"></p>
<p class="content my-4">{{ .strings.backupCanDownload }}</p> <p class="content my-4">{{ .strings.backupCanDownload }}</p>
<div> <div>
<button class="button flex w-100 ~info @low mb-2"><span class="flex items-center" id="settings-backed-up-download">{{ .strings.download }}</span></button> <button class="button flex w-full ~info @low mb-2"><span class="flex items-center" id="settings-backed-up-download">{{ .strings.download }}</span></button>
</div> </div>
</div> </div>
</div> </div>
@ -708,13 +708,13 @@
</div> </div>
<div id="tab-accounts" class="unfocused"> <div id="tab-accounts" class="unfocused">
<div class="card @low dark:~d_neutral accounts mb-4 overflow-visible"> <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
<div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100"> <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-full">
<div class="flex flex-col md:flex-row align-middle gap-2"> <div class="flex flex-col md:flex-row align-middle gap-2">
<div class="flex flex-row align-middle justify-between md:justify-normal"> <div class="flex flex-row align-middle justify-between md:justify-normal">
<span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span> <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
<span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span> <span class="dropdown-manual-toggle"><button class="h-full button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span>
</div> </div>
<div class="flex flex-row align-middle w-100"> <div class="flex flex-row align-middle w-full">
<input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}"> <input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
<span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span> <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
</div> </div>
@ -734,7 +734,7 @@
<div class="flex flex-row flex-wrap gap-3 mb-4"> <div class="flex flex-row flex-wrap gap-3 mb-4">
<span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span> <span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
<div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0"> <div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-100 button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span> <span class="w-full button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<span class="supra sm">{{ .strings.templates }}</span> <span class="supra sm">{{ .strings.templates }}</span>
@ -747,7 +747,7 @@
<span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span> <span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
{{ end }} {{ end }}
<div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0"> <div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-100 button ~positive @low center items-baseline" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span> <span class="w-full button ~positive @low center items-baseline" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<span class="button ~warning full-width @low center" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span> <span class="button ~warning full-width @low center" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
@ -756,7 +756,7 @@
</div> </div>
</div> </div>
<div id="accounts-disable-enable-dropdown" class="dropdown manual pb-0i " tabindex="0"> <div id="accounts-disable-enable-dropdown" class="dropdown manual pb-0i " tabindex="0">
<span class="w-100 button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span> <span class="w-full button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<span class="button ~urge full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span> <span class="button ~urge full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
@ -807,16 +807,16 @@
</div> </div>
<div id="tab-activity" class="unfocused"> <div id="tab-activity" class="unfocused">
<div class="card @low dark:~d_neutral activity mb-4 overflow-visible"> <div class="card @low dark:~d_neutral activity mb-4 overflow-visible">
<div id="activity-filter-dropdown" class="dropdown manual z-10 w-100" tabindex="0"> <div id="activity-filter-dropdown" class="dropdown manual z-10 w-full" tabindex="0">
<div class="flex flex-col md:flex-row align-middle gap-2"> <div class="flex flex-col md:flex-row align-middle gap-2">
<div class="flex flex-row align-middle justify-between md:justify-normal"> <div class="flex flex-row align-middle justify-between md:justify-normal">
<span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span> <span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
<div class="flex flex-row align-middle"> <div class="flex flex-row align-middle">
<span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span> <span class="dropdown-manual-toggle"><button class="h-full button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span>
<button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button> <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
</div> </div>
</div> </div>
<div class="flex flex-row align-middle w-100"> <div class="flex flex-row align-middle w-full">
<input type="search" class="field ~neutral @low input search mr-2" id="activity-search" placeholder="{{ .strings.search }}"> <input type="search" class="field ~neutral @low input search mr-2" id="activity-search" placeholder="{{ .strings.search }}">
<span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span> <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
<button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button> <button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
@ -872,7 +872,7 @@
<span class="ml-2">{{ .strings.advancedSettings }} </span> <span class="ml-2">{{ .strings.advancedSettings }} </span>
</label> </label>
</div> </div>
<div class="flex flex-row justify-start md:justify-end gap-2 w-100"> <div class="flex flex-row justify-start md:justify-end gap-2 w-full">
<span class="button ~neutral @low" id="settings-logs">{{ .strings.logs }}</span> <span class="button ~neutral @low" id="settings-logs">{{ .strings.logs }}</span>
<span class="button ~info @low" id="settings-backups">{{ .strings.backups }}</span> <span class="button ~info @low" id="settings-backups">{{ .strings.backups }}</span>
<span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span> <span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>

2
html/crash.html
View File

@ -18,7 +18,7 @@
<a class="button ~critical mb-4" target="_blank" href="https://github.com/hrfee/jfa-go/issues/new/choose">Create an Issue</a> <a class="button ~critical mb-4" target="_blank" href="https://github.com/hrfee/jfa-go/issues/new/choose">Create an Issue</a>
</section> </section>
<section class="section ~neutral @low"> <section class="section ~neutral @low">
<div class="flex-expand"> <div class="flex flex-row justify-between">
<span class="subheading">Full Log</span> <span class="subheading">Full Log</span>
<span class="button ~urge ml-4" id="copy-log">Copy</span> <span class="button ~urge ml-4" id="copy-log">Copy</span>
</div> </div>

4
html/login-modal.html
View File

@ -11,11 +11,11 @@
{{ if and .userPageEnabled .showUserPageLink }} {{ if and .userPageEnabled .showUserPageLink }}
<div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content"> <div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
<span class="heading row">{{ .strings.loginNotAdmin }}</span> <span class="heading row">{{ .strings.loginNotAdmin }}</span>
<a class="button ~info h-12 w-100" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a> <a class="button ~info h-12 w-full" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
<form class="card mx-2 flex-auto form-login w-[100%] lg:w-[55%] mb-0" href=""> <form class="card mx-2 form-login w-[100%] lg:w-[55%] mb-0" href="">
<span class="heading">{{ .strings.login }}</span> <span class="heading">{{ .strings.login }}</span>
<input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user"> <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
<input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password"> <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">

2
html/password-reset.html
View File

@ -35,7 +35,7 @@
<aside class="aside ~warning"> <aside class="aside ~warning">
{{ .strings.changeYourPassword }} {{ .strings.changeYourPassword }}
</aside> </aside>
<span class="button ~urge @low w-100 text-center text-xl p-1 mt-4" id="pin" title="{{ .strings.copy }}">{{ .pin }}</span> <span class="button ~urge @low w-full text-center text-xl p-1 mt-4" id="pin" title="{{ .strings.copy }}">{{ .pin }}</span>
{{ end }} {{ end }}
</div> </div>
<i class="content">{{ .contactMessage }}</i> <i class="content">{{ .contactMessage }}</i>

26
html/setup.html
View File

@ -30,7 +30,7 @@
<div class="row col flex center"> <div class="row col flex center">
<p class="content my-2">{{ .lang.StartPage.pressStart }}</p> <p class="content my-2">{{ .lang.StartPage.pressStart }}</p>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="support">{{ .lang.StartPage.httpsNotice }}</span> <span class="support">{{ .lang.StartPage.httpsNotice }}</span>
<span class="button ~urge @low next">{{ .lang.StartPage.start }}</span> <span class="button ~urge @low next">{{ .lang.StartPage.start }}</span>
</section> </section>
@ -59,7 +59,7 @@
</select> </select>
</div> </div>
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</section> </section>
@ -150,7 +150,7 @@
</label> </label>
</div> </div>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</section> </section>
@ -189,7 +189,7 @@
<span class="support mb-2 mt-1">{{ .lang.Login.emailNotice }}</span> <span class="support mb-2 mt-1">{{ .lang.Login.emailNotice }}</span>
</label> </label>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</section> </section>
@ -235,7 +235,7 @@
</label> </label>
</div> </div>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low" id="jellyfin-test-connection">{{ .lang.JellyfinEmby.testConnection }}</span> <span class="button ~urge @low" id="jellyfin-test-connection">{{ .lang.JellyfinEmby.testConnection }}</span>
@ -258,7 +258,7 @@
<input type="text" class="input ~neutral @low mt-4" id="ombi-api_key"> <input type="text" class="input ~neutral @low mt-4" id="ombi-api_key">
<p class="support mb-2 mt-1">{{ .lang.Ombi.apiKeyNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.Ombi.apiKeyNotice }}</p>
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -273,7 +273,7 @@
<input type="checkbox" class="mr-2" id="userpage-enabled"><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="userpage-enabled"><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<p class="support mb-1 mt-1">{{ .lang.UserPage.requiredSettings }}</p> <p class="support mb-1 mt-1">{{ .lang.UserPage.requiredSettings }}</p>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -370,7 +370,7 @@
</div> </div>
</div> </div>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -392,7 +392,7 @@
<span class="mt-4">{{ .lang.Strings.emailSubject }}</span> <span class="mt-4">{{ .lang.Strings.emailSubject }}</span>
<input type="text" class="input ~neutral @low mt-4 mb-2" id="welcome_email-subject" placeholder="{{ .emailLang.WelcomeEmail.title }}"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="welcome_email-subject" placeholder="{{ .emailLang.WelcomeEmail.title }}">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -413,7 +413,7 @@
<span class="mt-4">{{ .lang.Strings.emailSubject }}</span> <span class="mt-4">{{ .lang.Strings.emailSubject }}</span>
<input type="text" class="input ~neutral @low mt-4 mb-2" id="invite_emails-subject" placeholder="{{ .emailLang.InviteEmail.title }}"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="invite_emails-subject" placeholder="{{ .emailLang.InviteEmail.title }}">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -450,7 +450,7 @@
<span class="mt-4">{{ .lang.Strings.emailSubject }}</span> <span class="mt-4">{{ .lang.Strings.emailSubject }}</span>
<input type="text" class="input ~neutral @low mt-4 mb-2" id="password_resets-subject" placeholder="{{ .emailLang.PasswordReset.title }}"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="password_resets-subject" placeholder="{{ .emailLang.PasswordReset.title }}">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -483,7 +483,7 @@
<span class="mt-4">{{ .lang.PasswordValidation.special }}</span> <span class="mt-4">{{ .lang.PasswordValidation.special }}</span>
<input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-special" value="0"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-special" value="0">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
@ -513,7 +513,7 @@
<input type="text" class="input ~neutral @low mt-4" id="email-message"> <input type="text" class="input ~neutral @low mt-4" id="email-message">
<p class="support mb-2 mt-1">{{ .lang.HelpMessages.emailMessageNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.HelpMessages.emailMessageNotice }}</p>
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div> <div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>

2
html/user.html
View File

@ -162,7 +162,7 @@
<div class="card @low dark:~d_neutral unfocused" id="card-referrals"> <div class="card @low dark:~d_neutral unfocused" id="card-referrals">
<span class="heading mb-2">{{ .strings.referrals }}</span> <span class="heading mb-2">{{ .strings.referrals }}</span>
<aside class="aside ~neutral my-4 col user-referrals-description"></aside> <aside class="aside ~neutral my-4 col user-referrals-description"></aside>
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between gap-2">
<div class="user-referrals-info"></div> <div class="user-referrals-info"></div>
<div class="grid my-2"> <div class="grid my-2">
<button type="button" class="user-referrals-button button ~info dark:~d_info @low" title="Copy">{{ .strings.copyReferral }}<i class="ri-file-copy-line ml-2"></i></button> <button type="button" class="user-referrals-button button ~info dark:~d_info @low" title="Copy">{{ .strings.copyReferral }}<i class="ri-file-copy-line ml-2"></i></button>

2
site/index.html
View File

@ -129,7 +129,7 @@ sudo apt-get install jfa-go-tray
<a class="button ~info mr-2 mb-2 lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-git">arch (aur git)</a> <a class="button ~info mr-2 mb-2 lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-git">arch (aur git)</a>
</div> </div>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex flex-row justify-between middle">
<a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE" class="support">© 2023 Harvey Tindall</a> <a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE" class="support">© 2023 Harvey Tindall</a>
</section> </section>
</div> </div>

8
ts/modules/accounts.ts
View File

@ -218,13 +218,13 @@ class user implements User, SearchableItem {
</div> </div>
<div class="supra sm mb-2 accounts-unlink-header">${window.lang.strings("unlink")}:</div> <div class="supra sm mb-2 accounts-unlink-header">${window.lang.strings("unlink")}:</div>
<div class="accounts-unlink-telegram"> <div class="accounts-unlink-telegram">
<button class="button ~critical mb-2 w-100">Telegram</button> <button class="button ~critical mb-2 w-full">Telegram</button>
</div> </div>
<div class="accounts-unlink-discord"> <div class="accounts-unlink-discord">
<button class="button ~critical mb-2 w-100">Discord</button> <button class="button ~critical mb-2 w-full">Discord</button>
</div> </div>
<div class="accounts-unlink-matrix"> <div class="accounts-unlink-matrix">
<button class="button ~critical mb-2 w-100">Matrix</button> <button class="button ~critical mb-2 w-full">Matrix</button>
</div> </div>
</div> </div>
</div> </div>
@ -1271,7 +1271,7 @@ export class accountsList {
dList.textContent = ''; dList.textContent = '';
for (let name of list) { for (let name of list) {
const el = document.createElement("div") as HTMLDivElement; const el = document.createElement("div") as HTMLDivElement;
el.classList.add("flex-expand", "ellipsis", "mt-2"); el.classList.add("flex", "flex-row", "justify-between", "truncate", "mt-2");
el.innerHTML = ` el.innerHTML = `
<span class="button ~neutral sm full-width accounts-announce-template-button">${name}</span><span class="button ~critical fr ml-4 accounts-announce-template-delete">&times;</span> <span class="button ~neutral sm full-width accounts-announce-template-button">${name}</span><span class="button ~critical fr ml-4 accounts-announce-template-delete">&times;</span>
`; `;

2
ts/modules/captcha.ts
View File

@ -51,7 +51,7 @@ export class Captcha {
this.captchaID = this.isPWR ? this.code : req.response["id"]; this.captchaID = this.isPWR ? this.code : req.response["id"];
// the Math.random() appearance below is used for PWRs, since they don't have a unique captchaID. The parameter is ignored by the server, but tells the browser to reload the image. // the Math.random() appearance below is used for PWRs, since they don't have a unique captchaID. The parameter is ignored by the server, but tells the browser to reload the image.
document.getElementById("captcha-img").innerHTML = ` document.getElementById("captcha-img").innerHTML = `
<img class="w-100" src="${window.location.toString().substring(0, window.location.toString().lastIndexOf("/invite"))}/captcha/img/${this.code}/${this.isPWR ? Math.random() : this.captchaID}${this.isPWR ? "?pwr=true" : ""}"></img> <img class="w-full" src="${window.location.toString().substring(0, window.location.toString().lastIndexOf("/invite"))}/captcha/img/${this.code}/${this.isPWR ? Math.random() : this.captchaID}${this.isPWR ? "?pwr=true" : ""}"></img>
`; `;
this.input.value = ""; this.input.value = "";
} }

24
ts/modules/invites.ts
View File

@ -115,10 +115,10 @@ class DOMInvite implements Invite {
chip.classList.remove("~neutral"); chip.classList.remove("~neutral");
chip.classList.remove("~critical"); chip.classList.remove("~critical");
chip.classList.remove("button"); chip.classList.remove("button");
chip.parentElement.classList.remove("h-100"); chip.parentElement.classList.remove("h-full");
} else { } else {
chip.classList.add("button"); chip.classList.add("button");
chip.parentElement.classList.add("h-100"); chip.parentElement.classList.add("h-full");
if (address.includes("Failed")) { if (address.includes("Failed")) {
icon.classList.remove("ri-mail-line"); icon.classList.remove("ri-mail-line");
icon.classList.add("ri-mail-close-line"); icon.classList.add("ri-mail-close-line");
@ -268,7 +268,7 @@ class DOMInvite implements Invite {
constructor(invite: Invite) { constructor(invite: Invite) {
// first create the invite structure, then use our setter methods to fill in the data. // first create the invite structure, then use our setter methods to fill in the data.
this._container = document.createElement('div') as HTMLDivElement; this._container = document.createElement('div') as HTMLDivElement;
this._container.classList.add("inv", "overflow-y-visible"); this._container.classList.add("inv", "overflow-visible");
this._header = document.createElement('div') as HTMLDivElement; this._header = document.createElement('div') as HTMLDivElement;
this._container.appendChild(this._header); this._container.appendChild(this._header);
@ -276,10 +276,10 @@ class DOMInvite implements Invite {
this._codeArea = document.createElement('div') as HTMLDivElement; this._codeArea = document.createElement('div') as HTMLDivElement;
this._header.appendChild(this._codeArea); this._header.appendChild(this._codeArea);
this._codeArea.classList.add("flex", "flex-row", "flex-wrap", "justify-between", "w-100", "items-baseline", "gap-2", "truncate"); this._codeArea.classList.add("flex", "flex-row", "flex-wrap", "justify-between", "w-full", "items-baseline", "gap-2", "truncate");
this._codeArea.innerHTML = ` this._codeArea.innerHTML = `
<div class="flex items-baseline gap-x-4 gap-y-2 truncate"> <div class="flex items-baseline gap-x-4 gap-y-2 truncate">
<a class="invite-link text-black dark:text-white font-mono bg-inherit" href=""></a> <a class="invite-link text-black dark:text-white font-mono bg-inherit truncate" 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>
</div> </div>
<span class="inv-duration"></span> <span class="inv-duration"></span>
@ -305,12 +305,12 @@ class DOMInvite implements Invite {
this._infoArea.classList.add("inv-infoarea", "flex", "flex-row", "items-baseline", "gap-2"); this._infoArea.classList.add("inv-infoarea", "flex", "flex-row", "items-baseline", "gap-2");
this._infoArea.innerHTML = ` this._infoArea.innerHTML = `
<div class="tooltip below darker" tabindex="0"> <div class="tooltip below darker" tabindex="0">
<span class="inv-email-chip h-100"><i></i></span> <span class="inv-email-chip h-full"><i></i></span>
<span class="content sm p-1"></span> <span class="content sm p-1"></span>
</div> </div>
<span class="button ~critical @low inv-delete h-100">${window.lang.strings("delete")}</span> <span class="button ~critical @low inv-delete h-full">${window.lang.strings("delete")}</span>
<label> <label>
<i class="icon clickable ri-arrow-down-s-line not-rotated"></i> <i class="icon px-2.5 py-2 ri-arrow-down-s-line not-rotated"></i>
<input class="inv-toggle-details unfocused" type="checkbox"> <input class="inv-toggle-details unfocused" type="checkbox">
</label> </label>
`; `;
@ -332,7 +332,7 @@ class DOMInvite implements Invite {
this._details.classList.add("card", "~neutral", "@low", "mt-2", "inv-details"); this._details.classList.add("card", "~neutral", "@low", "mt-2", "inv-details");
const detailsInner = document.createElement('div') as HTMLDivElement; const detailsInner = document.createElement('div') as HTMLDivElement;
this._details.appendChild(detailsInner); this._details.appendChild(detailsInner);
detailsInner.classList.add("inv-row", "flex", "flex-row", "flex-wrap", "justify-between", "align-top", "gap-4"); detailsInner.classList.add("inv-row", "flex", "flex-row", "flex-wrap", "justify-between", "gap-4");
this._left = document.createElement('div') as HTMLDivElement; this._left = document.createElement('div') as HTMLDivElement;
this._left.classList.add("flex", "flex-row", "flex-wrap", "gap-4", "min-w-full", "sm:min-w-fit", "whitespace-nowrap"); this._left.classList.add("flex", "flex-row", "flex-wrap", "gap-4", "min-w-full", "sm:min-w-fit", "whitespace-nowrap");
@ -342,7 +342,7 @@ class DOMInvite implements Invite {
leftLeft.classList.add("inv-profilearea", "min-w-full", "sm:min-w-fit"); leftLeft.classList.add("inv-profilearea", "min-w-full", "sm:min-w-fit");
let innerHTML = ` let innerHTML = `
<p class="supra mb-2 top">${window.lang.strings("profile")}</p> <p class="supra mb-2 top">${window.lang.strings("profile")}</p>
<div class="select ~neutral @low inv-profileselect inline-block mb-2"> <div class="select ~neutral @low inv-profileselect min-w-full inline-block mb-2">
<select> <select>
<option value="noProfile" selected>${window.lang.strings("inviteNoProfile")}</option> <option value="noProfile" selected>${window.lang.strings("inviteNoProfile")}</option>
</select> </select>
@ -480,8 +480,8 @@ export class inviteList implements inviteList {
this._list.classList.add("empty"); this._list.classList.add("empty");
this._list.innerHTML = ` this._list.innerHTML = `
<div class="inv inv-empty"> <div class="inv inv-empty">
<div class="card dark:~d_neutral @low inv-header flex-expand mt-2"> <div class="card dark:~d_neutral @low inv-header mt-2">
<div class="inv-codearea"> <div class="justify-start">
<span class="text-black dark:text-white font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span> <span class="text-black dark:text-white font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
</div> </div>
</div> </div>

2
ts/modules/lang.ts
View File

@ -83,7 +83,7 @@ export const loadLangSelector = (page: string) => {
let innerHTML = ''; let innerHTML = '';
for (let code in req.response) { for (let code in req.response) {
queryString.set("lang", code); queryString.set("lang", code);
innerHTML += `<a href="?${queryString.toString()}" class="button w-100 al justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`; innerHTML += `<a href="?${queryString.toString()}" class="button w-full text-left justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`;
queryString.delete("lang"); queryString.delete("lang");
} }
list.innerHTML = innerHTML; list.innerHTML = innerHTML;

2
ts/modules/profiles.ts
View File

@ -86,7 +86,7 @@ class profile implements Profile {
<td><span class="button @low profile-referrals"></span></td> <td><span class="button @low profile-referrals"></span></td>
`; `;
innerHTML += ` innerHTML += `
<td class="profile-from ellipsis"></td> <td class="profile-from truncate"></td>
<td class="profile-libraries"></td> <td class="profile-libraries"></td>
<td><span class="button ~critical @low">${window.lang.strings("delete")}</span></td> <td><span class="button ~critical @low">${window.lang.strings("delete")}</span></td>
`; `;

4
ts/user.ts
View File

@ -144,9 +144,9 @@ class ContactMethods {
append = (name: string, details: MyDetailsContactMethod, icon: string, addEditFunc?: (add: boolean) => void, required?: boolean) => { append = (name: string, details: MyDetailsContactMethod, icon: string, addEditFunc?: (add: boolean) => void, required?: boolean) => {
const row = document.createElement("div"); const row = document.createElement("div");
row.classList.add("flex", "flex-expand", "my-2", "flex-nowrap"); row.classList.add("flex", "flex-row", "justify-between", "my-2", "flex-nowrap");
let innerHTML = ` let innerHTML = `
<div class="flex items-baseline flex-nowrap ellipsis"> <div class="flex items-baseline flex-nowrap truncate">
<span class="shield ~urge" alt="${name}"> <span class="shield ~urge" alt="${name}">
<span class="icon"> <span class="icon">
${icon} ${icon}