Merge pull request #57 from clpetersonucf/hotfix/dynamic-height-scale…

…-player-improvements Player hotfixes: height, tutorial dismissal
ucfopen · Oct 30, 2024 · 7af688e · 7af688e
2 parents e9bba94 + 5ca201c
commit 7af688e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 34 deletions.
diff --git a/src/controllers/player.coffee b/src/controllers/player.coffee
@@ -22,8 +22,6 @@ Enigma.controller 'enigmaPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope, $t
 
 	$scope.showTutorial = true
 
-	$scope.delayedHeaderInit = false
-
 	$scope.instructionsOpen = false
 	$scope.questionInstructionsOpen = false
 
@@ -63,13 +61,16 @@ Enigma.controller 'enigmaPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope, $t
 
 
 		$scope.$apply()
-		Materia.Engine.setHeight()
 
-		# delay header draw until after gameboard is rendered, forcing recalculation of visible area. This appears to be a chrome 76 bug related to changing iframe height
+		# wait for content to render, then compute player height and pass it to the enginecore to update the height of the iframe
 		$timeout ->
-			$scope.delayedHeaderInit = true
+			h = _getPlayerHeight()
+			Materia.Engine.setHeight(h)
 			document.getElementById('tutorial-modal-dismiss').focus()
 
+	_getPlayerHeight = () ->
+		height = Math.ceil(parseFloat(window.getComputedStyle(document.querySelector('html')).getPropertyValue('height')))
+
 	# randomize the order of a question's answers
 	_shuffle = (a) ->
 		for i in [1...a.length]

diff --git a/src/player.html b/src/player.html
@@ -34,11 +34,10 @@
 			</div>
 			<button id="tutorial-modal-dismiss" class="button modal-dismiss" ng-click="dismissTutorial()" aria-describedby="tutorial-content">Start</button>
 		</dialog>
-		<div id="modal-cover" ng-show="showTutorial"></div>
+		<div id="modal-cover" ng-show="showTutorial" ng-click="dismissTutorial()"></div>
 		<header aria-hidden="{{ finalTab ? 'true' : 'false' }}"
 			id="header"
-			ng-attr-inert="{{ showTutorial || currentQuestion || instructionsOpen == true || finalTab ? 'true' : undefined}}"
-			ng-show="delayedHeaderInit">
+			ng-attr-inert="{{ showTutorial || currentQuestion || instructionsOpen == true || finalTab ? 'true' : undefined}}">
 			<h1>{{ title }}</h1>
 			<div class='divider'>
 				<span id="show-keyboard-instructions-button"

diff --git a/src/player.scss b/src/player.scss
@@ -37,14 +37,18 @@ $dblue: #1a2b3f;
 }
 
 html {
-	height: 100vh;
-	overflow: auto;
+	height: auto;
+	overflow: visible;
 }
 
 body {
 	position: relative;
-	height: 100vh;
-	overflow: hidden;
+	height: auto;
+	min-height: 548px;
+	overflow: visible;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
 }
 
 html, body {
@@ -62,15 +66,20 @@ html, body {
 }
 
 .invisible-until-focused {
+	position: absolute;
+	bottom: 15px;
 	opacity: 0;
-	height: 0;
-	width: 0;
+	padding: 0.5em;
+	text-align: center;
 	pointer-events: none;
 
 	&:focus {
 		opacity: 1;
-		height: auto;
-		width: auto;
+		height: 2em;
+		width: 90%;
+		left: 3%;
+		background: #eff0f2;
+		border: 3px solid #697393;
 	}
 }
 
@@ -131,11 +140,10 @@ dialog.modal-dialog {
 }
 
 header {
-	position: fixed;
-	top: 0;
-	z-index: 1;
+	display: flex;
+	flex-direction:column;
+	justify-content: flex-start;
 	width: 100%;
-	height: 115px;
 	background: $blue;
 	color: #fff;
 	background: -moz-linear-gradient(top,  $blue 0%, $dblue 100%);
@@ -147,14 +155,12 @@ header {
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='${blue}', endColorstr='${dblue}',GradientType=0 );
 
 	h1 {
-		line-height: 50px;
-		height: 50px;
+		width: calc(100% - 14px);
 		margin: 25px 0 0;
 		padding: 0;
 		margin-left: 14px;
-		position: absolute;
-		overflow: hidden;
-		width: 77%;
+
+		line-height: 4rem;
 		font-size: 25px;
 		font-weight: normal;
 		span {
@@ -210,7 +216,6 @@ header {
 	.divider {
 		background-color: #4d5355;
 		height: 25px;
-		position: absolute;
 		top: 90px;
 		width: 100%;
 		padding-left: 10px;
@@ -228,8 +233,7 @@ header {
 }
 
 .gameboard {
-	padding: 5px;
-	margin: 120px 0 0 0;
+	padding: 5px 5px 2em 5px;
 	@include boxSizing();
 	.category {
 		clear:both;
@@ -336,12 +340,6 @@ header {
 			}
 		}
 	}
-
-	.invisible-until-focused:focus {
-		background: #eff0f2;
-		border: 3px solid #697393;
-		padding: 20px 10px;
-	}
 }
 
 #t-question-page:focus {