Spaces:

aletrn
/

ai-pronunciation-trainer

Running

App Files Files Community

alessandro trinca tornidor commited on Mar 7

Commit

2082b80

1 Parent(s): d89ea65

style: fix css on mobile devices for webApp interface

Browse files

Files changed (2) hide show

static/css/style-new.css +104 -14
templates/main.html +9 -13

static/css/style-new.css CHANGED Viewed

@@ -75,6 +75,12 @@ a.disabled {
 	white-space: normal;
 }
 /* ############## Next button ##### */
 .button-next {
 	border-radius: 4px;
@@ -129,6 +135,9 @@ a.disabled {
 /* ############# Texts ##############  */
 .main-text {
 	font-size: 2.5em;
@@ -158,6 +167,14 @@ a.disabled {
 	left: 0%;
 }
 .main-text-div {
 	overflow-y: auto;
 	position: absolute;
@@ -198,6 +215,20 @@ a.disabled {
 /* ############# Icon Button ##############  */
 .round-button {
 	box-sizing: border-box;
 	display: block;
@@ -484,25 +515,27 @@ a.disabled {
 /* ######## Switch ############## */
 @media only screen and (max-width: 1200px) {
 	.round-button {
-		box-sizing: border-box;
-		display: block;
 		width: 2em;
 		/* 80px */
 		height: 2em;
-		left: -2.5%;
 		padding-top: 0.3em;
-		padding-left: 0px;
-		line-height: 0px;
-		border: 6px solid #fff;
-		border-radius: 50%;
-		color: #f5f5f5;
-		text-align: center;
-		text-decoration: none;
-		background-color: #467387;
-		font-size: 1em;
-		font-weight: bold;
-		transition: all 0.3s ease;
 	}
 	.container {
@@ -580,6 +613,10 @@ a.disabled {
 		font-size: 2.5em !important;
 	}
 	.accuracy-text {
 		font-family: "Dank Mono", ui-monospace, monospace;
 		background: linear-gradient(to right,
@@ -593,4 +630,57 @@ a.disabled {
 		font-size: 0.8em;
 	}
 }

 	white-space: normal;
 }
+#radio-difficulty {
+	position: fixed;
+	top: 95%;
+	left: 2%;
+}
 /* ############## Next button ##### */
 .button-next {
 	border-radius: 4px;
 /* ############# Texts ##############  */
+#use-it-in-landscape {
+	display: none;
+}
 .main-text {
 	font-size: 2.5em;
 	left: 0%;
 }
+#pronunciation_accuracy {
+	color: black;
+	position: absolute;
+	top: 27%;
+	font-size: 2em;
+	left: -1%;
+}
 .main-text-div {
 	overflow-y: auto;
 	position: absolute;
 /* ############# Icon Button ##############  */
+.playButton {
+	color:white;
+	text-align:center;
+	position: absolute;
+}
+#playRecordedAudio {
+	top: 2%;
+}
+#playRecordedAudio {
+	top: 15%;
+}
+/* color:white; text-align:center; position: absolute; top: 15%;  */
 .round-button {
 	box-sizing: border-box;
 	display: block;
 /* ######## Switch ############## */
 @media only screen and (max-width: 1200px) {
+	.main-container {
+		font-size: 0.75em;
+	}
+	.container-dtw-div {
+		font-size: 0.75em;
+	}
 	.round-button {
 		width: 2em;
 		/* 80px */
 		height: 2em;
+		left: 1%;
 		padding-top: 0.3em;
+		padding-left: 0;
+		line-height: 0;
+		font-size: 1.2em;
+	}
+	.playButton {
+		font-size: 2em;
 	}
 	.container {
 		font-size: 2.5em !important;
 	}
+	#pronunciation_accuracy {
+		left: -1%;
+	}
 	.accuracy-text {
 		font-family: "Dank Mono", ui-monospace, monospace;
 		background: linear-gradient(to right,
 		font-size: 0.8em;
 	}
+}
+@media only screen and (max-width: 950px) and (max-aspect-ratio: 0.7) and (orientation: portrait) {
+	#use-it-in-landscape {
+		display: block;
+		background-color: #467387;
+		color: white;
+		font-size: 2em;
+	}
+}
+/* DON'T show the warning message on big devices in portrait mode */
+@media only screen and (min-height: 930px) and (max-aspect-ratio: 0.7) and (orientation: portrait) {
+	#use-it-in-landscape {
+		display: none;
+	}
+}
+@media only screen and (min-width: 930px) and (max-aspect-ratio: 0.7) and (orientation: portrait) {
+	#use-it-in-landscape {
+		display: none;
+	}
+}
+@media only screen and (max-width: 950px) {
+	.container-dtw-div {
+		top: 80%;
+	}
+	.playButton {
+		font-size: 1.5em;
+	}
+	#pronunciation_accuracy {
+		margin-top: 4px;
+		font-size: 1.3em;
+		left: 0;
+	}
+	.main-text-div {
+		left: 14%;
+	}
+	#container-uploader-player-audio {
+		left: 27%;
+	}
+	#radio-difficulty {
+		top: 90%;
+	}
+	.credits-icon-div {
+		top: 88%;
+	}
 }

templates/main.html CHANGED Viewed

@@ -33,7 +33,7 @@
 <body style="height: 100%; width: 100%; background-color: white; max-width: 90%;">
-    <div>
         <div style="display:flex; flex-direction: row;">
@@ -42,8 +42,7 @@
                 <i class="material-icons icon-text-home" style="text-align: right;" onclick="history.go(0)">home</i>
             </div>
-            <h1 id='main_title'> AI Pronunciation Trainer
-            </h1>
         </div>
@@ -82,16 +81,13 @@
             <div class="horizontal-flexbox" style="position: absolute; top: 2%; ">
-                <a id="playSampleAudio" aria-label="playSampleAudio" href="javascript:playAudio()" class="round-button disabled" style="color:white; text-align:center;
-                        position: absolute; top: 2%; "><i class="material-icons icon-text">play_arrow</i>
                     </a>
-                <a id="playRecordedAudio" aria-label="playRecordedAudio" href="javascript:playRecording()" class="round-button disabled"
-                        style="color:white; text-align:center; position: absolute; top: 15%; "><i
                             class="material-icons icon-text">record_voice_over</i>
                     </a>
-                <p id="pronunciation_accuracy" aria-label="pronunciation_accuracy" class="expanded accuracy-text"
-                   style="color: black; position: absolute;  top: 27%; margin-left: 0; font-size: 2em"><span>%</span>
                     </p>
                 <div id="text-button-div" class="text-button-div">
@@ -110,6 +106,7 @@
             <div id="text-area" class="main-text-div">
                 <p id="original_script" aria-label="original_script" class=" bigger-text text-primary main-text" contenteditable="plaintext-only">Click on the bar on the right to generate a new sentence (please use chrome web browser).</p>
                 <p id="ipa_script" aria-label="ipa_script" class="text-muted bigger-text ipa-text"> Before speaking, click on the mic button
                         below to start recording and then click again when you're done.
@@ -148,7 +145,7 @@
         </div>
-        <div class="display-inline-block form-audio-file text-align-center">
             <input
                 aria-label="input-uploader-audio-hidden"
                 id="input-uploader-audio-hidden"
@@ -175,7 +172,7 @@
         </div>
-        <div id="radio-difficulty" class="radio" style="position: fixed; top: 95%; left: 2%;">
         <input label="Random" type="radio" aria-label="Random" id="lengthCat1" name='length' onclick="getNextSample()">
         <input label="Easy" type="radio" aria-label="Easy" id="lengthCat2" name='length' checked onclick="getNextSample()">
         <input label="Medium" type="radio" aria-label="Medium" id="lengthCat3" name='length' onclick="getNextSample()">
@@ -185,8 +182,7 @@
     </div>
-    <p class="credits-icon-div">By Thiago
-        Lobato.</p>
     <div class="link-icon-div">
         <a href="https://github.com/Thiagohgl/ai-pronunciation-trainer" target=”_blank”

 <body style="height: 100%; width: 100%; background-color: white; max-width: 90%;">
+    <div class="main-container" id="main-container">
         <div style="display:flex; flex-direction: row;">
                 <i class="material-icons icon-text-home" style="text-align: right;" onclick="history.go(0)">home</i>
             </div>
+            <h1 id='main_title'> AI Pronunciation Trainer</h1>
         </div>
             <div class="horizontal-flexbox" style="position: absolute; top: 2%; ">
+                <a id="playSampleAudio" aria-label="playSampleAudio" href="javascript:playAudio()" class="round-button disabled playButton"><i class="material-icons icon-text">play_arrow</i>
                     </a>
+                <a id="playRecordedAudio" aria-label="playRecordedAudio" href="javascript:playRecording()" class="round-button disabled playButton"><i
                             class="material-icons icon-text">record_voice_over</i>
                     </a>
+                <p id="pronunciation_accuracy" aria-label="pronunciation_accuracy" class="expanded accuracy-text"><span>%</span>
                     </p>
                 <div id="text-button-div" class="text-button-div">
             <div id="text-area" class="main-text-div">
+                <p id="use-it-in-landscape">On mobile devices use this app in landscape mode!</p>
                 <p id="original_script" aria-label="original_script" class=" bigger-text text-primary main-text" contenteditable="plaintext-only">Click on the bar on the right to generate a new sentence (please use chrome web browser).</p>
                 <p id="ipa_script" aria-label="ipa_script" class="text-muted bigger-text ipa-text"> Before speaking, click on the mic button
                         below to start recording and then click again when you're done.
         </div>
+        <div class="display-inline-block form-audio-file text-align-center" id="container-uploader-player-audio">
             <input
                 aria-label="input-uploader-audio-hidden"
                 id="input-uploader-audio-hidden"
         </div>
+        <div id="radio-difficulty" class="radio radio-difficulty">
         <input label="Random" type="radio" aria-label="Random" id="lengthCat1" name='length' onclick="getNextSample()">
         <input label="Easy" type="radio" aria-label="Easy" id="lengthCat2" name='length' checked onclick="getNextSample()">
         <input label="Medium" type="radio" aria-label="Medium" id="lengthCat3" name='length' onclick="getNextSample()">
     </div>
+    <p class="credits-icon-div">By Thiago Lobato <br/>with contributions by <a href="https://trinca.tornidor.com">Alessandro Trinca Tornidor</a>.</p>
     <div class="link-icon-div">
         <a href="https://github.com/Thiagohgl/ai-pronunciation-trainer" target=”_blank”