diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Events/Group.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Events/Group.svelte')
| -rw-r--r-- | src/lib/Events/Group.svelte | 140 |
1 files changed, 70 insertions, 70 deletions
diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte index 6a100024..a3d24807 100644 --- a/src/lib/Events/Group.svelte +++ b/src/lib/Events/Group.svelte @@ -1,90 +1,90 @@ <script lang="ts"> - import type { Group } from '$lib/Database/SB/groups'; - import tooltip from '$lib/Tooltip/tooltip'; + import type { Group } from '$lib/Database/SB/groups'; + import tooltip from '$lib/Tooltip/tooltip'; - export let group: Group; + export let group: Group; </script> <div - class="card" - id="user-grid" - style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`} + class="card" + id="user-grid" + style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`} > - {#if group} - <img src={group.banner} alt="" id="cover-image" /> - {/if} + {#if group} + <img src={group.banner} alt="" id="cover-image" /> + {/if} - <div class="card" id="user-grid-content"> - <div id="user-grid-avatar"> - <a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank"> - <img src={group.avatar} alt="" width="100vw" id="avatar" /> - </a> - </div> + <div class="card" id="user-grid-content"> + <div id="user-grid-avatar"> + <a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank"> + <img src={group.avatar} alt="" width="100vw" id="avatar" /> + </a> + </div> - <div id="user-grid-content-text"> - <p> - <a - href={`https://anilist.co/user/${group.anilist_username}`} - target="_blank" - title={String(group.anilist_id)} - use:tooltip - > - @{group.name} - </a> - {#if group && group.badge} - ‌ - <button - class="unclickable-button button-badge badge-rainbow" - title={group.badge_description} - use:tooltip - data-tooltip-disable={group.badge_description} - > - {group.badge} - </button> - {/if} - </p> + <div id="user-grid-content-text"> + <p> + <a + href={`https://anilist.co/user/${group.anilist_username}`} + target="_blank" + title={String(group.anilist_id)} + use:tooltip + > + @{group.name} + </a> + {#if group && group.badge} + ‌ + <button + class="unclickable-button button-badge badge-rainbow" + title={group.badge_description} + use:tooltip + data-tooltip-disable={group.badge_description} + > + {group.badge} + </button> + {/if} + </p> - <p> - {group.description} - </p> - </div> - </div> + <p> + {group.description} + </p> + </div> + </div> </div> <style> - #user-grid-content { - display: flex; - flex-wrap: wrap; - column-gap: 1.5em; - background-color: rgba(0, 0, 0, 0.468); - color: #d8d8d8; - border-top-left-radius: 0; - border-top-right-radius: 0; - } + #user-grid-content { + display: flex; + flex-wrap: wrap; + column-gap: 1.5em; + background-color: rgba(0, 0, 0, 0.468); + color: #d8d8d8; + border-top-left-radius: 0; + border-top-right-radius: 0; + } - #user-grid-avatar { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } + #user-grid-avatar { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } - #avatar { - border-radius: 8px; - } + #avatar { + border-radius: 8px; + } - /* .click-item { + /* .click-item { margin: 0 0.625rem; } */ - #user-grid { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } + #user-grid { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + } - #cover-image { - visibility: hidden; - height: 4.5em; - } + #cover-image { + visibility: hidden; + height: 4.5em; + } </style> |