Netsyms/IPENtool
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Make settings modal really big, adjust colors, add button size option

Browse Source
This commit is contained in:
Skylar Ittner 2021-07-15 17:23:31 -06:00
parent ca9afce43c
commit cdc81d89a3
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css/main.css
View File

@ -94,11 +94,20 @@ html, body {
max-width: 700px; max-width: 700px;
} }
} }
@media (min-width: 1600px) {
.modal-dialog.modal-xxl {
max-width: 90vw;
}
}
select option { select option {
color: var(--bs-dark); color: var(--bs-dark);
} }
.alert {
color: var(--bs-dark);
}
.theme-purple { .theme-purple {
background-image: linear-gradient(90deg,#33b7e2,#5e62b0,#dc307c); background-image: linear-gradient(90deg,#33b7e2,#5e62b0,#dc307c);
} }

5
src/index.html
View File

@ -14,7 +14,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<link rel="icon" href="img/icon.svg" /> <link rel="icon" href="img/icon.svg" />
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true"> <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl"> <div class="modal-dialog modal-xl modal-xxl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5> <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
@ -68,7 +68,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings"> <div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings">
<h4><i class="fas fa-cog"></i> App Options</h4> <h4><i class="fas fa-cog"></i> App Options</h4>
Button size: <select class="form-control" id="button_size"> Button size: <select class="form-control" id="button_size">
<option value="lg" selected>Large</option> <option value="lg">Large</option>
<option value="" selected>Medium</option>
<option value="sm">Small</option> <option value="sm">Small</option>
</select> </select>
Color theme: <select class="form-control" id="color_theme"> Color theme: <select class="form-control" id="color_theme">

8
src/js/main.js
View File

@ -63,6 +63,8 @@ function saveSettingsModal() {
setStorage("color_theme", $("#appOptionsSettings #color_theme option:selected").val()); setStorage("color_theme", $("#appOptionsSettings #color_theme option:selected").val());
setAppTheme(getStorage("color_theme")); setAppTheme(getStorage("color_theme"));
setStorage("button_size", $("#appOptionsSettings #button_size option:selected").val());
setButtonSize(getStorage("button_size"));
} }
function initSignaturePad() { function initSignaturePad() {
@ -142,10 +144,16 @@ $("body").on("input change paste", "#notaryProfileSettings input,#notaryProfileS
$("body").on("input change paste", "#appOptionsSettings select", function () { $("body").on("input change paste", "#appOptionsSettings select", function () {
setAppTheme($("#appOptionsSettings #color_theme option:selected").val()); setAppTheme($("#appOptionsSettings #color_theme option:selected").val());
setButtonSize($("#appOptionsSettings #button_size option:selected").val());
}); });
function setAppTheme(theme) { function setAppTheme(theme) {
$("body").removeClass().addClass("theme-" + theme); $("body").removeClass().addClass("theme-" + theme);
} }
function setButtonSize(size) {
$(".btn").removeClass(["btn-sm", "btn-lg", "btn-"]).addClass("btn-" + size);
}
setAppTheme(getStorage("color_theme")); setAppTheme(getStorage("color_theme"));
setButtonSize(getStorage("button_size"));