add suggest a game to games list

This commit is contained in:
Sky 2023-09-22 22:05:41 -04:00
parent 97ade20405
commit 8c5f92fcb7
4 changed files with 12 additions and 5 deletions

1
img/addlink.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M680-160v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm560-40h-80q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480Z"/></svg>

After

Width:  |  Height:  |  Size: 368 B

View File

@ -1,7 +1,12 @@
$(document).ready(function () { $(document).ready(function () {
$("#gamesearch").on("input propertychange paste", function () { $("#gamesearch").on("input propertychange paste", function () {
$("#games .game").hide();
var txt = $("#gamesearch").val(); var txt = $("#gamesearch").val();
if(txt == "") {
$("#games .suggest").show();
} else {
$("#games .suggest").hide();
}
$("#games .game").hide();
$("#games .game").each(function () { $("#games .game").each(function () {
if (($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) || ($(this).attr("id").toUpperCase().indexOf(txt.toUpperCase()) != -1)) { if (($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) || ($(this).attr("id").toUpperCase().indexOf(txt.toUpperCase()) != -1)) {
$(this).show(); $(this).show();

View File

@ -80,6 +80,7 @@
<h2>All Games</h2> <h2>All Games</h2>
<div id="games"> <div id="games">
<a href="https://forms.gle/iBAbXvEDaYTLuEcdA"><div class="suggest"><img src="img/addlink.svg" alt="Add Game logo" style="filter: invert(1);"><h1>Suggest a game!</h1></div></a>
<p id="message">games loading..</p> <p id="message">games loading..</p>
</div> </div>

View File

@ -146,7 +146,7 @@ img {
margin: 2%; margin: 2%;
} }
.game { .game, .suggest {
width: 15%; width: 15%;
border-radius: 20px; border-radius: 20px;
display: inline-block; display: inline-block;
@ -156,13 +156,13 @@ img {
box-shadow: 0px 0px 5px 5px var(--uibg); box-shadow: 0px 0px 5px 5px var(--uibg);
} }
.game:hover { .game:hover, .suggest:hover {
transform: scale(1.1); transform: scale(1.1);
filter: brightness(85%); filter: brightness(85%);
box-shadow: 0px 0px 5px 5px var(--uibg); box-shadow: 0px 0px 5px 5px var(--uibg);
} }
.game h1 { .game h1, .suggest h1 {
font-size: 13px; font-size: 13px;
float: right; float: right;
margin-right: 10px; margin-right: 10px;
@ -170,7 +170,7 @@ img {
margin-bottom: 3px; margin-bottom: 3px;
} }
.game img { .game img, .suggest img {
width: 100%; width: 100%;
border-radius: 20px; border-radius: 20px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;