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

allow for defining custom dark: variants, ignore querySelector, shrink margins

Browse Source
This commit is contained in:
Harvey Tindall 2021-12-31 16:01:17 +00:00
parent f7f3530a33
commit 277690ef79
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
4 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/base.css
View File

@ -42,6 +42,7 @@
@media (max-width: 1100px) { @media (max-width: 1100px) {
.page-container { .page-container {
margin: 2%; margin: 2%;
margin-top: 5rem;
} }
} }

34
html/admin.html
View File

@ -22,7 +22,7 @@
<div id="modal-login" class="modal"> <div id="modal-login" class="modal">
<form class="modal-content card" id="form-login" href=""> <form class="modal-content card" id="form-login" href="">
<span class="heading">{{ .strings.login }}</span> <span class="heading">{{ .strings.login }}</span>
<input type="text" class="field input ~neutral @high mt-8 mb-4" 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">
<label> <label>
<input type="submit" class="unfocused"> <input type="submit" class="unfocused">
@ -33,8 +33,8 @@
<div id="modal-add-user" class="modal"> <div id="modal-add-user" class="modal">
<form class="modal-content card" id="form-add-user" href=""> <form class="modal-content card" id="form-add-user" href="">
<span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
<input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="add-user-user"> <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="add-user-user">
<input type="email" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.emailAddress }}"> <input type="email" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.emailAddress }}">
<input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="add-user-password"> <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="add-user-password">
<label> <label>
<input type="submit" class="unfocused"> <input type="submit" class="unfocused">
@ -74,7 +74,7 @@
<div id="modal-modify-user" class="modal"> <div id="modal-modify-user" class="modal">
<form class="modal-content card" id="form-modify-user" href=""> <form class="modal-content card" id="form-modify-user" href="">
<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">{{ .strings.modifySettingsDescription }}</p> <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
<div class="flex-row mb-4"> <div class="flex-row mb-4">
<label class="flex-row-group 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>
@ -183,7 +183,7 @@
<input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4"> <input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4">
<label class="label supra" for="textarea-announce">{{ .strings.message }}</label> <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
<textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 monospace"></textarea> <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 monospace"></textarea>
<p class="support mt-8 mb-4">{{ .strings.markdownSupported }}</p> <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
</div> </div>
<label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p> <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
<input type="text" class="input ~neutral @low mb-2 mt-4"> <input type="text" class="input ~neutral @low mb-2 mt-4">
@ -207,7 +207,7 @@
<div id="modal-customize" class="modal"> <div id="modal-customize" class="modal">
<div class="modal-content card"> <div class="modal-content card">
<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">{{ .strings.customizeMessagesDescription }}</p> <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">
<thead> <thead>
@ -233,7 +233,7 @@
<div id="editor-conditionals"></div> <div id="editor-conditionals"></div>
<label class="label supra" for="textarea-editor">{{ .strings.message }}</label> <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
<textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 monospace"></textarea> <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 monospace"></textarea>
<p class="support mt-8 mb-4">{{ .strings.markdownSupported }}</p> <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
<div class="flex-row"> <div class="flex-row">
<label class="full-width ml-2"> <label class="full-width ml-2">
<input type="submit" class="unfocused"> <input type="submit" class="unfocused">
@ -251,7 +251,7 @@
<div id="modal-restart" class="modal"> <div id="modal-restart" class="modal">
<div class="modal-content card ~critical @low"> <div class="modal-content card ~critical @low">
<span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
<p class="content pb-4">{{ .strings.settingsRestartRequiredDescription }}</p> <p class="content my-4">{{ .strings.settingsRestartRequiredDescription }}</p>
<div class="float-right"> <div class="float-right">
<span class="button ~info @low mb-2" id="settings-apply-no-restart">{{ .strings.settingsApplyRestartLater }}</span> <span class="button ~info @low mb-2" id="settings-apply-no-restart">{{ .strings.settingsApplyRestartLater }}</span>
<span class="button ~critical @low" id="settings-apply-restart">{{ .strings.settingsApplyRestartNow }}</span> <span class="button ~critical @low" id="settings-apply-restart">{{ .strings.settingsApplyRestartNow }}</span>
@ -274,7 +274,7 @@
<div id="modal-ombi-profile" class="modal"> <div id="modal-ombi-profile" class="modal">
<form class="modal-content card" id="form-ombi-defaults" href=""> <form class="modal-content card" id="form-ombi-defaults" href="">
<span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
<p class="content">{{ .strings.ombiUserDefaultsDescription }}</p> <p class="content my-4">{{ .strings.ombiUserDefaultsDescription }}</p>
<div class="select ~neutral @low mb-4"> <div class="select ~neutral @low mb-4">
<select></select> <select></select>
</div> </div>
@ -287,7 +287,7 @@
<div id="modal-user-profiles" class="modal"> <div id="modal-user-profiles" class="modal">
<div class="modal-content wide card"> <div class="modal-content wide 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="support lg">{{ .strings.userProfilesDescription }}</p> <p class="content my-4">{{ .strings.userProfilesDescription }}</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">
<thead> <thead>
@ -310,13 +310,13 @@
<div id="modal-add-profile" class="modal"> <div id="modal-add-profile" class="modal">
<form class="modal-content card" id="form-add-profile" href=""> <form class="modal-content card" id="form-add-profile" href="">
<span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span> <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
<p class="content">{{ .strings.addProfileDescription }}</p> <p class="content my-4">{{ .strings.addProfileDescription }}</p>
<label> <label>
<span class="supra">{{ .strings.addProfileNameOf }} </span> <span class="supra">{{ .strings.addProfileNameOf }} </span>
<input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.name }}" id="add-profile-name"> <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.name }}" id="add-profile-name">
<label> <label>
<span class="supra">{{ .strings.user }}</span> <span class="supra">{{ .strings.user }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="add-profile-user"></select> <select id="add-profile-user"></select>
</div> </div>
</label> </label>
@ -378,10 +378,10 @@
<div id="modal-matrix" class="modal"> <div id="modal-matrix" class="modal">
<form class="modal-content card" id="form-matrix" href=""> <form class="modal-content card" id="form-matrix" href="">
<span class="heading">{{ .strings.linkMatrix }}</span> <span class="heading">{{ .strings.linkMatrix }}</span>
<p class="content">{{ .strings.linkMatrixDescription }}</p> <p class="content my-4">{{ .strings.linkMatrixDescription }}</p>
<input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver"> <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
<input type="text" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="matrix-user"> <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="matrix-user">
<input type="password" class="field input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.password }}" id="matrix-password"> <input type="password" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.password }}" id="matrix-password">
<label> <label>
<input type="submit" class="unfocused"> <input type="submit" class="unfocused">
<span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span> <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>

24
scripts/dark-variant.sh
View File

@ -1,5 +1,7 @@
#!/bin/bash #!/bin/bash
# scan all typescript and automatically add dark variants to color tags if they're not already present.
if [[ "$1" == "ts" ]]; then if [[ "$1" == "ts" ]]; then
for f in $2/*.ts; do for f in $2/*.ts; do
# FIXME: inline html # FIXME: inline html
@ -11,18 +13,40 @@ if [[ "$1" == "ts" ]]; then
echo $line | sed 's/.*classList//; s/).*//' | grep "~neutral\|~positive\|~urge\|~warning\|~info\|~critical" &> /dev/null echo $line | sed 's/.*classList//; s/).*//' | grep "~neutral\|~positive\|~urge\|~warning\|~info\|~critical" &> /dev/null
if [ $? -eq 0 ]; then if [ $? -eq 0 ]; then
# echo "found classList @ " $l # echo "found classList @ " $l
echo $line | grep "dark:" &>/dev/null
if [ $? -ne 0 ]; then
for color in neutral positive urge warning info critical; do for color in neutral positive urge warning info critical; do
sed -i "${l},${l}s/\"~${color}\"/\"~${color}\", \"dark:~d_${color}\"/g" $f sed -i "${l},${l}s/\"~${color}\"/\"~${color}\", \"dark:~d_${color}\"/g" $f
done done
fi
else else
echo "FIX: classList found, but color tag wasn't in it" echo "FIX: classList found, but color tag wasn't in it"
fi fi
else else
echo $line | grep "querySelector" &> /dev/null
if [ $? -ne 0 ]; then
# echo "found inline in " $f " @ " $l ", " $(sed -n "${l}p" $f)
echo $line | grep "dark:" &>/dev/null
if [ $? -ne 0 ]; then
for color in neutral positive urge warning info critical; do
sed -i "${l},${l}s/~${color}/~${color} dark:~d_${color}/g" $f
done
fi
else
echo $line | sed 's/.*querySelector//; s/).*//' | grep "~neutral\|~positive\|~urge\|~warning\|~info\|~critical" &> /dev/null
if [ $? -ne 0 ]; then
echo $line | grep "dark:" &>/dev/null
if [ $? -ne 0 ]; then
# echo "found inline in " $f " @ " $l ", " $(sed -n "${l}p" $f) # echo "found inline in " $f " @ " $l ", " $(sed -n "${l}p" $f)
for color in neutral positive urge warning info critical; do for color in neutral positive urge warning info critical; do
sed -i "${l},${l}s/~${color}/~${color} dark:~d_${color}/g" $f sed -i "${l},${l}s/~${color}/~${color} dark:~d_${color}/g" $f
done done
fi fi
#else
#echo "FIX: querySelector found, but color tag wasn't in it: " $line
fi
fi
fi
done done
done done
fi fi

14
scripts/missing-colors.js
View File

@ -2,6 +2,16 @@ let parser = require("jsdom");
let fs = require("fs"); let fs = require("fs");
let path = require("path"); let path = require("path");
const hasDark = (item) => {
for (let i = 0; i < item.classList.length; i++) {
if (item.classList[i].substring(0,5) == "dark:") {
return true;
}
}
return false;
};
const fixHTML = (infile, outfile) => { const fixHTML = (infile, outfile) => {
console.log(infile, outfile) console.log(infile, outfile)
let doc = new parser.JSDOM(fs.readFileSync(infile)); let doc = new parser.JSDOM(fs.readFileSync(infile));
@ -14,14 +24,18 @@ const fixHTML = (infile, outfile) => {
if (items[i].classList.contains("~"+color)) { if (items[i].classList.contains("~"+color)) {
hasColor = true; hasColor = true;
// console.log("adding to", items[i].classList) // console.log("adding to", items[i].classList)
if (!hasDark(items[i])) {
items[i].classList.add("dark:~d_"+color); items[i].classList.add("dark:~d_"+color);
}
break; break;
} }
} }
if (!hasColor) { if (!hasColor) {
items[i].classList.add("~neutral"); items[i].classList.add("~neutral");
if (!hasDark(items[i])) {
items[i].classList.add("dark:~d_neutral"); items[i].classList.add("dark:~d_neutral");
} }
}
if (!items[i].classList.contains("@low") && !items[i].classList.contains("@high")) { if (!items[i].classList.contains("@low") && !items[i].classList.contains("@high")) {
items[i].classList.add("@low"); items[i].classList.add("@low");
} }