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

Compare commits

base: hrfee:2be7baea4a8aee7d0182b1e2de3bc0a7e7f4bac2
Branches Tags
hrfee:main
hrfee:dependabot/npm_and_yarn/nanoid-3.3.8
hrfee:jellyseerr
hrfee:backups
hrfee:activity-log
hrfee:settings-search
hrfee:referrals
hrfee:db
hrfee:user-page
hrfee:accounts-list-features
hrfee:tailwind
hrfee:mautrix
hrfee:matrix
hrfee:discord
hrfee:telegram
hrfee:v0.5.1
hrfee:v0.5.0
hrfee:v0.4.0
hrfee:v0.3.9
hrfee:v0.3.8
hrfee:v0.3.7
hrfee:v0.3.6
hrfee:v0.3.4
hrfee:v0.3.3
hrfee:v0.3.2
hrfee:v0.3.1
hrfee:v0.3.0
hrfee:v0.2.9
hrfee:v0.2.8
hrfee:v0.2.7
hrfee:v0.2.6
hrfee:v0.2.5
hrfee:v0.2.2
hrfee:v0.2.1
hrfee:v0.2.0
hrfee:v0.1.9
hrfee:v0.1.8
hrfee:v0.1.7
hrfee:v0.1.6
hrfee:v0.1.5
hrfee:v0.1.4
hrfee:v0.1.3
hrfee:v0.1.2
hrfee:v0.1.1
hrfee:v0.1.0
..
compare: hrfee:f460bfcfc60e52acc73df5d64cde2a7f8a0fbb52
Branches Tags
hrfee:dependabot/npm_and_yarn/nanoid-3.3.8
hrfee:main
hrfee:jellyseerr
hrfee:backups
hrfee:activity-log
hrfee:settings-search
hrfee:referrals
hrfee:db
hrfee:user-page
hrfee:accounts-list-features
hrfee:tailwind
hrfee:mautrix
hrfee:matrix
hrfee:discord
hrfee:telegram
hrfee:v0.5.1
hrfee:v0.5.0
hrfee:v0.4.0
hrfee:v0.3.9
hrfee:v0.3.8
hrfee:v0.3.7
hrfee:v0.3.6
hrfee:v0.3.4
hrfee:v0.3.3
hrfee:v0.3.2
hrfee:v0.3.1
hrfee:v0.3.0
hrfee:v0.2.9
hrfee:v0.2.8
hrfee:v0.2.7
hrfee:v0.2.6
hrfee:v0.2.5
hrfee:v0.2.2
hrfee:v0.2.1
hrfee:v0.2.0
hrfee:v0.1.9
hrfee:v0.1.8
hrfee:v0.1.7
hrfee:v0.1.6
hrfee:v0.1.5
hrfee:v0.1.4
hrfee:v0.1.3
hrfee:v0.1.2
hrfee:v0.1.1
hrfee:v0.1.0

No commits in common. "2be7baea4a8aee7d0182b1e2de3bc0a7e7f4bac2" and "f460bfcfc60e52acc73df5d64cde2a7f8a0fbb52" have entirely different histories.
2be7baea4a ... f460bfcfc6

14 changed files with 222 additions and 176 deletions
Show Stats Expand all files Collapse all files

144
css/base.css
View File

@ -106,6 +106,48 @@ 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;
@ -130,7 +172,23 @@ span.sm:not(.heading) {
margin: .25rem; margin: .25rem;
} }
/* Who knows for half of these to be honest */ .flex-col {
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;
@ -161,6 +219,69 @@ sup.\~critical, .text-critical {
font-size: 1rem; font-size: 1rem;
} }
.inv-created-users strong,p {
padding-left: 0.5rem;
padding-bottom: 0.2rem;
}
.inv-created-users.empty strong,p {
padding: 0;
}
.inv {
overflow: visible;
}
.inv-table {
font-size: 0.8rem;
}
.inv-profilearea {
min-width: 20%;
}
.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 */
} }
@ -179,6 +300,10 @@ sup.\~critical, .text-critical {
width: 100%; width: 100%;
} }
.flex-auto {
flex: auto;
}
.center { .center {
justify-content: center; justify-content: center;
} }
@ -187,6 +312,14 @@ sup.\~critical, .text-critical {
align-items: center; align-items: center;
} }
.no-lp {
padding-left: 0px;
}
.block {
display: block;
}
.focused { .focused {
display: block; display: block;
} }
@ -283,16 +416,7 @@ table {
color: var(--color-content); color: var(--color-content);
} }
table.table.manual-pad th, table.table.manual-pad td {
padding: 0;
}
table.table-p-0 th, table.table-p-0 td {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
p.top { p.top {
margin-top: 0px; margin-top: 0px;

64
html/admin.html
View File

@ -50,24 +50,24 @@
<p>{{ .strings.commitNoun }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .commit }}</span></p> <p>{{ .strings.commitNoun }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .commit }}</span></p>
<p>{{ .strings.buildTime }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .buildTime }}</span></p> <p>{{ .strings.buildTime }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .buildTime }}</span></p>
<p>{{ .strings.builtBy }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .builtBy }}</span></p> <p>{{ .strings.builtBy }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .builtBy }}</span></p>
<div class="flex flex-row flex-wrap gap-2 my-2"> <div class="row col flex">
<a class="button ~neutral 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 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>
<a class="button ~positive lang-link" href="https://weblate.jfa-go.com">translation</a> <a class="button ~positive mt-4 mb-4 mr-2 lang-link" href="https://weblate.jfa-go.com">translation</a>
<div class="dropdown" tabindex="0"> <div class="dropdown mr-2" tabindex="0">
<a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info dropdown-button lang-link"> <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info mt-4 mb-4 dropdown-button lang-link">
<i class="ri-hand-heart-line mr-2"></i> <i class="ri-hand-heart-line mr-2"></i>
donate donate
<span class="ml-2 chev"></span> <span class="ml-2 chev"></span>
</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-full lang-link">GitHub</a> <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~neutral mb-2 w-100 lang-link">GitHub</a>
<a href="https://ko-fi.com/hrfee" target="_blank" class="button ~neutral mb-2 w-full lang-link">Ko-fi</a> <a href="https://ko-fi.com/hrfee" target="_blank" class="button ~neutral mb-2 w-100 lang-link">Ko-fi</a>
</div> </div>
</div> </div>
</div> </div>
<a class="button ~urge @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. Font "Hanken Grotesk" available under SIL OFL 1.1 License.</a></p> <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License. Font "Hanken Grotesk" available under SIL OFL 1.1 License.</a></p>
<pre class="font-mono bg-inherit">{{ .license }}</pre> <pre class="font-mono bg-inherit">{{ .license }}</pre>
@ -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="grow mr-2"> <label class="flex-row-group 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="grow ml-2"> <label class="flex-row-group 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="grow mr-2"> <label class="flex-row-group 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="grow ml-2"> <label class="flex-row-group 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>
@ -259,7 +259,7 @@
<input type="text" class="input ~neutral @low mb-2 mt-4"> <input type="text" class="input ~neutral @low mb-2 mt-4">
<p class="support">{{ .strings.templateEnterName }}</p> <p class="support">{{ .strings.templateEnterName }}</p>
</label> </label>
<div class="flex flex-row justify-between"> <div class="row flex-expand">
<label> <label>
<input type="submit" class="unfocused"> <input type="submit" class="unfocused">
<span class="button ~urge @low center supra submit">{{ .strings.send }}</span> <span class="button ~urge @low center supra submit">{{ .strings.send }}</span>
@ -278,7 +278,7 @@
<div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3"> <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
<span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
<p class="content my-4">{{ .strings.customizeMessagesDescription }}</p> <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
<div class=""> <div class="table-responsive">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -329,7 +329,7 @@
</div> </div>
</div> </div>
<div id="modal-backups" class="modal"> <div id="modal-backups" class="modal">
<div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-2/3"> <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
<span class="heading">{{ .strings.backups }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.backups }} <span class="modal-close">&times;</span></span>
<div class="content my-4"> <div class="content my-4">
{{ .strings.backupsDescription }} {{ .strings.backupsDescription }}
@ -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-full ~info @low mb-2"><span class="flex items-center" id="settings-backed-up-download">{{ .strings.download }}</span></button> <button class="button flex w-100 ~info @low mb-2"><span class="flex items-center" id="settings-backed-up-download">{{ .strings.download }}</span></button>
</div> </div>
</div> </div>
</div> </div>
@ -396,7 +396,7 @@
</form> </form>
</div> </div>
<div id="modal-user-profiles" class="modal"> <div id="modal-user-profiles" class="modal">
<div class="relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-2/3 content card"> <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
<span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span>
<p class="content my-4">{{ .strings.userProfilesDescription }}</p> <p class="content my-4">{{ .strings.userProfilesDescription }}</p>
<div class="table-responsive"> <div class="table-responsive">
@ -445,7 +445,7 @@
</form> </form>
</div> </div>
<div id="modal-update" class="modal"> <div id="modal-update" class="modal">
<div class="relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 content card"> <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
<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 class="mt-2"> <h2 class="mt-2">
@ -549,11 +549,11 @@
<div id="tab-invites"> <div id="tab-invites">
<div class="card @low invites dark:~d_neutral mb-4 overflow-visible"> <div class="card @low invites dark:~d_neutral mb-4 overflow-visible">
<span class="heading">{{ .strings.invites }}</span> <span class="heading">{{ .strings.invites }}</span>
<div id="invites" class="mt-2"></div> <div id="invites"></div>
</div> </div>
<div class="card @low dark:~d_neutral"> <div class="card @low dark:~d_neutral">
<span class="heading">{{ .strings.create }}</span> <span class="heading">{{ .strings.create }}</span>
<div class="flex flex-col md:flex-row gap-3 mt-2" id="create-inv"> <div class="flex flex-col md:flex-row gap-3" id="create-inv">
<div class="card ~neutral @low flex flex-col gap-2 w-1/2"> <div class="card ~neutral @low flex flex-col gap-2 w-1/2">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<label class="w-1/2"> <label class="w-1/2">
@ -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-full"> <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100">
<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-full button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span> <span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span>
</div> </div>
<div class="flex flex-row align-middle w-full"> <div class="flex flex-row align-middle w-100">
<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-full button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span> <span class="w-100 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-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> <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>
<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-full button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span> <span class="w-100 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-full" tabindex="0"> <div id="activity-filter-dropdown" class="dropdown manual z-10 w-100" 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-full button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span> <span class="dropdown-manual-toggle"><button class="h-100 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-full"> <div class="flex flex-row align-middle w-100">
<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-full"> <div class="flex flex-row justify-start md:justify-end gap-2 w-100">
<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>
@ -881,7 +881,7 @@
</div> </div>
<div class="flex flex-col md:flex-row gap-3"> <div class="flex flex-col md:flex-row gap-3">
<div class="card @low dark:~d_neutral col" id="settings-sidebar"> <div class="card @low dark:~d_neutral col" id="settings-sidebar">
<div class="flex flex-row justify-between"> <div class="flex-expand">
<input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}"> <input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}">
<button class="button ~neutral @low center -ml-10 rounded-s-none mb-2 settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></button> <button class="button ~neutral @low center -ml-10 rounded-s-none mb-2 settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></button>
</div> </div>

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 flex-row justify-between"> <div class="flex-expand">
<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-full" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a> <a class="button ~info h-12 w-100" 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 form-login w-[100%] lg:w-[55%] mb-0" href=""> <form class="card mx-2 flex-auto 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-full text-center text-xl p-1 mt-4" id="pin" title="{{ .strings.copy }}">{{ .pin }}</span> <span class="button ~urge @low w-100 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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>

6
html/user.html
View File

@ -109,10 +109,10 @@
<div class="card @low dark:~d_neutral mb-4" id="card-user"> <div class="card @low dark:~d_neutral mb-4" id="card-user">
<span class="heading mb-2"></span> <span class="heading mb-2"></span>
</div> </div>
<div class="columns-1 sm:columns-2 gap-4" id="user-cardlist"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
{{ if index . "PageMessageEnabled" }} {{ if index . "PageMessageEnabled" }}
{{ if .PageMessageEnabled }} {{ if .PageMessageEnabled }}
<div class="card @low dark:~d_neutral content break-words" id="card-message"> <div class="card @low dark:~d_neutral content" id="card-message">
{{ .PageMessageContent }} {{ .PageMessageContent }}
</div> </div>
{{ end }} {{ end }}
@ -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 gap-2"> <div class="row flex-expand">
<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 flex-row justify-between middle"> <section class="section ~neutral banner footer flex-expand 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-full">Telegram</button> <button class="button ~critical mb-2 w-100">Telegram</button>
</div> </div>
<div class="accounts-unlink-discord"> <div class="accounts-unlink-discord">
<button class="button ~critical mb-2 w-full">Discord</button> <button class="button ~critical mb-2 w-100">Discord</button>
</div> </div>
<div class="accounts-unlink-matrix"> <div class="accounts-unlink-matrix">
<button class="button ~critical mb-2 w-full">Matrix</button> <button class="button ~critical mb-2 w-100">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", "flex-row", "justify-between", "truncate", "mt-2"); el.classList.add("flex-expand", "ellipsis", "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-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> <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>
`; `;
this.input.value = ""; this.input.value = "";
} }

54
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-full"); chip.parentElement.classList.remove("h-100");
} else { } else {
chip.classList.add("button"); chip.classList.add("button");
chip.parentElement.classList.add("h-full"); chip.parentElement.classList.add("h-100");
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");
@ -146,11 +146,10 @@ class DOMInvite implements Invite {
} }
this._right.classList.remove("empty"); this._right.classList.remove("empty");
let innerHTML = ` let innerHTML = `
<table class="table inv-table table-p-0"> <table class="table inv-table">
<thead> <thead>
<tr> <tr>
<th>${window.lang.strings("name")}</th> <th>${window.lang.strings("name")}</th>
<th class="w-2"></th>
<th>${window.lang.strings("date")}</th> <th>${window.lang.strings("date")}</th>
</tr> </tr>
</thead> </thead>
@ -160,7 +159,6 @@ class DOMInvite implements Invite {
innerHTML += ` innerHTML += `
<tr> <tr>
<td>${username}</td> <td>${username}</td>
<td class="w-2"></td>
<td>${toDateString(new Date(uB[username] * 1000))}</td> <td>${toDateString(new Date(uB[username] * 1000))}</td>
</tr> </tr>
`; `;
@ -268,7 +266,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-visible"); this._container.classList.add("inv", "overflow-y-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 +274,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-full", "items-baseline", "gap-2", "truncate"); this._codeArea.classList.add("flex", "flex-row", "flex-wrap", "justify-between", "w-100", "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 truncate" href=""></a> <a class="invite-link text-black dark:text-white font-mono bg-inherit" 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 +303,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-full"><i></i></span> <span class="inv-email-chip h-100"><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-full">${window.lang.strings("delete")}</span> <span class="button ~critical @low inv-delete h-100">${window.lang.strings("delete")}</span>
<label> <label>
<i class="icon px-2.5 py-2 ri-arrow-down-s-line not-rotated"></i> <i class="icon clickable 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>
`; `;
@ -329,20 +327,17 @@ class DOMInvite implements Invite {
this._details = document.createElement('div') as HTMLDivElement; this._details = document.createElement('div') as HTMLDivElement;
this._container.appendChild(this._details); this._container.appendChild(this._details);
this._details.classList.add("card", "~neutral", "@low", "mt-2", "inv-details"); this._details.classList.add("card", "~neutral", "@low", "mt-2", "no-pad", "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", "gap-4"); detailsInner.classList.add("inv-row", "flex-expand", "row", "elem-pad", "align-top");
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");
detailsInner.appendChild(this._left); detailsInner.appendChild(this._left);
const leftLeft = document.createElement("div") as HTMLDivElement; this._left.classList.add("inv-profilearea");
this._left.appendChild(leftLeft);
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 min-w-full inline-block mb-2"> <div class="select ~neutral @low inv-profileselect 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>
@ -361,7 +356,7 @@ class DOMInvite implements Invite {
</label> </label>
`; `;
} }
leftLeft.innerHTML = innerHTML; this._left.innerHTML = innerHTML;
(this._left.querySelector("select") as HTMLSelectElement).onchange = this.updateProfile; (this._left.querySelector("select") as HTMLSelectElement).onchange = this.updateProfile;
if (window.notificationsEnabled) { if (window.notificationsEnabled) {
@ -373,21 +368,20 @@ class DOMInvite implements Invite {
} }
this._middle = document.createElement('div') as HTMLDivElement; this._middle = document.createElement('div') as HTMLDivElement;
this._left.appendChild(this._middle); detailsInner.appendChild(this._middle);
this._middle.classList.add("flex", "flex-col", "justify-between"); this._middle.classList.add("block");
this._middle.innerHTML = ` this._middle.innerHTML = `
<p class="supra top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p> <p class="supra mb-4 top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p>
<p class="supra">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p> <p class="supra mb-4">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p>
<p class="supra"><span class="user-expiry"></span> <strong class="user-expiry-time"></strong></p> <p class="supra mb-4"><span class="user-expiry"></span> <strong class="user-expiry-time"></strong></p>
<p class="flex items-center"><span class="user-label-label supra mr-2"></span> <span class="user-label chip ~blue unfocused"></span></p> <p class="mb-4 flex items-center"><span class="user-label-label supra mr-2"></span> <span class="user-label chip ~blue unfocused"></span></p>
`; `;
this._right = document.createElement('div') as HTMLDivElement; this._right = document.createElement('div') as HTMLDivElement;
detailsInner.appendChild(this._right); detailsInner.appendChild(this._right);
this._right.classList.add("card", "~neutral", "@low", "inv-created-users", "min-w-full", "sm:min-w-fit", "whitespace-nowrap"); this._right.classList.add("card", "~neutral", "@low", "inv-created-users");
this._right.innerHTML = `<span class="supra table-header">${window.lang.strings("inviteUsersCreated")}</span>`; this._right.innerHTML = `<strong class="supra table-header">${window.lang.strings("inviteUsersCreated")}</strong>`;
this._userTable = document.createElement('div') as HTMLDivElement; this._userTable = document.createElement('div') as HTMLDivElement;
this._userTable.classList.add("text-sm", "mt-1", );
this._right.appendChild(this._userTable); this._right.appendChild(this._userTable);
@ -480,8 +474,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 mt-2"> <div class="card dark:~d_neutral @low inv-header flex-expand mt-2">
<div class="justify-start"> <div class="inv-codearea">
<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-full text-left justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`; innerHTML += `<a href="?${queryString.toString()}" class="button w-100 al 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 truncate"></td> <td class="profile-from ellipsis"></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>
`; `;

80
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-row", "justify-between", "my-2", "flex-nowrap"); row.classList.add("flex", "flex-expand", "my-2", "flex-nowrap");
let innerHTML = ` let innerHTML = `
<div class="flex items-baseline flex-nowrap truncate"> <div class="flex items-baseline flex-nowrap ellipsis">
<span class="shield ~urge" alt="${name}"> <span class="shield ~urge" alt="${name}">
<span class="icon"> <span class="icon">
${icon} ${icon}
@ -637,10 +637,10 @@ document.addEventListener("details-reload", () => {
if (typeof(messageCard) != "undefined" && messageCard != null) { if (typeof(messageCard) != "undefined" && messageCard != null) {
messageCard.innerHTML = messageCard.innerHTML.replace(new RegExp("{username}", "g"), details.username); messageCard.innerHTML = messageCard.innerHTML.replace(new RegExp("{username}", "g"), details.username);
// setBestRowSpan(messageCard, false); setBestRowSpan(messageCard, false);
// contactCard.querySelector(".content").classList.add("h-100"); // contactCard.querySelector(".content").classList.add("h-100");
} else if (!statusCard.classList.contains("unfocused")) { } else if (!statusCard.classList.contains("unfocused")) {
// setBestRowSpan(passwordCard, true); setBestRowSpan(passwordCard, true);
} }
if (window.referralsEnabled) { if (window.referralsEnabled) {
@ -649,69 +649,15 @@ document.addEventListener("details-reload", () => {
if (req.readyState != 4 || req.status != 200) return; if (req.readyState != 4 || req.status != 200) return;
const referral: MyReferral = req.response as MyReferral; const referral: MyReferral = req.response as MyReferral;
referralCard.update(referral); referralCard.update(referral);
setCardOrder(messageCard);
}); });
} else { } else {
referralCard.hide(); referralCard.hide();
setCardOrder(messageCard);
} }
} else {
setCardOrder(messageCard);
} }
} }
}); });
}); });
const setCardOrder = (messageCard: HTMLElement) => {
const cards = document.getElementById("user-cardlist");
const children = Array.from(cards.children);
const idxs = [...Array(cards.childElementCount).keys()]
// The message card is the first element and should always be so, so remove it from the list.
const hasMessageCard = !(typeof(messageCard) == "undefined" || messageCard == null);
if (hasMessageCard) idxs.shift();
const perms = generatePermutations(idxs);
let minHeight = 999999;
let minHeightPerm: [number[], number[]];
for (let perm of perms) {
let leftHeight = 0;
for (let idx of perm[0]) {
leftHeight += (cards.children[idx] as HTMLElement).offsetHeight;
}
if (hasMessageCard) leftHeight += (cards.children[0] as HTMLElement).offsetHeight;
let rightHeight = 0;
for (let idx of perm[1]) {
rightHeight += (cards.children[idx] as HTMLElement).offsetHeight;
}
let height = Math.max(leftHeight, rightHeight);
// console.log("got height", leftHeight, rightHeight, height, "for", perm);
if (height < minHeight) {
minHeight = height;
minHeightPerm = perm;
}
}
const gapDiv = () => {
const g = document.createElement("div");
g.classList.add("my-4");
return g;
};
let addValue = hasMessageCard ? 1 : 0;
// if (hasMessageCard) cards.appendChild(children[0]);
if (hasMessageCard) cards.appendChild(gapDiv());
for (let side of minHeightPerm) {
for (let i = 0; i < side.length; i++) {
// (cards.children[side[i]] as HTMLElement).style.order = (i+addValue).toString();
children[side[i]].remove();
cards.appendChild(children[side[i]]);
cards.appendChild(gapDiv());
}
// addValue += side.length;
}
console.log("Shortest order:", minHeightPerm);
};
const login = new Login(window.modals.login as Modal, "/my/", "opaque"); const login = new Login(window.modals.login as Modal, "/my/", "opaque");
login.onLogin = () => { login.onLogin = () => {
console.log("Logged in."); console.log("Logged in.");
@ -753,24 +699,6 @@ const computeRealHeight = (el: HTMLElement): number => {
return total; return total;
} }
const generatePermutations = (xs: number[]): [number[], number[]][] => {
const l = xs.length;
let out: [number[], number[]][] = [];
for (let i = 0; i < (l << 1); i++) {
let incl = [];
let excl = [];
for (let j = 0; j < l; j++) {
if (i & (1 << j)) {
incl.push(xs[j]);
} else {
excl.push(xs[j]);
}
}
out.push([incl, excl]);
}
return out;
}
login.bindLogout(document.getElementById("logout-button")); login.bindLogout(document.getElementById("logout-button"));
login.login("", ""); login.login("", "");