john-okeefe/anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleaned up search results UI

Browse Source
This commit is contained in:
John O'Keefe 2024-08-09 15:12:32 -04:00
parent 77289052e9
commit 6c4fdabb79
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/Search.svelte
View File

@ -2,7 +2,7 @@
import {AniListSearch} from "../wailsjs/go/main/App"; import {AniListSearch} from "../wailsjs/go/main/App";
import type {AniSearchList} from "./anilist/types/AniListTypes"; import type {AniSearchList} from "./anilist/types/AniListTypes";
import {GetAniListSingleItemAndOpenModal} from "./GetAniListSingleItemAndOpenModal.svelte"; import {GetAniListSingleItemAndOpenModal} from "./GlobalVariablesAndHelperFunctions.svelte";
let aniSearch = "" let aniSearch = ""
let aniListSearch: AniSearchList let aniListSearch: AniSearchList
@ -51,14 +51,18 @@
aria-labelledby="aniListSearchButton"> aria-labelledby="aniListSearchButton">
{#each aniListSearch.data.Page.media as media} {#each aniListSearch.data.Page.media as media}
<li class="w-full"> <li class="w-full">
<div class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
<button on:click={() => { <button on:click={() => {
GetAniListSingleItemAndOpenModal(media.id, false) GetAniListSingleItemAndOpenModal(media.id, false)
}} }}
class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg"> >
<img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large} <img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}
alt="{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english} Cover"> alt="{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english} Cover">
<p class="bg-gray-800 text-left w-full h-24 p-2 rounded-tr-lg rounded-br-lg">{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</p>
</button> </button>
<button class="rounded-bl-lg rounded-tl-lg w-full h-24" on:click={() => {
GetAniListSingleItemAndOpenModal(media.id, false)
}} >{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</button>
</div>
</li> </li>
{/each} {/each}
</ul> </ul>