Improve page rendering

ConorMacBride · ConorMacBride · commit 14be93b7b49b · 2022-02-01T17:50:55.000Z
diff --git a/pytest_mpl/summary/templates/base.html b/pytest_mpl/summary/templates/base.html
@@ -8,12 +8,12 @@
           integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>{{ results.title }}</title>
 </head>
-<body class="{{ results.classes | join(' ') }}" id="results">
+<body{% if results.classes | length %} class="{{ results.classes | join(' ') }}"{% endif %} id="results">
 {% include 'navbar.html' %}
 <div class="album bg-light">
     <div class="container-fluid">
         <div id="noResultsAlert"></div>
-        <div class="row list">
+        <div class="row list" id="resultslist" style="display:none">
             {% filter indent(width=12) -%}
             {% include 'result.html' %}
             {%- endfilter %}
diff --git a/pytest_mpl/summary/templates/extra.js b/pytest_mpl/summary/templates/extra.js
@@ -32,6 +32,8 @@ if (window.location.search.length > 0) {
 } else {  // If no parameters, apply default but don't update the URL
     resultsList.sort('status-sort', {order: "desc"});
 }
+// Show page after initial filtering to prevent flashing
+document.getElementById('resultslist').style.display = null;
 
 // Show a message if no tests match current filters
 var alertPlaceholder = document.getElementById('noResultsAlert');
diff --git a/pytest_mpl/summary/templates/styles.css b/pytest_mpl/summary/templates/styles.css
@@ -42,7 +42,7 @@ div.result div.status-badge button.btn-warning img {
     filter: brightness(0);
 }
 div.mpl-images {
-    height: 1000px;
+    height: auto;
 }
 div.hover-image {
     position: relative;

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,8 @@ if (window.location.search.length > 0) {`
`32`	`32`	`} else { // If no parameters, apply default but don't update the URL`
`33`	`33`	`resultsList.sort('status-sort', {order: "desc"});`
`34`	`34`	`}`
	`35`	`+// Show page after initial filtering to prevent flashing`
	`36`	`+document.getElementById('resultslist').style.display = null;`
`35`	`37`
`36`	`38`	`// Show a message if no tests match current filters`
`37`	`39`	`var alertPlaceholder = document.getElementById('noResultsAlert');`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ div.result div.status-badge button.btn-warning img {`
`42`	`42`	`filter: brightness(0);`
`43`	`43`	`}`
`44`	`44`	`div.mpl-images {`
`45`		`- height: 1000px;`
	`45`	`+ height: auto;`
`46`	`46`	`}`
`47`	`47`	`div.hover-image {`
`48`	`48`	`position: relative;`