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:
parent
64def1a763
commit
59fe3d32ff
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
background-color: rgba(27, 38, 54, 1);
|
||||
text-align: center;
|
||||
|
||||
14
frontend/tailwind.config.js
Normal file
14
frontend/tailwind.config.js
Normal 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'),
|
||||
],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user