Merge pull request #198 from Honny1/back-to-top-button

Add button back to top of report
OpenSCAP · Jul 2, 2023 · 167bdd4 · 167bdd4
2 parents ca99b5e + da3d92f
commit 167bdd4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/openscap_report/report_generators/html_templates/base_report.html b/openscap_report/report_generators/html_templates/base_report.html
@@ -55,6 +55,14 @@ <h1 class="pf-c-title pf-m-4xl">{{ self.title() }}</h1>
 
                     {% endblock %}
                 </div>
+                <div id="back-to-top-button" class="pf-c-back-to-top" style="visibility: hidden;">
+                    <a class="pf-c-button pf-m-primary" href="#top">
+                      Back to top
+                      <span class="pf-c-button__icon pf-m-end">
+                        <i class="fas fa-angle-up" aria-hidden="true"></i>
+                      </span>
+                    </a>
+                </div>
             </section>
             <footer class="pf-c-page__main-section pf-m-no-fill">
                 <div class="footer-content">

diff --git a/openscap_report/report_generators/html_templates/js/interactive_script.js b/openscap_report/report_generators/html_templates/js/interactive_script.js
@@ -29,6 +29,7 @@ document.querySelector('main').addEventListener('scroll', () => {
     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         show_next_rules();
     }
+    document.getElementById('back-to-top-button').style.visibility = 'visible';
 }, false);
 
 function show_next_rules() {

diff --git a/openscap_report/report_generators/html_templates/template_report.html b/openscap_report/report_generators/html_templates/template_report.html
@@ -41,7 +41,7 @@
 {% block content %}
 
 {% if report.profile_info.title|length and report.profile_info.description|length -%}
-<h2 class="pf-c-title pf-m-3xl">About profile</h2>
+<h2 id="top" class="pf-c-title pf-m-3xl">About profile</h2>
 <br>
 {% include 'profile_info.html' %}
 <br>