Skip to content

Commit

Permalink
Mobile UX/UI fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyletimmermans
kyletimmermans committed Jan 21, 2024
1 parent 9fb2d09 commit eaf3744
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 34 deletions.
26 changes: 13 additions & 13 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ const randomComparative = (data) => {


const verb = () => {
document.querySelector(".centered-title").textContent = "Verb Conjugations";
document.querySelector("#centered-title").textContent = "Verb Conjugations";

if (fetchList.includes("verb") == false) {
fetch("./wordbank/verbs.json")
Expand All @@ -351,8 +351,8 @@ const verb = () => {
while (q[3] == "-") {
q = randomVerb(jsonVerb);
}
document.getElementById("question").innerHTML = q[2]+" ____ (<b>"+q[0]
+"</b> - \""+q[4]+"\") ("
document.getElementById("question").innerHTML = q[2]+" ____ <b>"+q[0]
+"</b> (\""+q[4]+"\") ("
+q[1]+")";
correctAnswer = q[3];
});
Expand All @@ -371,7 +371,7 @@ const verb = () => {
};

const singNoun = () => {
document.querySelector(".centered-title").innerHTML = "Singular Noun Cases";
document.querySelector("#centered-title").innerHTML = "Singular Noun Cases";

if (fetchList.includes("noun") == false) {
fetch("./wordbank/nouns.json")
Expand Down Expand Up @@ -411,7 +411,7 @@ const singNoun = () => {
};

const plurNoun = () => {
document.querySelector(".centered-title").textContent = "Plural Noun Cases";
document.querySelector("#centered-title").textContent = "Plural Noun Cases";

if (fetchList.includes("noun") == false) {
fetch("./wordbank/nouns.json")
Expand Down Expand Up @@ -450,7 +450,7 @@ const plurNoun = () => {
};

const singAdj = () => {
document.querySelector(".centered-title").textContent = "Singular Adjective Cases";
document.querySelector("#centered-title").textContent = "Singular Adjective Cases";

if (fetchList.includes("adj") == false) {
fetch("./wordbank/adjectives.json")
Expand Down Expand Up @@ -478,7 +478,7 @@ const singAdj = () => {
};

const plurAdj = () => {
document.querySelector(".centered-title").textContent = "Plural Adjective Cases";
document.querySelector("#centered-title").textContent = "Plural Adjective Cases";

if (fetchList.includes("adj") == false) {
fetch("./wordbank/adjectives.json")
Expand All @@ -505,7 +505,7 @@ const plurAdj = () => {
};

const pronoun = () => {
document.querySelector(".centered-title").textContent = "Pronoun Cases";
document.querySelector("#centered-title").textContent = "Pronoun Cases";

if (fetchList.includes("pro") == false) {
fetch("./wordbank/pronouns.json")
Expand Down Expand Up @@ -551,7 +551,7 @@ const pronoun = () => {
};

const possesive = () => {
document.querySelector(".centered-title").textContent = "Possesive Pronoun + Сам Cases";
document.querySelector("#centered-title").textContent = "Possesive Pronoun + Сам Cases";

if (fetchList.includes("poss") == false) {
fetch("./wordbank/possessives+sam.json")
Expand All @@ -576,7 +576,7 @@ const possesive = () => {
};

const demonstrative = () => {
document.querySelector(".centered-title").textContent = "Demonstrative + Весь Cases";
document.querySelector("#centered-title").textContent = "Demonstrative + Весь Cases";

if (fetchList.includes("demo") == false) {
fetch("./wordbank/demonstratives+ves.json")
Expand All @@ -601,7 +601,7 @@ const demonstrative = () => {
};

const questionword = () => {
document.querySelector(".centered-title").textContent = "Question Word Cases";
document.querySelector("#centered-title").textContent = "Question Word Cases";

if (fetchList.includes("ques") == false) {
fetch("./wordbank/questionwords.json")
Expand Down Expand Up @@ -637,7 +637,7 @@ const questionword = () => {
};

const comparative = () => {
document.querySelector(".centered-title").textContent = "Comparative Creation";
document.querySelector("#centered-title").textContent = "Comparative Creation";

if (fetchList.includes("comp") == false) {
fetch("./wordbank/comparatives.json")
Expand Down Expand Up @@ -683,7 +683,7 @@ const checkAnswer = () => {

// Find out which exercise we need to get a new question from
// By looking at the current title that we set
currExerciseType = document.querySelector(".centered-title").textContent;
currExerciseType = document.querySelector("#centered-title").textContent;

switch (currExerciseType) {
case "Verb Conjugations":
Expand Down
18 changes: 8 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,10 @@
background-color: rgb(46, 56, 66);
}

.centered-title {
position: absolute;
top: 20%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-20%);
-webkit-transform: translateX(-50%) translateY(-20%);
transform: translateX(-50%) translateY(-20%);
#centered-title {
position: relative;
color: white;
text-align: center;
z-index: -1;
}

Expand Down Expand Up @@ -130,11 +126,13 @@ <h5 class="modal-title" id="aboutModalLabel">About</h5>
</div>
</div>

<!-- Page loads w/ verbs first-->
<h1 class="centered-title">Verb Conjugations</h1>

<div class="d-flex flex-column justify-content-center align-items-center vh-100">
<br>
<div class="row">
<!-- Page loads w/ verbs first-->
<h1 class="col" id="centered-title">Verb Conjugations</h1>
</div>
<br><br>
<div class="row">
<div class="col" id="question"></div>
</div>
Expand Down
30 changes: 19 additions & 11 deletions mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,9 @@
overflow: hidden;
}

.centered-title {
position: absolute;
top: 15%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-15%);
-webkit-transform: translateX(-50%) translateY(-15%);
transform: translateX(-50%) translateY(-15%);
#centered-title {
padding-top: 7vh;
position: relative;
color: white;
z-index: -1;
font-size: 32px;
Expand Down Expand Up @@ -76,6 +72,16 @@
<script>
// Don't let mobile keyboard drag down the page after typing answer
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

document.addEventListener('focusin', function(e) {
setTimeout(() => {
const question = document.getElementById("question");
question.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}, 75);
});
</script>

<!-- Exercises Dropdown -->
Expand Down Expand Up @@ -138,10 +144,12 @@ <h5 class="modal-title" id="aboutModalLabel">About</h5>
</div>
</div>

<!-- Page loads w/ verbs first-->
<h1 class="centered-title">Verb Conjugations</h1>

<div class="d-flex flex-column justify-content-center align-items-center vh-100" style="overflow: hidden;">
<div class="d-flex flex-column justify-content-center align-items-center" style="overflow: hidden;">
<div class="row">
<!-- Page loads w/ verbs first-->
<h1 class="col" id="centered-title">Verb Conjugations</h1>
</div>
<br>
<div class="row">
<div class="col" id="question"></div>
</div>
Expand Down

0 comments on commit eaf3744

Please sign in to comment.