Merge pull request #61 from ryanrosenberg/css-enhancements

some quick changes to improve readability
qbreader · Aug 25, 2022 · dc1319c · dc1319c
2 parents 9b74054 + 1b10fde
commit dc1319c
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 14 deletions.
diff --git a/client/bootstrap/bootstrap.css b/client/bootstrap/bootstrap.css
diff --git a/client/bootstrap/bootstrap.css.map b/client/bootstrap/bootstrap.css.map
diff --git a/client/multiplayer/room.html b/client/multiplayer/room.html
@@ -225,6 +225,10 @@ <h5 class="text-center">Subcategories</h5>
                     <button type="button" class="btn btn-warning" id="clear-stats">Clear Stats</button>
                     <button type="button" class="btn btn-danger"  id="category-select-button" data-bs-toggle="modal" data-bs-target="#category-modal">Categories</button>
                 </div>
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-high-contrast-question-text">
+                    <label class="form-check-label" for="toggle-high-contrast-question-text">High contrast text</label>
+                </div>
                 <div class="form-check form-switch">
                     <input class="form-check-input" type="checkbox" role="switch" value="" id="toggle-visibility" checked>
                     <label class="form-check-label" for="toggle-visibility">Public room</label>
@@ -240,7 +244,7 @@ <h5 class="text-center">Subcategories</h5>
                 </div>
             </div>
             <div class="col-12 col-lg-9 col-xxl-10">
-                <div class="position-sticky top-0 pt-2 bg-body">
+                <div class="buttons position-sticky top-0 pt-2 bg-body">
                     <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Shortcut: s or n key" class="mb-2 btn btn-primary" id="next">Next</button>
                     <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Shortcut: p key"      class="mb-2 btn btn-primary" id="pause" disabled>Pause</button>
                     <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Shortcut: enter key"  class="mb-2 btn btn-info"    id="chat">Chat</button>
@@ -266,7 +270,7 @@ <h5 class="text-center">Subcategories</h5>
                 <br>
                 <div class="mt-2" id="question"></div>
                 <p class="my-1 my-lg-3" id="answer"></p>
-                <ul class="list-unstyled" id="room-history"></ul>
+                <ul class="room-history list-unstyled" id="room-history"></ul>
             </div>
         </div>
     </div>

diff --git a/client/script.js b/client/script.js
@@ -256,13 +256,6 @@ function updateSubcategory(subcategory, validSubcategories) {
     return validSubcategories;
 }
 
-
-document.getElementById('toggle-options').addEventListener('click', function () {
-    this.blur();
-    document.getElementById('options').classList.toggle('d-none');
-});
-
-
 document.getElementById('set-name').addEventListener('change', async function (event) {
     maxPacketNumber = await getNumPackets(this.value);
     if (maxPacketNumber > 0) {
@@ -272,6 +265,26 @@ document.getElementById('set-name').addEventListener('change', async function (e
     }
 });
 
+document.getElementById('toggle-high-contrast-question-text').addEventListener('click', function () {
+    this.blur();
+    if (this.checked) {
+        document.getElementById('question').classList.add('high-contrast-question-text');
+        localStorage.setItem('high-contrast-question-text', 'true');
+    } else {
+        document.getElementById('question').classList.remove('high-contrast-question-text');
+        localStorage.removeItem('high-contrast-question-text');
+    }
+});
+
+document.getElementById('toggle-options').addEventListener('click', function () {
+    this.blur();
+    document.getElementById('options').classList.toggle('d-none');
+});
+
+if (localStorage.getItem('high-contrast-question-text') === 'true') {
+    document.getElementById('toggle-high-contrast-question-text').checked = true;
+    document.getElementById('question').classList.add('high-contrast-question-text');
+}
 
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

diff --git a/client/singleplayer/bonuses.html b/client/singleplayer/bonuses.html
@@ -166,10 +166,14 @@ <h5 class="text-center">Subcategories</h5>
                 <datalist id="set-list"></datalist>
                 <input type="text" class="form-control my-1" id="packet-number" placeholder="Packet #s">
                 <input type="text" class="form-control" id="question-number" placeholder="Starting question #">
-                <div class="text-center mt-3">
+                <div class="text-center mt-3 mb-2">
                     <button type="button" class="btn btn-danger" id="category-select-button" data-bs-toggle="modal" data-bs-target="#category-modal">Categories</button>
                     <button type="button" class="btn btn-warning" id="clear-stats">Clear Stats</button>
                 </div>
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-high-contrast-question-text">
+                    <label class="form-check-label" for="toggle-high-contrast-question-text">High contrast text</label>
+                </div>
                 <div class="d-none d-lg-block">
                     <hr>
                     <p>

diff --git a/client/singleplayer/tossups.html b/client/singleplayer/tossups.html
@@ -169,10 +169,14 @@ <h5 class="text-center">Subcategories</h5>
                 <div class="my-2"></div>
                 <label for="reading-speed">Reading speed: <span id="reading-speed-display">50</span><br></label>
                 <input class="form-range" id="reading-speed" type="range" min="0" max="100" step="5">
-                <div class="text-center">
+                <div class="text-center mb-2">
                     <button type="button" class="btn btn-danger"  id="category-select-button" data-bs-toggle="modal" data-bs-target="#category-modal">Categories</button>
                     <button type="button" class="btn btn-warning" id="clear-stats">Clear Stats</button>
                 </div>
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-high-contrast-question-text">
+                    <label class="form-check-label" for="toggle-high-contrast-question-text">High contrast text</label>
+                </div>
             </div>
             <div class="col-12 col-lg-9 col-xxl-10">
                 <div class="buttons position-sticky top-0 pt-2 bg-body">
@@ -191,7 +195,7 @@ <h5 class="text-center">Subcategories</h5>
                 <a class="mt-1 mt-lg-3 p-0 btn btn-link float-end d-none" id="toggle-correct">I was wrong</a>
                 <div class="mt-1 mt-lg-3" id="answer"></div>
                 <br>
-                <ul class="list-unstyled" id="room-history"></ul>
+                <ul class="room-history list-unstyled" id="room-history"></ul>
             </div>
         </div>
     </div>

diff --git a/scss/custom.scss b/scss/custom.scss
@@ -60,4 +60,19 @@ $enable-negative-margins: true;
 @import "../node_modules/bootstrap/scss/utilities";
 @import "../node_modules/bootstrap/scss/utilities/api";
 
-// 6. Add additional custom code here
+// 6. Add additional custom code here
+.high-contrast-question-text {
+    border: 1px solid slategray;
+    padding: 1em;
+    font-family: "Times New Roman", serif;
+    font-size: 20px;
+}
+
+.buttons {
+    border-bottom: .5px solid lightgray;
+    margin-bottom: .5em;
+}
+
+.room-history {
+    border-top: .5px solid lightgray;
+}