yuzu-emu/shared-bulma-theme
1
0
Fork 0
mirror of https://github.com/yuzu-emu/shared-bulma-theme.git synced 2024-11-21 23:15:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13 from FearlessTobi/test-2

Browse Source 
game/list: Add pagination and a search bar
This commit is contained in:
liushuyu 2022-10-30 18:21:11 -06:00 committed by GitHub
commit e625f3336e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 177 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
layouts/game/list.html
View File

@ -1,61 +1,195 @@
{{ define "header" }} {{ define "header" }}
<div class="container"> <div class="container">
<div class="section pb-xs"> <div class="section pb-xs">
<h1 class="title">Game Compatibility List</h1> <h1 class="title">Game Compatibility List</h1>
<p class="content"> <p class="content">
The compatibility list contains all the games we tested, sorted by how well they work on the emulator. The compatibility list contains all the games that have been tested, sorted by how well they work on the emulator.
</p> </p>
<table class="table is-fullwidth"> <table class="table is-fullwidth">
<tbody> <tbody>
{{ range .Site.Data.compatibility }} {{ range .Site.Data.compatibility }}
<tr> <tr>
<td> <td>
<div class="is-square" style="background-color: {{ .color }}"></div> {{ .name }} <div class="is-square" style="background-color: {{ .color }}"></div>
</td> {{ .name }}
<td>{{ .description }}</td> </td>
</tr> <td>{{ .description }}</td>
{{ end }} </tr>
</tbody> {{ end }}
</table> </tbody>
</table>
<!-- <div id="highchart-container" style="height: 100px; margin: 0 auto"></div> --> <canvas id="chartjs-container" style="width:100%;height:130px"></canvas>
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<div class="section pt-xs"> <div id="game-listing">
<table class="table is-fullwidth"> <div class="pagination-search-container">
<thead> <div class="pagination-container">
<ul class="pagination paginationTop is-pulled-left"></ul>
</div>
<div>
<form>
<div class="form-group">
<table>
<tr>
<td>
<div class="input-group search-box search-container">
<input type="text" class="search input is-rounded" id="search-box" placeholder="Search...">
</div>
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="section pt-xs">
<table id="compatibility-list" class="table table-responsive is-fullwidth">
<thead>
<tr> <tr>
<th>Game Title</th> <th></th>
<th>Compatibility</th> <th class="sort" data-sort="title">Game Title</th>
<th>Date Tested</th> <th class="sort" data-sort="compatibility">Compatibility</th>
<th class="sort" data-sort="date-tested">Date Tested</th>
</tr> </tr>
</thead> </thead>
<tbody class="is-size-7"> <tbody class="list is-size-6">
{{ range .Pages }} {{ range .Pages }}
{{ $rating := index .Site.Data.compatibility .Params.compatibility }} {{ $rating := index .Site.Data.compatibility .Params.compatibility }}
<tr data-key="{{ .Params.section_id }}"> <tr data-key="{{ .Params.section_id }}">
<td data-title="{{ .Params.title }}"> <td class="hidden listing-metadata">
<a href="{{ .Permalink }}">{{ .Params.title }}</a> <span hidden>{{ .Params.title }} {{ $rating.name }}</span>
</td> </td>
<td data-compatibility="{{ $rating.key }}"> <td class="game-title" data-title="{{ .Params.title }}">
<div class="is-square" style="background-color: {{ $rating.color }}"></div> <span>{{ $rating.name }}</span> <a href="{{ .Permalink }}">{{ .Params.title }}</a>
</td> </td>
<td data-timestamp="{{ .Params.testcase_date }}"> <td class="compatibility" data-compatibility="{{ $rating.key }}">
{{ if .Params.testcase_date }} <div class="is-square" style="background-color: {{ $rating.color }}"></div>
<span>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</span> <span>{{ $rating.name }}</span>
{{ else }} </td>
<span></span> <td class="date-tested" data-timestamp="{{ .Params.testcase_date }}">
{{ end }} <span>{{ if .Params.testcase_date }}{{ dateFormat "January 2, 2006" .Params.testcase_date }}{{ end }}</span>
</td> </td>
</tr> </tr>
{{ end }} {{ end }}
</tbody> </tbody>
</table> </table>
<ul class="pagination paginationBottom is-pulled-left"></ul>
</div>
</div> </div>
{{ end }} {{ end }}
{{ define "scripts" }} {{ define "scripts" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"
integrity="sha256-NEVvGNMGqFvs6adGLZjm5sLgcuX9rGTg1wlGtA1f7M8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
integrity="sha256-+8RZJua0aEWg+QVVKg4LEzEEm/8RFez5Tb4JBNiV5xA=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
function getLastSorted(list){
var currentSorted = $(list.listContainer).find(".asc, .desc").attr("data-sort");
if (!currentSorted)
list.lastSorted = currentSorted;
return list.lastSorted;
}
function filterTable(index, name) {
$("#search-box").val(name);
list.search(index, ['compatibility']);
}
function clearSearch() {
$("#search-box").val("");
list.search();
}
var options = {
valueNames: [
'listing-metadata',
{ name: 'game-title', attr: 'data-title' },
{ name: 'compatibility', attr: 'data-compatibility' },
{ name: 'date-tested', attr: 'data-timestamp' }
],
searchColumns: [ 'listing-metadata' ],
pagination: [
{ paginationClass: "paginationTop" },
{ paginationClass: "paginationBottom" }
],
indexAsync: true,
page: 30
};
var list = new List('game-listing', options);
list.sort("title", {order: "asc"});
list.on("updated", function(list){
var $list = $(list.list);
var $items = $list.children();
$items.removeClass("key");
if ('title' === getLastSorted(list)){
$items.each(function(){
var key = $(this).attr("data-key")
if (
$list
.children("[data-key='" + key + "']")
.first()
.is( $(this) )
){
$(this).addClass("key");
}
})
}
});
$('#game-listing .clear-search').click(clearSearch);
var dataset = [
{{- $dataPages := .Data.Pages }}
{{- range .Site.Data.compatibility }}
{{- $dataPagesFiltered := where $dataPages ".Params.compatibility" .key }}
{ axis: "y", "label": "{{ .name }}", "data": [ {{ len $dataPagesFiltered }} ], backgroundColor: "{{ .color }}" },
{{- end }}
].reverse()
var chart = new Chart("chartjs-container", {
type: 'bar',
data: {
labels: [""],
datasets: dataset
},
options: {
plugins: {
legend: {
display: false
}
},
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true },
},
indexAxis: 'y',
onClick: (e) => {
var points = chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, true);
if(points.length) {
// The index of compatibility ratings is reversed
filterTable(dataset.length - points[0].datasetIndex - 1, dataset[points[0].datasetIndex].label);
}
},
},
});
});
</script>
{{ end }} {{ end }}