commit 6dfd175583ad92f34f99c18c8a12379669da7d4c
parent 2fb7f0f689d373a916d8c0add05b291f720b04cd
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sun, 5 Apr 2020 16:28:46 -0700
Improve responsive web design features.
Diffstat:
5 files changed, 92 insertions(+), 74 deletions(-)
diff --git a/Reference/index.html b/Reference/index.html
@@ -53,7 +53,9 @@
<br/>
<br/>
- <table id="referenceTable">
- </table>
+ <div id="referenceTable">
+ <table id="referenceTableInner">
+ </table>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/Reference/index.js b/Reference/index.js
@@ -155,7 +155,7 @@ function referenceSetChanged() {
}
// Add html
- document.getElementById("referenceTable").innerHTML = head + body;
+ document.getElementById("referenceTableInner").innerHTML = head + body;
}
@@ -165,7 +165,7 @@ function referenceFilterChanged() {
// Declare variables
var match, txtValue
var filter = document.getElementById("referenceFilter").value.toLowerCase();
- var rows = document.getElementById("referenceTable").getElementsByTagName("tr");
+ var rows = document.getElementById("referenceTableInner").getElementsByTagName("tr");
// Loop through rows
for (row of rows)
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -185,7 +185,7 @@ function AddSet() {
clone.getElementById("settingsSetRemove").setAttribute("onclick", `var element = document.getElementById('settingsSet-${setId}'); element.parentNode.removeChild(element);`);
// Add row
- document.getElementById("settingsSets").appendChild(clone);
+ document.getElementById("settingsSetsInner").appendChild(clone);
// Increment setId
setId++; // increment fileId to get a unique ID for the new element
diff --git a/Styles.css b/Styles.css
@@ -26,13 +26,11 @@ button, input, select {
border-radius: 0px;
}
-
button:hover:enabled {
cursor: pointer;
background-color: var(--hover-color);
}
-
button:disabled {
background-color: var(--hover-color);
color: var(--border-color);
@@ -40,84 +38,97 @@ button:disabled {
+/******** Other styles ********/
+#title {
+ font-size: 25px;
+ font-weight: bold;
+ cursor: pointer;
+ color: inherit;
+ text-decoration: none;
+}
+
+.label {
+ font-weight: bold;
+}
+
+.text {
+ font-weight: normal;
+}
+
+.error {
+ color: red;
+}
+
+.footer {
+ position: fixed;
+ left: 0;
+ bottom: 5px;
+ width: 100%;
+}
+
+
+
/******** Settings styles ********/
-#settingsSets, #settingsOther, #referenceTable {
+#settings {
margin: auto;
text-align: left;
- width: 315px;
+ max-width: 300px;
+ width: available;
}
+.centered {
+ text-align: center;
+}
+
+#settingsSets {
+ overflow-x: auto;
+ white-space: nowrap;
+}
.settingsSet {
- margin-top: 2px;
- margin-bottom: 2px;
+ padding-top: 5px;
}
+.settingsSetName {
+ width: 115px;
+}
.settingsSetFilter {
width: 160px;
}
-
.settingsSetRemove {
cursor: pointer;
}
-
#settingsStart {
width: 75px;
}
-/******** Quizzer styles ********/
-#quizzerPrompt.audio {
- cursor: pointer;
+/******** Reference styles ********/
+#referenceTable {
+ margin: auto;
+ text-align: left;
+ overflow-x: auto;
+ max-width: fit-content;
}
-/******** Other styles ********/
-#title {
- font-size: 25px;
- font-weight: bold;
+/******** Quizzer styles ********/
+#quizzerPrompt.audio {
cursor: pointer;
- color: inherit;
- text-decoration: none;
-}
-
-
-.label {
- font-weight: bold;
-}
-
-
-.text {
- font-weight: normal;
-}
-
-
-.error {
- color: red;
}
-.footer {
- position: fixed;
- left: 0;
- bottom: 5px;
- width: 100%;
-}
-
-
-
/******** Dark mode styles ********/
body.dark {
--background-color: #000000;
--foreground-color: #E0E0E0;
}
-
.dark button, .dark input, .dark select {
--background-color: #303030;
--foreground-color: #FFFFFF;
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
<div id="settings">
<template id="settingsSetTemplate">
<div class="settingsSet">
- <select id="settingsSetName" onchange="settingsSetChanged(this)">
+ <select id="settingsSetName" class="settingsSetName" onchange="settingsSetChanged(this)">
<optgroup label="Common Words">
<option>Verbs</option>
<option>Adjectives</option>
@@ -62,41 +62,46 @@
</template>
<br/>
- <label class="text">Choose your settings and then click start.</label>
- <br/>
+ <div class="centered">
+ <label class="text">Choose your settings and then click start.</label>
+ </div>
<br/>
+ <label class="label">Vocabulary Sets </label>
+ <button id="settingsAddSet" onclick="AddSet();">Add set</button>
+
<div id="settingsSets">
- <label class="label">Vocabulary Sets </label>
- <button id="settingsAddSet" onclick="AddSet();">Add set</button>
+ <div id="settingsSetsInner">
+ </div>
</div>
<br/>
- <div id="settingsOther">
- <label class="label">Quizzer Settings</label>
- <br/>
- <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark');">
- <label class="text" for="settingsDarkMode">Dark Mode</label>
- <br/>
- <label class="text" for="settingsPromptType">Prompt type</label>
- <select id="settingsPromptType">
- <option>Text</option>
- <option>Audio</option>
- <option>Both</option>
- </select>
- <br/>
- <label class="text" for="settingsRepeatPrompts">Repeat missed prompts</label>
- <select id="settingsRepeatPrompts">
- <option>Never</option>
- <option>Immediately</option>
- <option>5 prompts later</option>
- </select>
- </div>
+ <label class="label">Quizzer Settings</label>
+ <br/>
+ <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark');">
+ <label class="text" for="settingsDarkMode">Dark Mode</label>
+ <br/>
+ <label class="text" for="settingsPromptType">Prompt type</label>
+ <select id="settingsPromptType">
+ <option>Text</option>
+ <option>Audio</option>
+ <option>Both</option>
+ </select>
+ <br/>
+ <label class="text" for="settingsRepeatPrompts">Repeat missed prompts</label>
+ <select id="settingsRepeatPrompts">
+ <option>Never</option>
+ <option>Immediately</option>
+ <option>5 prompts later</option>
+ </select>
<br/>
- <button id="settingsStart" onclick="Start()">Start</button>
<br/>
- <label id="settingsError" class="error"></label>
+ <div class="centered">
+ <button id="settingsStart" onclick="Start()">Start</button>
+ <br/>
+ <label id="settingsError" class="error"></label>
+ </div>
</div>
<div id="quizzer" hidden="true">
