morgan/Grinch-AP
1
0
Fork 0
mirror of https://github.com/MarioSpore/Grinch-AP.git synced 2025-10-21 20:21:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

WebHost: minor css changes to make Supported Games page usable without js (#2266)

Browse Source 
* WebHost: minor css changes to make Supported Games page usable without js

* Update JS to use querySelectorAll, remove most id attributes from elements, use relative element selectors

* Hide content when clearing search bar

* Remove `console.log`, remove TODO

---------

Co-authored-by: Chris Wilson <chris@legendserver.info>
This commit is contained in:
black-sliver
2023-10-20 02:58:41 +02:00
committed by GitHub
parent b82f48fe4b
commit 56796b7ee8
3 changed files with 67 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
WebHostLib/templates/supportedGames.html
View File

@@ -5,15 +5,35 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/markdown.css") }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/supportedGames.css") }}" />
<script type="application/ecmascript" src="{{ url_for('static', filename="assets/supportedGames.js") }}"></script>
<noscript>
<style>
/* always un-collapse all and hide arrow and search bar */
.js-only{
display: none;
}
#games p.collapsed{
display: block;
}
#games h2 .collapse-arrow{
display: none;
}
#games .collapse-toggle{
cursor: unset;
}
</style>
</noscript>
{% endblock %}
{% block body %}
{% include 'header/oceanHeader.html' %}
<div id="games" class="markdown">
<h1>Currently Supported Games</h1>
<div>
<div class="js-only">
<label for="game-search">Search for your game below!</label><br />
<div id="page-controls">
<div class="page-controls">
<input id="game-search" placeholder="Search by title..." autofocus />
<button id="expand-all">Expand All</button>
<button id="collapse-all">Collapse All</button>
@@ -22,9 +42,9 @@
{% for game_name in worlds | title_sorted %}
{% set world = worlds[game_name] %}
<h2 class="collapse-toggle" data-game="{{ game_name }}">
<span id="{{ game_name }}-arrow" class="collapse-arrow">▶</span>&nbsp;{{ game_name }}
<span class="collapse-arrow">▶</span>{{ game_name }}
</h2>
<p id="{{ game_name }}" class="collapsed">
<p class="collapsed">
{{ world.__doc__ | default("No description provided.", true) }}<br />
<a href="{{ url_for("game_info", game=game_name, lang="en") }}">Game Page</a>
{% if world.web.tutorials %}