made responsive. next thing is to fix mobile getVoices() bug

DanielOnGitHub17 · Apr 28, 2024 · 3b09713 · 3b09713
1 parent 65f5f40
commit 3b09713
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 15 deletions.
diff --git a/classes.js b/classes.js
@@ -97,7 +97,7 @@ class Switch{
         // this.switch.tabIndex = -1;
     }
     event(){
-        this.switch.onclick = (event)=>{
+        this.holder.onclick = (event)=>{
             event.preventDefault();
             this.holder.classList.contains("off")
             ?this.holder.classList.remove("off")
@@ -146,6 +146,7 @@ class SearchUI{
         add((this.searchBox = make("input"))
         , add((this.box = make())
         , this.container)).type = "text";
+        this.searchBox.placeholder = "Tap to select a voice"
         this.box.className = "searchui";
         add((this.list = make("ul")), this.box).hidden = true;
         this.list.size = 20

diff --git a/index.html b/index.html
@@ -70,10 +70,7 @@ <h2>AI interview</h2>
         </div>
 
         <div id="TEXTINTERVIEW">
-            <p id="QUESTIONBOX">
-                If you had two people, one of them who knows your name.
-                How will you tell your name to the other person?
-            </p>
+            <p id="QUESTIONBOX"></p>
             <textarea id="ANSWERBOX" required rows="3" cols="40" placeholder="respond here"></textarea>
             <!-- space for controls class -->
         </div>

diff --git a/interview.js b/interview.js
@@ -28,7 +28,7 @@ class Interview{
         this.questionBox = this.useVideo?CC:QUESTIONBOX;
         SAY.remove();
         if (this.useVideo){
-            this.layoutButton.switch.click();  // switch layout
+            // this.layoutButton.switch.click();  // switch layout
             return;
         }
         // end video specific
@@ -195,6 +195,9 @@ class Interview{
     }
     next(){
         let ended =this.index >= this.questions.length - 1
+        if (!this.useVideo && ANSWERBOX.value.trim() == ""){
+            return alert("Enter a response to proceed!");
+        }
         if (ended){
             confirm("Do you want to complete your interview?").then(bool=>{
                 if (!bool) return;
@@ -214,8 +217,6 @@ class Interview{
         }
         if (this.useVideo){
             // maybe check if speechrecog text is plenty enough
-        } else if (ANSWERBOX.value.trim() == ""){
-            return alert("Enter a response to proceed!");
         } else{
             this.blur();
         }

diff --git a/webint.css b/webint.css
@@ -249,6 +249,7 @@ select:active, select:focus{
     /* display: none; */
     flex-flow: row;
     width: 18em;
+    max-width: 80vw;
     position: fixed;
     /* top: 0; */
     left: calc(50% - 9em);
@@ -363,6 +364,7 @@ body>div{
     border-width: 3px;
     align-items: center;
     padding: 2px;
+    cursor: pointer;
 }
 .switchold.off{
     justify-content: start;
@@ -373,7 +375,6 @@ body>div{
     width: 1em;
     height: 1em;
     border-radius: 1em;
-    cursor: pointer;
 }
 .switch:hover{
     filter: drop-shadow(2px 4px 6px black);
@@ -390,12 +391,17 @@ body>div{
 }
 #VIDEOSETTINGS>ul{
     list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+#VIDEOSETTINGS>ul>li{
+    margin-bottom: 20px;
 }
 #VOICETHINGS{
     display: flex;
-    gap: 20px;
-    flex-flow: row;
-    align-items: center;
+    gap: 5px;
+    flex-flow: column-reverse;
+    align-items: start;
 }
 .searchui{
     display: flex;
@@ -427,11 +433,14 @@ body>div{
 /* end SETUP SCREEN */
 
 /* VIDEOINTERVIEW SCREEN */
-#VIDEO{
+video{
     border-radius: 0.5em;
     border: var(--b);
     border-width: 10px;
     width: 20em;
+    max-width: 90vw;
+}
+#VIDEO{
     transform: scaleX(-1);
 }
 #CC{
@@ -459,9 +468,11 @@ body>div{
 #TEXTINTERVIEW{
     font-size: 0.9em;
     align-items: center;
+    max-width: 100%;
 }
 #QUESTIONBOX{
     width: 20em;
+    max-width: 80vw;
     overflow-y: scroll;
     border-radius: 0.8em;
     padding: 20px;
@@ -475,7 +486,8 @@ body>div{
     font-size: 0.9em;
     resize: none;
     margin-top: 5px;
-    padding: 0 10px
+    padding: 0 10px;
+    max-width: 90vw;
 }
 
 /* end TEXTINTERVIEW SCREEN */
@@ -534,4 +546,13 @@ or save in queries that can be read (will be too long)
 or reroute by bitly
 
 
-*/
+*/
+
+@media screen and (max-width: 25em){
+    .modal{    
+        left: calc(50% - 40vw);
+    }
+    [id*="INTERVIEW"].side{
+        display: flex;
+    }
+}