john-okeefe/anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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

8
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'),
],
}