mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-28 20:10:11 +00:00
Compare commits
No commits in common. "9ae90e0a0fa476851cbafeaed8dd7560f9ac160e" and "90c7745a777e77a0d478609678b55bad15eb97ad" have entirely different histories.
9ae90e0a0f
...
90c7745a77
19
README.md
19
README.md
@ -1,21 +1,14 @@
|
||||
This branch is for experimenting with [a17t](https://a17t.miles.land/) to possibly replace bootstrap in the future. Currently just working on the page structures, so none of this is actually usable in jfa-go yet.
|
||||
|
||||
#### todo
|
||||
**general**
|
||||
* [x] invites tab mockup (partially complete)
|
||||
* [x] accounts tab mockup
|
||||
* [x] settings tab mockup
|
||||
* [x] modal implementation
|
||||
* [x] animations
|
||||
* [x] utilities
|
||||
* [x] CSS for light & dark
|
||||
|
||||
**admin**
|
||||
* [x] invites tab
|
||||
* [x] accounts tab
|
||||
* [x] settings tab
|
||||
* [x] modals
|
||||
* [ ] integration with existing code
|
||||
|
||||
**invites**
|
||||
* [ ] everything
|
||||
* [x] animations
|
||||
* [x] JS to TS, utilities
|
||||
* [ ] Integration with existing code
|
||||
|
||||
#### screenshots
|
||||
##### dark
|
||||
|
||||
324
base.css
324
base.css
@ -1,15 +1,8 @@
|
||||
@import "node_modules/a17t/dist/a17t.css";
|
||||
@import "node_modules/remixicon/fonts/remixicon.css";
|
||||
@import "node_modules/icons.css/dist/icons.css";
|
||||
@import "modal.css";
|
||||
@import "dark.css";
|
||||
|
||||
:root {
|
||||
--border-width-default: 2px;
|
||||
--border-width-2: 3px;
|
||||
--border-width-4: 5px;
|
||||
--border-width-8: 8px;
|
||||
}
|
||||
|
||||
.light-theme {
|
||||
--settings-section-button-filter: 90%;
|
||||
}
|
||||
@ -18,97 +11,158 @@
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
.pageContainer {
|
||||
margin: 5% 20% 5% 20%;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.page-container {
|
||||
.pageContainer {
|
||||
margin: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
.contactBox {
|
||||
color: grey;
|
||||
}
|
||||
#container {
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
.tabText {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.mb-half {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 2rem;
|
||||
.mb-half {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-half {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mt-half {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.inv-codearea {
|
||||
/*width: 40%;*/
|
||||
}
|
||||
.al {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
align-items: top;
|
||||
.ar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-expand {
|
||||
.monospace {
|
||||
background-color: inherit;
|
||||
}
|
||||
.mt-half {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.table-header {
|
||||
padding-left: 0.5rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.inv {
|
||||
overflow: visible;
|
||||
}
|
||||
.inv-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
.button-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-row-group {
|
||||
.inv-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: top;
|
||||
}
|
||||
.ib {
|
||||
display: inline-block;
|
||||
}
|
||||
.inv-profileselect {
|
||||
min-width: 100%;
|
||||
}
|
||||
.inv-table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.no-lp {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.block { display: block; }
|
||||
.hiding {
|
||||
animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.visible {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
/*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@keyframes slide-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.toggle-details {
|
||||
display: none;
|
||||
}
|
||||
.rotated {
|
||||
transform: rotate(180deg);
|
||||
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
|
||||
}
|
||||
|
||||
.not-rotated {
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
@ -117,108 +171,28 @@
|
||||
flex: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
.input {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monospace {
|
||||
background-color: inherit; /* so we can use a17t code blocks */
|
||||
}
|
||||
|
||||
sup.\~critical, .text-critical {
|
||||
color: var(--color-critical-normal-content);
|
||||
}
|
||||
|
||||
.aside.sm {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.support.lg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
padding-left: 0.5rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.inv {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.inv-table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.inv-profileselect {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.input {
|
||||
box-sizing: border-box; /* fixes weird length issue with inputs */
|
||||
.submit {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button-lg {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.submit {
|
||||
border: none;
|
||||
outline: none; /* remove browser styling on submit buttons */
|
||||
}
|
||||
|
||||
.full-width { /* full width inputs */
|
||||
box-sizing: border-box; /* TODO: maybe remove if we figure out input thing? */
|
||||
.full-width {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.no-lp {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.focused {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.unfocused {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rotated {
|
||||
transform: rotate(180deg);
|
||||
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.not-rotated {
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
transition: all 0.3s cubic-bezier(0,.89,.27,.92);
|
||||
}
|
||||
|
||||
.stealth-input {
|
||||
font-size: 1rem;
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.stealth-input-hidden {
|
||||
border-style: none;
|
||||
--fallback-box-shadow: none;
|
||||
@ -227,31 +201,72 @@ sup.\~critical, .text-critical {
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
.stealth-input {
|
||||
font-size: 1rem;
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
max-width: 50%;
|
||||
|
||||
}
|
||||
.settings-section-button {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
background-color: rgba(0,0,0,0);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.settings-section-button:hover {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
background-color: var(--color-neutral-normal-fill);
|
||||
filter: brightness(var(--settings-section-button-filter)) !important;
|
||||
|
||||
.settings-section-button:hover, .settings-section-button:focus {
|
||||
}
|
||||
.settings-section-button:focus {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
background-color: var(--color-neutral-normal-fill);
|
||||
filter: brightness(var(--settings-section-button-filter)) !important;
|
||||
}
|
||||
|
||||
.settings-section-button.selected {
|
||||
background-color: var(--color-neutral-normal-fill);
|
||||
--buton-filter-brightness: var(--settings-section-button-filter);
|
||||
--button-filter-brightness: var(--settings-section-button-filter);
|
||||
filter: brightness(var(--settings-section-button-filter)) !important;
|
||||
}
|
||||
|
||||
.text-critical {
|
||||
color: var(--color-critical-normal-content);
|
||||
}
|
||||
.aside.small {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
.setting {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.support.large {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fw-group {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
@ -259,13 +274,8 @@ sup.\~critical, .text-critical {
|
||||
|
||||
select {
|
||||
color: inherit;
|
||||
border: 0 solid var(--color-neutral-300);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
input {
|
||||
color: inherit;
|
||||
border: 0 solid var(--color-neutral-300);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
51
index.html
51
index.html
@ -25,7 +25,7 @@
|
||||
<div class="modal-content content card">
|
||||
<span class="heading">About <span class="modal-close">×</span></span>
|
||||
<img src="images/banner.svg" class="mt-1" alt="jfa-go banner">
|
||||
<p><i class="icon ri-github-fill"></i><a href="https://github.com/hrfee/jfa-go">jfa-go</a></p>
|
||||
<p><a href="https://github.com/hrfee/jfa-go/tree/a17t-redesign">Github (ICON)</a></p>
|
||||
<p>Version <span class="code monospace">a17t-redesign</span></p>
|
||||
<p>Commit <span class="code monospace">cb28097</span></p>
|
||||
<p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
|
||||
@ -36,12 +36,12 @@
|
||||
<span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">×</span></span>
|
||||
<p class="content">Apply settings from an existing profile, or source them directly from a user.</p>
|
||||
<div class="flex-row mb-1">
|
||||
<label class="flex-row-group mr-1">
|
||||
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
|
||||
<label class="fw-group mr-1">
|
||||
<input type="radio" name="modify-user-source" class="hidden" id="radio-use-profile" checked>
|
||||
<span class="button ~neutral !high supra full-width center">Profile</span>
|
||||
</label>
|
||||
<label class="flex-row-group ml-1">
|
||||
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
|
||||
<label class="fw-group ml-1">
|
||||
<input type="radio" name="modify-user-source" class="hidden" id="radio-use-user">
|
||||
<span class="button ~neutral !normal supra full-width center">User</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -52,7 +52,7 @@
|
||||
<option>Default</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="modify-user-users" class="select ~neutral !normal mb-1 unfocused">
|
||||
<div id="modify-user-users" class="select ~neutral !normal mb-1 hidden">
|
||||
<select>
|
||||
<option>Person</option>
|
||||
<option>Other person</option>
|
||||
@ -107,13 +107,13 @@
|
||||
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
|
||||
<div class="pageContainer max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
|
||||
<div class="mb-1">
|
||||
<header class="flex flex-wrap items-center justify-between">
|
||||
<div class="text-neutral-700">
|
||||
<span id="invitesTab-button" class="tab-button portal ~urge active">Invites</span>
|
||||
<span id="accountsTab-button" class="tab-button portal">Accounts</span>
|
||||
<span id="settingsTab-button" class="tab-button portal">Settings</span>
|
||||
<span id="invitesTab-button" class="tabText portal ~urge active">Invites</span>
|
||||
<span id="accountsTab-button" class="tabText portal">Accounts</span>
|
||||
<span id="settingsTab-button" class="tabText portal">Settings</span>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
@ -128,7 +128,7 @@
|
||||
<div class="card ~neutral !low invites mb-1">
|
||||
<span class="heading">Invites</span>
|
||||
<div class="inv">
|
||||
<div class="card ~neutral !normal inv-header flex-expand mt-half">
|
||||
<div class="card ~neutral !normal inv-header mt-half">
|
||||
<div class="inv-codearea">
|
||||
<a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
|
||||
<span class="button ~info !normal">Copy</span>
|
||||
@ -137,16 +137,16 @@
|
||||
<span class="inv-expiry mr-1">Expires in 30m</span>
|
||||
<span class="button ~critical !normal">Delete</span>
|
||||
<label>
|
||||
<i class="icon ri-arrow-down-s-line not-rotated"></i>
|
||||
<input type="checkbox" class="toggle-details unfocused">
|
||||
<i class="icon icon-arrow-down not-rotated"></i>
|
||||
<input type="checkbox" class="toggle-details">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
|
||||
<div class="inv-row flex-expand align-top">
|
||||
<div class="card ~neutral !normal mt-half inv-details mt-half hidden">
|
||||
<div class="inv-row">
|
||||
<div class="inv-profilearea">
|
||||
<p class="supra mb-1">Profile</p>
|
||||
<div class="select ~neutral !normal inv-profileselect inline-block">
|
||||
<div class="select ~neutral !normal inv-profileselect ib">
|
||||
<select>
|
||||
<option>Friends</option>
|
||||
<option>Family</option>
|
||||
@ -213,14 +213,13 @@
|
||||
</div>
|
||||
<div class="card ~neutral !normal col">
|
||||
<label class="label supra" for="inv-uses">Number of uses</label>
|
||||
<div class="flex-expand mb-1">
|
||||
<div class="button-input mb-1">
|
||||
<input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
|
||||
<label for="inv-inf-uses" class="button ~neutral !normal">
|
||||
<span>∞</span>
|
||||
<input type="checkbox" class="unfocused" id="inv-inf-uses" aria-label="Set uses to infinite">
|
||||
</label>
|
||||
</div>
|
||||
<p class="support unfocused"><span class="badge ~critical">Warning</span> invites with infinite uses can be used abusively.</p>
|
||||
<label class="label supra">Profile</label>
|
||||
<div class="select ~neutral !normal mb-1" id="inv-profile">
|
||||
<select>
|
||||
@ -230,7 +229,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<label class="label supra">Send to</label>
|
||||
<div class="flex-expand mb-1">
|
||||
<div class="button-input mb-1">
|
||||
<input type="email" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
|
||||
<label for="inv-email-enabled" class="button ~neutral !normal">
|
||||
<input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
|
||||
@ -263,13 +262,13 @@
|
||||
<tr>
|
||||
<td><input type="checkbox" value=""></td>
|
||||
<td>Person <span class="chip ~info ml-1">Admin</span></td>
|
||||
<td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
|
||||
<td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
|
||||
<td>13/12/20 00:39</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" value=""></td>
|
||||
<td>Other person</td>
|
||||
<td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
|
||||
<td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
|
||||
<td>12/12/20 17:46</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -285,15 +284,15 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="card ~neutral !normal col">
|
||||
<aside class="aside sm ~info mb-half">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~critical">R</span> indicates changes require a restart.</aside>
|
||||
<aside class="aside small ~info mb-half">Note: <sup class="text-critical">*</sup> indicates a required field, <sup class="text-critical">R</sup> indicates changes require a restart.</aside>
|
||||
<span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
|
||||
<span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span>
|
||||
</div>
|
||||
<div class="card ~neutral !normal col">
|
||||
<div class="settings-section">
|
||||
<p class="support lg mb-half">Settings section description.</p>
|
||||
<p class="support large mb-half">Settings section description.</p>
|
||||
<div class="setting">
|
||||
<label class="label" for="settings-select">Select <span class="badge ~critical">R</span></label>
|
||||
<label class="label" for="settings-select">Select <sup class="text-critical">R</sup></label>
|
||||
<div class="select ~neutral !normal mt-half">
|
||||
<select id="settings-select">
|
||||
<option>Option 1</option>
|
||||
@ -301,13 +300,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<label class="label" for="settings-input">Input <span class="badge ~critical">*</span></label>
|
||||
<label class="label" for="settings-input">Input <sup class="text-critical">*</sup></label>
|
||||
<input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
|
||||
</div>
|
||||
<div class="setting">
|
||||
<label class="switch settings">
|
||||
<input type="checkbox" id="settings-check">
|
||||
<span>Checkbox <span class="badge ~critical">R</span></span>
|
||||
<span>Checkbox <sup class="text-critical">R</sup></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
3306
package-lock.json
generated
3306
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
41
package.json
41
package.json
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "jfa-go",
|
||||
"version": "1.0.0",
|
||||
"description": "This is only used for grabbing scss build dependencies, and isn't a real package.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"ts": "nodemon -e ts --watch ts --exec 'sh -c \"esbuild ts/*.ts --sourcemap --outdir=./\"'",
|
||||
"serve": "npx live-server --ignore=\"ts/**,node_modules/**\"",
|
||||
"serve-ts": "concurrently --kill-others \"npm run serve\" \"npm run ts\""
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/hrfee/jfa-go.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/hrfee/jfa-go/issues"
|
||||
},
|
||||
"homepage": "https://github.com/hrfee/jfa-go#readme",
|
||||
"dependencies": {
|
||||
"@types/jquery": "^3.5.3",
|
||||
"a17t": "^0.4.0",
|
||||
"autoprefixer": "^9.8.5",
|
||||
"bootstrap": "^5.0.0-alpha3",
|
||||
"bootstrap4": "npm:bootstrap@^4.5.0",
|
||||
"clean-css-cli": "^4.3.0",
|
||||
"esbuild": "^0.7.8",
|
||||
"lodash": "^4.17.19",
|
||||
"mjml": "^4.6.3",
|
||||
"postcss-cli": "^7.1.1",
|
||||
"remixicon": "^2.5.0",
|
||||
"typescript": "^4.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^5.3.0",
|
||||
"live-server": "^1.2.1",
|
||||
"nodemon": "^2.0.6"
|
||||
}
|
||||
}
|
||||
62
ts/main.ts
62
ts/main.ts
@ -31,12 +31,12 @@ const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('
|
||||
for (let toggle of toggles) {
|
||||
toggle.onclick = () => {
|
||||
const el = toggle.parentElement.parentElement.parentElement.nextElementSibling as HTMLDivElement;
|
||||
if (el.classList.contains("focused")) {
|
||||
el.classList.toggle("focused");
|
||||
el.classList.toggle("unfocused");
|
||||
if (el.classList.contains("visible")) {
|
||||
el.classList.toggle("visible");
|
||||
el.classList.toggle("hidden");
|
||||
} else {
|
||||
el.classList.toggle("unfocused");
|
||||
el.classList.toggle("focused");
|
||||
el.classList.toggle("hidden");
|
||||
el.classList.toggle("visible");
|
||||
}
|
||||
toggle.previousElementSibling.classList.toggle("rotated");
|
||||
toggle.previousElementSibling.classList.toggle("not-rotated");
|
||||
@ -47,21 +47,18 @@ const checkInfUses = function (check: HTMLInputElement, mode = 2) {
|
||||
const uses = document.getElementById('inv-uses') as HTMLInputElement;
|
||||
if (mode == 2) {
|
||||
uses.disabled = check.checked;
|
||||
check.parentElement.classList.toggle('~neutral');
|
||||
check.parentElement.classList.toggle('~urge');
|
||||
check.parentElement.parentElement.nextElementSibling.classList.toggle('unfocused');
|
||||
check.parentElement.classList.toggle('!normal');
|
||||
check.parentElement.classList.toggle('!high');
|
||||
} else if (mode == 1) {
|
||||
uses.disabled = true;
|
||||
check.checked = true;
|
||||
check.parentElement.classList.remove('~neutral');
|
||||
check.parentElement.classList.add('~urge');
|
||||
check.parentElement.parentElement.nextElementSibling.classList.remove('unfocused');
|
||||
check.parentElement.classList.remove('!normal');
|
||||
check.parentElement.classList.add('!high');
|
||||
} else {
|
||||
uses.disabled = false;
|
||||
check.checked = false;
|
||||
check.parentElement.classList.remove('~urge');
|
||||
check.parentElement.classList.add('~neutral');
|
||||
check.parentElement.parentElement.nextElementSibling.classList.add('unfocused');
|
||||
check.parentElement.classList.remove('!high');
|
||||
check.parentElement.classList.add('!normal');
|
||||
}
|
||||
};
|
||||
|
||||
@ -72,18 +69,18 @@ const checkEmailEnabled = function (check: HTMLInputElement, mode = 2) {
|
||||
const input = document.getElementById('inv-email') as HTMLInputElement;
|
||||
if (mode == 2) {
|
||||
input.disabled = !check.checked;
|
||||
check.parentElement.classList.toggle('~neutral');
|
||||
check.parentElement.classList.toggle('~urge');
|
||||
check.parentElement.classList.toggle('!normal');
|
||||
check.parentElement.classList.toggle('!high');
|
||||
} else if (mode == 1) {
|
||||
input.disabled = false;
|
||||
check.checked = true;
|
||||
check.parentElement.classList.remove('~neutral');
|
||||
check.parentElement.classList.add('~urge');
|
||||
check.parentElement.classList.remove('!normal');
|
||||
check.parentElement.classList.add('!high');
|
||||
} else {
|
||||
input.disabled = true;
|
||||
check.checked = false;
|
||||
check.parentElement.classList.remove('~urge');
|
||||
check.parentElement.classList.add('~neutral');
|
||||
check.parentElement.classList.remove('!high');
|
||||
check.parentElement.classList.add('!normal');
|
||||
}
|
||||
};
|
||||
let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement;
|
||||
@ -98,23 +95,11 @@ const loadAccounts = function () {
|
||||
const row = rows[i];
|
||||
const editButton = row.querySelector(".icon") as HTMLElement;
|
||||
const emailInput = row.querySelector(".input") as HTMLInputElement;
|
||||
const outerClickListener = (event: Event) => {
|
||||
if (!(event.target instanceof HTMLElement && (emailInput.contains(event.target) || editButton.contains(event.target)))) {
|
||||
emailInput.classList.toggle('stealth-input-hidden');
|
||||
emailInput.readOnly = !emailInput.readOnly;
|
||||
editButton.classList.toggle('ri-edit-line');
|
||||
editButton.classList.toggle('ri-check-line');
|
||||
document.removeEventListener('click', outerClickListener);
|
||||
}
|
||||
};
|
||||
editButton.onclick = function () {
|
||||
emailInput.classList.toggle('stealth-input-hidden');
|
||||
emailInput.readOnly = !emailInput.readOnly;
|
||||
editButton.classList.toggle('ri-edit-line');
|
||||
editButton.classList.toggle('ri-check-line');
|
||||
if (editButton.classList.contains('ri-check-line')) {
|
||||
document.addEventListener('click', outerClickListener);
|
||||
}
|
||||
editButton.classList.toggle('icon-edit');
|
||||
editButton.classList.toggle('icon-check');
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -130,8 +115,8 @@ const modifySettingsSource = function () {
|
||||
(user.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
|
||||
(profile.nextElementSibling as HTMLSpanElement).classList.toggle('!normal');
|
||||
(profile.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
|
||||
profileSelect.classList.toggle('unfocused');
|
||||
userSelect.classList.toggle('unfocused');
|
||||
profileSelect.classList.toggle('hidden');
|
||||
userSelect.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
const radioUseProfile = document.getElementById('radio-use-profile') as HTMLInputElement;
|
||||
@ -143,9 +128,9 @@ radioUseUser.checked = false;
|
||||
|
||||
const checkDeleteUserNotify = function () {
|
||||
if ((document.getElementById('delete-user-notify') as HTMLInputElement).checked) {
|
||||
document.getElementById('textarea-delete-user').classList.remove('unfocused');
|
||||
document.getElementById('textarea-delete-user').classList.remove('hidden');
|
||||
} else {
|
||||
document.getElementById('textarea-delete-user').classList.add('unfocused');
|
||||
document.getElementById('textarea-delete-user').classList.add('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
@ -195,3 +180,4 @@ const modalRefresh = new Modal(document.getElementById('modal-refresh'));
|
||||
|
||||
const modalOmbiDefaults = new Modal(document.getElementById('modal-ombi-defaults'));
|
||||
document.getElementById('form-ombi-defaults').addEventListener('submit', modalOmbiDefaults.close);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user