diff options
| author | Fuwn <[email protected]> | 2024-01-05 19:41:11 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-05 19:41:11 -0800 |
| commit | 12cf6f1531c00d84bf1deb2e08815d38492bd58c (patch) | |
| tree | 69d87e311e9b41c9107989b96f38556d0787e9e0 | |
| parent | feat(css): better shadow (diff) | |
| download | due.moe-12cf6f1531c00d84bf1deb2e08815d38492bd58c.tar.xz due.moe-12cf6f1531c00d84bf1deb2e08815d38492bd58c.zip | |
feat(css): navigation avatar
| -rw-r--r-- | src/app.css | 5 | ||||
| -rw-r--r-- | src/lib/AniList/identity.ts | 6 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 23 |
3 files changed, 24 insertions, 10 deletions
diff --git a/src/app.css b/src/app.css index ea6ef7e6..b920a8c0 100644 --- a/src/app.css +++ b/src/app.css @@ -26,6 +26,11 @@ details { box-shadow: 0 4px 30px var(--base01); } +.fancy-image { + border-radius: 8px; + box-shadow: 0 4px 30px var(--base01); +} + summary { font-size: 1.05em; font-weight: 600; diff --git a/src/lib/AniList/identity.ts b/src/lib/AniList/identity.ts index a77891d6..7214ffa4 100644 --- a/src/lib/AniList/identity.ts +++ b/src/lib/AniList/identity.ts @@ -1,6 +1,7 @@ export interface UserIdentity { id: number; name: string; + avatar: string; } export interface AniListAuthorisation { @@ -21,12 +22,13 @@ export const userIdentity = async ( 'Content-Type': 'application/json', Accept: 'application/json' }, - body: JSON.stringify({ query: `{ Viewer { id name } }` }) + body: JSON.stringify({ query: `{ Viewer { id name avatar { large } } }` }) }) ).json(); return { id: userIdResponse['data']['Viewer']['id'], - name: userIdResponse['data']['Viewer']['name'] + name: userIdResponse['data']['Viewer']['name'], + avatar: userIdResponse['data']['Viewer']['avatar']['large'] }; }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a15e14ee..e148a076 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,7 +10,7 @@ export let data; - let currentUserIdentity = { name: '...', id: -1 }; + let currentUserIdentity = { name: '...', id: -1, avatar: '' }; onMount(async () => { if (browser && localStorage.getItem('redirect')) { @@ -43,7 +43,7 @@ <a href="/tools" class="header-item">Tools</a> <a href="/settings" class="header-item">Settings</a> - <span style="opacity: 50%;">|</span> + <span style="opacity: 50%;" class="header-item">|</span> {#if data.user} <a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a> @@ -63,11 +63,12 @@ Log in with AniList </a> {:else} - <a href="/api/authentication/log-out" class="header-item" - >Log out<button class="smaller-button button-badge badge-info" - >{currentUserIdentity.name}</button - ></a - > + <a href="/api/authentication/log-out" class="header-item">Log out </a> + {#if data.user} + <a href={`/user/${currentUserIdentity.name}`} class="header-item"> + <img class="fancy-image" id="avatar" src={currentUserIdentity.avatar} alt="Avatar" /> + </a> + {/if} {/if} </div> </div> @@ -134,7 +135,7 @@ } .header-item { - margin: 0 0.625rem; + margin: 0 0.5rem; } .header-item:hover { @@ -144,4 +145,10 @@ .header-item:active { outline: none; } + + #avatar { + width: 2em; + display: inline-block; + vertical-align: middle; + } </style> |