scientific-witchery/pds-dash
3
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

Style still WIP but much better now

Browse source
This commit is contained in:
Astra 2025-04-20 18:14:12 +09:00
parent bf7fbdcb67
commit 037dea4e40
Signed by: astra
SSH key fingerprint: SHA256:jQDNS75/33T59Ey4yAzrUPP/5YQaXEetsW8hwUae+ag
6 changed files with 113 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/lib/AccountComponent.svelte
View file

@ -1,49 +1,48 @@
<script lang="ts">
import type { AccountMetadata } from "./pdsfetch";
const { account }: { account: AccountMetadata } = $props();
import { Config } from "../../config";
import type { AccountMetadata } from "./pdsfetch";
const { account }: { account: AccountMetadata } = $props();
import { Config } from "../../config";
</script>
<a id="link" href="{Config.FRONTEND_URL}/profile/{account.did}">
<div id="accountContainer">
{#if account.avatarCid}
<img
id="avatar"
alt="avatar of {account.displayName}"
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
/>
{/if}
<div id="accountName">
{account.displayName || account.handle || account.did}
</div>
<div id="accountContainer">
{#if account.avatarCid}
<img
id="avatar"
alt="avatar of {account.displayName}"
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
/>
{/if}
<div id="accountName">
{account.displayName || account.handle || account.did}
</div>
</div>
</a>
<style>
#accountContainer {
display: flex;
text-align: start;
align-items: center;
background-color: #0d0620;
padding: 4%;
margin: 10px;
#accountContainer {
display: flex;
text-align: start;
align-items: center;
background-color: #12082b;
padding: 0px;
margin-bottom: 15px;
border: 1px solid #8054f0;
}
#accountName {
margin-left: 10px;
font-size: 0.9em;
/* round corners */
border-radius: 10px;
}
#accountName {
margin-left: 10px;
font-size: 0.9em;
/* replace overflow with ellipsis */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 80%;
}
#avatar {
width: 50px;
height: 50px;
border-radius: 50%;
}
/* replace overflow with ellipsis */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 80%;
}
#avatar {
width: 50px;
height: 50px;
margin: 0px;
border-right: #8054f0 1px solid;
}
</style>