Removed break statements and added visual padding in the dialog

ucfopen · Dec 15, 2023 · d28bfc9 · d28bfc9
1 parent 3c98421
commit d28bfc9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
diff --git a/src/creator.html b/src/creator.html
@@ -171,22 +171,26 @@ <h3>Phrase</h3>
 			<button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage+1">Next</button>
 		</div>
 		<div ng-show= "questionBankDialog" class="overlay"></div>
-		<div class="questionBank-wrapper" ng-show= "questionBankDialog">
-				<div class="questionBank-content">
-					<strong>Enable question bank? </strong>
-					<br/>
-					<span>
-						<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
-						<input type="radio" ng-model="enableQuestionBank" ng-value=true> Yes</input>
-					</span>
-					<br/><br/>
-					<span ng-show="enableQuestionBank" >
-						<strong>How many questions to ask?</strong>
-						<br/>
-						<input class="numInput" type="number" ng-model="questionBankVal" ng-attr-min="{{items.length < 1 ? items.length : 1}}" ng-attr-max="{{items.length}}" step="1">
-						<span> out of {{items.length}} </span>
-					</span>
-					<br/>
+		<div class="questionBankDialog-wrapper" ng-show= "questionBankDialog">
+				<div class="questionBankDialog">
+					<div class="enable-qb-question">
+						<strong>Enable question bank? </strong>
+						<div>
+							<span>
+								<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
+								<input type="radio" ng-model="enableQuestionBank" ng-value=true> Yes</input>
+							</span>
+						</div>
+					</div>
+					<div>
+						<span ng-show="enableQuestionBank" >
+							<strong>How many questions to ask? </strong>
+							<div>
+								<input class="numInput" type="number" ng-model="questionBankVal" ng-attr-min="{{items.length < 1 ? items.length : 1}}" ng-attr-max="{{items.length}}" step="1">
+								<span> out of {{items.length}} </span>
+							</div>
+						</span>
+					</div>
 				</div>
 				<button class="dialogCloseButton" ng-click="(questionBankVal <= items.length && questionBankVal > 0) && (questionBankDialog = !questionBankDialog)">Okay</button>
 		</div>

diff --git a/src/creator.scss b/src/creator.scss
@@ -780,7 +780,7 @@ button.add-question {
 	}
 }
 
-.questionBank-wrapper {
+.questionBankDialog-wrapper {
 	position: fixed;
   	top: 50%;
   	left: 50%;
@@ -790,17 +790,25 @@ button.add-question {
 	background-color: white;
 	color: black;
 	height: 300px;
-	width: 300px;
+	width: 250px;
 	z-index: 10000;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 
-	.questionBank-content {
+	.questionBankDialog {
+		margin: 15px;
+
 		.numInput {
-			width: 35px;
+			width: 30px;
+			margin-top: 10px;
 		}
-		margin: 15px;
+
+		.enable-qb-question {
+			margin-top: 15px;
+			margin-bottom: 15px;
+		}
+
 	}
 
 	.dialogCloseButton {