actions/goreportcard
2
0
Fork 0
mirror of https://github.com/gojp/goreportcard.git synced 2026-01-28 22:39:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #336 from xuri/toggle-menu

Browse Source 
Enable toggle menu and fix missing footer in 404 page
This commit is contained in:
Shawn Smith
2021-01-27 18:10:35 +09:00
committed by GitHub
parent 232d912e51 222063399a
commit 7a8a1ebca8
7 changed files with 141 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
handlers/error.go
View File

@@ -8,7 +8,7 @@ import (
func errorHandler(w http.ResponseWriter, r *http.Request, status int) {
w.WriteHeader(status)
if status == http.StatusNotFound {
t := template.Must(template.New("404.html").ParseFiles("templates/404.html", "templates/footer.html"))
t := template.Must(template.New("404.html").Delims("[[", "]]").ParseFiles("templates/404.html", "templates/footer.html"))
t.Execute(w, nil)
}
}

28
templates/404.html
View File

@@ -33,21 +33,21 @@
</div>
<!-- Hamburger menu (on mobile) -->
<span class="header-toggle">
<span class="header-toggle" data-target="header-menu">
<span></span>
<span></span>
<span></span>
</span>
<!-- Right side -->
<div class="header-right header-menu">
<div class="header-right header-menu" id="header-menu">
<span class="header-item">
<a href="/high_scores">High Scores</a>
</span>
<span class="header-item">
<a href="https://github.com/gojp/goreportcard">GitHub</a>
</span>
<span class="header-item is-active">
<span class="header-item">
<a href="/about">About</a>
</span>
</div>
@@ -80,5 +80,27 @@
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
// Get all "header-toggle" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "header-toggle" and the "header-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
})
</script>
</body>
</html>

26
templates/about.html
View File

@@ -33,14 +33,14 @@
</div>
<!-- Hamburger menu (on mobile) -->
<span class="header-toggle">
<span class="header-toggle" data-target="header-menu">
<span></span>
<span></span>
<span></span>
</span>
<!-- Right side -->
<div class="header-right header-menu">
<div class="header-right header-menu" id="header-menu">
<span class="header-item">
<a href="/high_scores">High Scores</a>
</span>
@@ -67,5 +67,27 @@
</div>
</section>
[[ template "footer" . ]]
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
// Get all "header-toggle" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "header-toggle" and the "header-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
})
</script>
</body>
</html>

26
templates/high_scores.html
View File

@@ -33,14 +33,14 @@
</div>
<!-- Hamburger menu (on mobile) -->
<span class="header-toggle">
<span class="header-toggle" data-target="header-menu">
<span></span>
<span></span>
<span></span>
</span>
<!-- Right side -->
<div class="header-right header-menu">
<div class="header-right header-menu" id="header-menu">
<span class="header-item is-active">
<a href="/high_scores">High Scores</a>
</span>
@@ -86,5 +86,27 @@
</div>
</section>
[[ template "footer" . ]]
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
// Get all "header-toggle" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "header-toggle" and the "header-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
})
</script>
</body>
</html>

25
templates/home.html
View File

@@ -31,14 +31,14 @@
</div>
<!-- Hamburger menu (on mobile) -->
<span class="header-toggle">
<span class="header-toggle" data-target="header-menu">
<span></span>
<span></span>
<span></span>
</span>
<!-- Right side -->
<div class="header-right header-menu">
<div class="header-right header-menu" id="header-menu">
<span class="header-item">
<a href="/high_scores">High Scores</a>
</span>
@@ -103,7 +103,7 @@
<tbody>
[[ range .Recent ]]
<tr>
<td class="table-link"><a href="/report/[[ . ]]">[[ . ]]</td>
<td class="table-link"><a href="/report/[[ . ]]">[[ . ]]</a></td>
</tr>
[[ end ]]
</tbody>
@@ -204,6 +204,25 @@
// handle form submission
$("form#check_form").submit(loadData);
// Get all "header-toggle" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "header-toggle" and the "header-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>

23
templates/report.html
View File

@@ -37,14 +37,14 @@
</div>
<!-- Hamburger menu (on mobile) -->
<span class="header-toggle">
<span class="header-toggle" data-target="header-menu">
<span></span>
<span></span>
<span></span>
</span>
<!-- Right side -->
<div class="header-right header-menu">
<div class="header-right header-menu" id="header-menu">
<span class="header-item">
<a href="/high_scores">High Scores</a>
</span>
@@ -346,6 +346,25 @@
$('nav.results').removeClass('stickytop');
}
});
// Get all "header-toggle" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "header-toggle" and the "header-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>

26
templates/supporters.html
View File

@@ -33,14 +33,14 @@
</div>
<!-- Hamburger menu (on mobile) -->
<span class="header-toggle">
<span class="header-toggle" data-target="header-menu">
<span></span>
<span></span>
<span></span>
</span>
<!-- Right side -->
<div class="header-right header-menu">
<div class="header-right header-menu" id="header-menu">
<span class="header-item">
<a href="/high_scores">High Scores</a>
</span>
@@ -66,5 +66,27 @@
</div>
</section>
[[ template "footer" . ]]
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
// Get all "header-toggle" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "header-toggle" and the "header-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
})
</script>
</body>
</html>