make evaluation report headers sticky

daisy · May 7, 2024 · bef546a · bef546a
1 parent ec83366
commit bef546a
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 19 deletions.
diff --git a/css/report.css b/css/report.css
@@ -37,10 +37,6 @@ main.js-tabs {
 	margin-top: 1rem !important;
 }
 
-ul.js-tablist {
-	top: -1.6rem !important;
-}
-
 li.js-tablist__item{
 	width: 13.5rem !important;
 	margin-left: 0 !important;
@@ -50,6 +46,27 @@ section.js-tabcontent {
 	margin-top: 0rem !important;
 }
 
+/* scrolling */
+
+header.sticky,
+div#report-header {
+	position: -webkit-sticky;
+	position: sticky;
+	z-index: 1;
+	background-color: rgb(255,255,255);
+}
+
+header.sticky {
+	top: 0;
+}
+
+div#report-header {
+	top: 4.47rem;
+	margin-top: -2rem;
+	padding-top: 0.5rem;
+}
+
+
 /* links */
 
 a {
@@ -80,6 +97,7 @@ h1 {
 	font-weight: normal;
 	color: rgb(255,255,255);
 	background-color: rgb(27,95,161);
+	line-height: 3rem;
 	margin: 0;
 	padding: 0.6rem 0 0.2rem 4.5rem !important;
 	border-bottom: 0.1rem solid rgb(0,191,255);
@@ -94,6 +112,10 @@ h2#title {
 	margin: 2rem 0 0 0;
 }
 
+div#report-header h2#title {
+	margin-top: 1rem;
+}
+
 h3 {
 	font-size: 2.3rem;
 	font-weight: normal;

diff --git a/js/reporting.js b/js/reporting.js
@@ -272,11 +272,20 @@ var smartReport = (function() {
 		var reportBody = document.createElement('body');
 
 		// add the header
-		reportBody.appendChild(createReportHeader());
+		var header = document.createElement('div');
+			header.id = 'report-header';
+			header.appendChild(createReportHeader());
 
-		// add the publication info below the header
+		// add the publication info below the title
 		var publicationInfo = createReportPublicationInfo();
-			reportBody.appendChild(publicationInfo.content);
+
+		header.appendChild(publicationInfo.content);
+
+		reportBody.appendChild(header);
+
+		// use wrapper element to group body content for scrolling
+		var wrapper = document.createElement('div');
+			wrapper.id = 'report-body';
 
 		// add the tab list
 		var tab_list = document.createElement('ul');
@@ -309,19 +318,19 @@ var smartReport = (function() {
 			tab_list.appendChild(tab_list_item);
 		});
 
-		reportBody.appendChild(tab_list);
+		header.appendChild(tab_list);
 
 		// create test result details
 		var testResults = createReportTestDetails();
 
 		// create extension tabs
-		var tabs = [];
+		var etabs = [];
 
 		if (_smartExtensionTabs.length > 0) {
-			_smartExtensionTabs.forEach(function(tab) {
-				if (smart_extensions.hasOwnProperty(tab.id)) {
-					if (_generateExtension.hasOwnProperty(tab.id) && _generateExtension[tab.id]) {
-						tabs.push(smart_extensions[tab.id].generateReport());
+			_smartExtensionTabs.forEach(function(etab) {
+				if (smart_extensions.hasOwnProperty(etab.id)) {
+					if (_generateExtension.hasOwnProperty(etab.id) && _generateExtension[etab.id]) {
+						etabs.push(smart_extensions[etab.id].generateReport());
 					}
 				}
 			});
@@ -341,10 +350,12 @@ var smartReport = (function() {
 		}));
 
 		// build the body
-		reportBody.appendChild(reportSummary);
-		reportBody.appendChild(testResults.content);
-		tabs.forEach(function(tab) { reportBody.appendChild(tab)});
-		reportBody.appendChild(additionalInfo);
+		wrapper.appendChild(reportSummary);
+		wrapper.appendChild(testResults.content);
+		etabs.forEach(function(etab) { wrapper.appendChild(etab)});
+		wrapper.appendChild(additionalInfo);
+
+		reportBody.appendChild(wrapper);
 
 		return reportBody.innerHTML;
 	}

diff --git a/new.html b/new.html
@@ -16,6 +16,12 @@ <h1><img src="images/daisy_high.jpg" class="logo" alt="DAISY"/> <span property="
 				<h2>What's New</h2>
 
 				<dl>
+					<dt>May 8, 2024 &#8212; Updated report format</dt>
+					<dd>
+						<p>The evaluation reports now have sticky headers so that mouse users do not have to scroll
+							back to the top to change tabs. This change does not affect existing reports.</p>
+					</dd>
+
 					<dt>May 3, 2024 &#8212; Updated distribution metadata</dt>
 					<dd>
 						<p>The layout of the Distribution tab has been updated to include the descriptions for

diff --git a/php/version.php b/php/version.php
@@ -1,4 +1,4 @@
 
 <?php
-	$smart_version = '2024-05-03T12:00:00Z'; # used to refresh all css and js in browsers 
+	$smart_version = '2024-05-08T12:00:00Z'; # used to refresh all css and js in browsers 
 ?>
diff --git a/report.php b/report.php
@@ -28,7 +28,7 @@
 		</script>
 	</head>
 	<body typeof="Book" vocab="https://schema.org">
-		<header>
+		<header class="sticky">
 			<h1>EPUB Accessibility Conformance Report</h1>
 			<div id="add-logo">{$_POST['logo']}</div>
 		</header>