Tweaks to qb dialog styling

ucfopen · Apr 23, 2024 · 710d428 · 710d428
1 parent e449060
commit 710d428
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/src/creator.html b/src/creator.html
@@ -206,6 +206,8 @@ <h1>Guess the Phrase</h1>
 			<input type="button" value="Done" ng-click="hideCover()">
 		</div>
 		<div ng-class="{ show: questionBankModal }" ng-click= 'hideCover()' class="box question-bank-dialog">
+			<h1>Question Bank</h1>
+			<p>When the question bank is enabled, the widget can use a subset of phrases to create a randomized and unique experience every time the student hits play.</p>
 			<div class="enable-qb-question">
 				<label style="font-weight: bold;">Enable question bank? </label>
 				<div class="enable-qb-options" ng-click="$event.stopPropagation()">
@@ -217,14 +219,13 @@ <h1>Guess the Phrase</h1>
 			</div>
 			<div>
 				<span ng-show="enableQuestionBank" >
-					<label style="font-weight: bold;">How many questions to ask? </label>
+					<label style="font-weight: bold;">How many phrases per play? </label>
 					<div class="num-input-wrapper" ng-click="$event.stopPropagation()">
 						<input class="num-input" type="number" ng-model="questionBankValTemp" ng-change="validateQuestionBankVal()" step="1">
 						<span> out of {{items.length}} </span>
 					</div>
 				</span>
 			</div>
-			<p class="qb-warning">If question bank is enabled, questions will be randomized. </p>
 			<button class="dialog-close-button"
 			ng-click="questionBankModal = false"
 			ng-disabled="questionBankValTemp < 1 || questionBankValTemp > items.length">Confirm</button>

diff --git a/src/creator.scss b/src/creator.scss
@@ -486,23 +486,36 @@ button.add-question {
 .question-bank-dialog {
 
 	position: fixed;
+	height: 380px;
+	width: 400px;
+	padding: 1em;
 	top: 50%;
 	left: 50%;
-	margin: 0;
 	transform: translate(-50%, -50%);
-	background-color: #ffffff;
-	padding: 0;
-	height: 200px;
-	width: 300px;
+
 	display: flex;
-	justify-content: center;
+	justify-content: flex-start;
 	align-items: center;
 	flex-direction: column;
+	gap: 1em;
+	margin: 15px;
+
+	border: 0;
+
+	p {
+		font-size: 0.9em;
+		margin: 0.5em 1em;
+	}
+
+	label {
+		display: block;
+		margin-bottom: 0.5em;
+	}
 
 	input {
 		margin-top: 0;
 		padding: 0;
-		width: unset;
+		width: auto;
 		background: #ffffff;
 		font-size: 17px;
 		text-align: center;
@@ -520,7 +533,7 @@ button.add-question {
 		.num-input {
 			color: black;
 			outline: 1px solid black;
-			width: 35px;
+			width: 3em;
 			margin: 2px 5px 0 0;
 		}
 	}
@@ -541,16 +554,21 @@ button.add-question {
 	}
 
 	.dialog-close-button {
-		position: relative;
-		margin: 15 0 10 0;
+		position: absolute;
+		bottom: 2em;
+		margin-top: 10px;
+		box-shadow: none;
+		text-shadow: none;
 		font-size: 15px;
-		width: 100px;
+
+		border-radius: 0;
+		border: 0;
+
 		background-color: #70bd34;
-		color: black;
+		color: #fff;
 
 		&:hover {
 			background-color: #88df45;
-			border: 1px solid #88df45;
 			color: black;
 			cursor: pointer;
 		}
@@ -661,9 +679,8 @@ button.add-question {
 
 	h1 {
 		max-width: 400px;
-		margin-left: 8px;
-		margin-top: 3px;
-
+		margin: -0.5em 0 0 0;
+
 		white-space: nowrap;
 		overflow: hidden;
 
@@ -675,7 +692,8 @@ button.add-question {
 	}
 	div.link {
 		position: relative;
-		left: -0.5em;
+		top: -0.5em;
+		left: -1em;
 		display: inline-block;
 
 		margin: 5px;
@@ -704,19 +722,17 @@ button.add-question {
 
 		&:disabled {
 			border: none;
-			background-color: #5a5a5a;
+			background-color: #a5a5a5;
 			color: #fff;
 			cursor: not-allowed;
 		}
 
 		&.gray-out:not(:disabled) {
 			background-color: #5a5a5a;
-			border: 1px solid #5a5a5a;
 			color: #fff;
 
 			&:hover {
 				background-color: #938f8f;
-				border: 1px solid #938f8f;
 				cursor: pointer;
 			}