added tailwind and cleaned up page

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

View File

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

View File

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

View File

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

View File

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

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