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

added tailwind and cleaned up page

Browse Source 
Cleaned up page to allow Tailwind to start handling the look and feel of
everything
This commit is contained in:
John O'Keefe 2024-07-24 09:17:39 -04:00
parent 64def1a763
commit 59fe3d32ff
5 changed files with 142 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/package.json
View File

@ -12,11 +12,17 @@
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.1", "@sveltejs/vite-plugin-svelte": "^1.0.1",
"@tsconfig/svelte": "^3.0.0", "@tsconfig/svelte": "^3.0.0",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
"svelte": "^3.49.0", "svelte": "^3.49.0",
"svelte-check": "^2.8.0", "svelte-check": "^2.8.0",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.4.6",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "^4.6.4", "typescript": "^4.6.4",
"vite": "^3.0.7" "vite": "^3.0.7"
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2"
} }
} }

6
frontend/postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

213
frontend/src/App.svelte
View File

@ -1,125 +1,134 @@
<script lang="ts"> <script lang="ts">
import logo from './assets/images/logo-universal.png' import {
import {Greet} from '../wailsjs/go/main/App.js' AniListSearch,
import {AniListLogin, AniListSearch, GetAniListItem} from "../wailsjs/go/main/App"; GetAniListItem,
import type {AniListItem, AniSearchList} from "./AniListTypes"; GetAniListLoggedInUserId,
GetAniListUserWatchingList
} from "../wailsjs/go/main/App";
import {type AniListItem, type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
let resultText: string = "Please enter your name below 👇" let aniId = "157371"
let name: string let aniSearch = ""
let aniId = "157371" let aniListItem: AniListItem
let aniSearch = "" let aniListSearch: AniSearchList
let aniListItem: AniListItem let aniListLoggedIn = false
let aniListSearch: AniSearchList let aniListWatchlist: AniListCurrentUserWatchList
let aniListLoggedIn = false let page = 1
let perPage = 20
function greet(): void { function getAniListitem(): void {
Greet(name).then(result => resultText = result) GetAniListItem(Number(aniId)).then(result => aniListItem = result)
} }
function getAniListitem(): void { function runAniListSearch(): void {
GetAniListItem(Number(aniId)).then(result => aniListItem = result) AniListSearch(aniSearch).then(result => aniListSearch = result)
} }
function runAniListSearch(): void { function anilistGetUserWatchlist(): void {
AniListSearch(aniSearch).then(result => aniListSearch = result) GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
} aniListWatchlist = result
aniListLoggedIn = true
function loginToAniList(): void { })
AniListLogin().then(() => aniListLoggedIn = true) }
}
</script> </script>
<main> <main>
<img alt="Wails logo" id="logo" src="{aniListItem === undefined ? logo : aniListItem.data.Media.coverImage.extraLarge}"> <div class="input-box" id="aniSearch">
<!-- <div class="result" id="result">{resultText}</div>--> <input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/>
<!-- <div class="input-box" id="input">--> <button class="btn" on:click={runAniListSearch}>Search AniList</button>
<!-- <input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>--> </div>
<!-- <button class="btn" on:click={greet}>Greet</button>-->
<!-- </div>-->
<div class="result" id="AniTest">{aniListItem !== undefined ? aniListItem.data.Media.title.english : ""}</div> <button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
<div class="input-box" id="aniButton"> {#if aniListLoggedIn}
<input autocomplete="off" bind:value={aniId} class="input" id="aniId" type="text"/> <div>You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
<button class="btn" on:click={getAniListitem}>Get AniList Item</button> {/if}
</div>
<button class="btn" on:click={loginToAniList}>Login to AniList</button> {#if aniListLoggedIn}
{#if aniListLoggedIn} <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
<div>You are logged in!</div> <h1>Your Watching List</h1>
{/if}
<div class="input-box" id="aniSearch"> <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/> {#each aniListWatchlist.data.Page.mediaList as media}
<button class="btn" on:click={runAniListSearch}>Search AniList</button> <a href="#" class="group">
</div> <!-- <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
{#if aniListSearch !== undefined} <div class="justify-center rounded-lg bg-gray-200">
<ul> <img src={media.media.coverImage.large} alt="anime cover"/>
{#each aniListSearch.data.Page.media as media, index (media.id)} </div>
<li> <h3 class="mt-4 text-sm text-white-700">{
<div>{media.title.english !== null ? media.title.english : media.title.romaji}</div> media.media.title.english === "" ?
</li> media.media.title.romaji :
{:else} media.media.title.english
<div>No Results Yet...</div> }</h3>
{/each} <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
</ul> / {media.media.nextAiringEpisode.episode !== 0 ?
{/if} media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
{#if media.media.episodes > 0}
<p class="mt-1 text-lg font-medium text-white-900">Total
Episodes: {media.media.episodes}</p>
{/if}
</a>
{/each}
</div>
</div>
{/if}
</main> </main>
<style> <style>
#logo { #logo {
display: block; display: block;
width: 50%; width: 50%;
height: 50%; height: 50%;
margin: auto; margin: auto;
padding: 10% 0 0; padding: 10% 0 0;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-origin: content-box; background-origin: content-box;
} }
.result { .result {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
margin: 1.5rem auto; margin: 1.5rem auto;
} }
.input-box .btn { .input-box .btn {
/*width: 60px;*/ /*width: 60px;*/
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
margin: 0 0 0 20px; margin: 0 0 0 20px;
padding: 0 8px; padding: 0 8px;
cursor: pointer; cursor: pointer;
} }
.input-box .btn:hover { .input-box .btn:hover {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
color: #333333; color: #333333;
} }
.input-box .input { .input-box .input {
border: none; border: none;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding: 0 10px; padding: 0 10px;
background-color: rgba(240, 240, 240, 1); background-color: rgba(240, 240, 240, 1);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.input-box .input:hover { .input-box .input:hover {
border: none; border: none;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
} }
.input-box .input:focus { .input-box .input:focus {
border: none; border: none;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
} }
</style> </style>

4
frontend/src/style.css
View File

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html { html {
background-color: rgba(27, 38, 54, 1); background-color: rgba(27, 38, 54, 1);
text-align: center; text-align: center;

14
frontend/tailwind.config.js Normal file
View File

@ -0,0 +1,14 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{svelte,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/aspect-ratio'),
],
}