granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix various spacing and sizing issues on party details

Browse source
This commit is contained in:
Justin Edmund 2025-09-24 01:24:57 -07:00
parent d8eb6b965a
commit 6ace86a00e
8 changed files with 949 additions and 831 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/lib/components/party/Party.svelte
View file

@ -747,14 +747,14 @@
alt={`Avatar of ${party.user.username}`} alt={`Avatar of ${party.user.username}`}
src={avatarSrc} src={avatarSrc}
srcset={avatarSrcSet} srcset={avatarSrcSet}
width="40" width="32"
height="40" height="32"
/> />
{:else} {:else}
<div class="avatar-placeholder" aria-hidden="true"></div> <div class="avatar-placeholder" aria-hidden="true"></div>
{/if} {/if}
</div> </div>
<span class="username">@{party.user.username}</span> <span class="username">{party.user.username}</span>
</a> </a>
</div> </div>
{/if} {/if}
@ -940,17 +940,23 @@
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: $unit-half; padding: $unit-half;
gap: $unit-2x;
display: flex;
flex-direction: column;
} }
.party-header { .party-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: start; align-items: start;
margin-bottom: $unit-half; vertical-align: middle;
padding: $unit-4x 0; align-items: center;
padding: $unit-2x 0;
} }
.party-info { .party-info {
flex-grow: 1;
h1 { h1 {
margin: 0 0 $unit-fourth 0; margin: 0 0 $unit-fourth 0;
font-size: $font-xlarge; font-size: $font-xlarge;
@ -981,8 +987,8 @@
} }
.avatar-wrapper { .avatar-wrapper {
width: $unit-5x; width: $unit-4x;
height: $unit-5x; height: $unit-4x;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
background: var(--card-bg); background: var(--card-bg);
@ -1031,7 +1037,7 @@
} }
.username { .username {
font-size: $font-medium; font-size: $font-regular;
font-weight: $medium; font-weight: $medium;
} }
@ -1044,7 +1050,6 @@
.cards { .cards {
display: flex; display: flex;
gap: $unit-2x; gap: $unit-2x;
margin-bottom: $unit-2x;
// Individual card styles // Individual card styles
.description-card, .description-card,

20
src/lib/components/party/PartySegmentedControl.svelte
View file

@ -17,13 +17,7 @@
class?: string class?: string
} }
let { let { selectedTab = GridType.Character, onTabChange, party, class: className }: Props = $props()
selectedTab = GridType.Character,
onTabChange,
party,
class: className
}: Props = $props()
// Handle value changes // Handle value changes
let value = $state(selectedTab) let value = $state(selectedTab)
@ -44,12 +38,7 @@
</script> </script>
<nav class={className}> <nav class={className}>
<SegmentedControl <SegmentedControl bind:value onValueChange={handleValueChange} gap={true} grow={true}>
bind:value
onValueChange={handleValueChange}
gap={true}
grow={true}
>
<RepSegment <RepSegment
value={GridType.Character} value={GridType.Character}
label={m.party_segmented_control_characters()} label={m.party_segmented_control_characters()}
@ -82,8 +71,9 @@
</nav> </nav>
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *;
nav { nav {
width: 100%; width: 100%;
margin-bottom: 1rem;
} }
</style> </style>

1
src/lib/components/sidebar/DescriptionSidebar.svelte
View file

@ -95,7 +95,6 @@
} }
.actions-section { .actions-section {
margin-top: $unit-2x;
padding: $unit-2x; padding: $unit-2x;
padding-bottom: $unit-2x; padding-bottom: $unit-2x;
border-top: 1px solid var(--button-bg); border-top: 1px solid var(--button-bg);

4
src/lib/components/ui/segmented-control/rep-segment.module.scss
View file

@ -10,7 +10,7 @@
padding: 0; padding: 0;
background: transparent; background: transparent;
border: none; border: none;
border-radius: $item-corner; border-radius: $card-corner;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -37,7 +37,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
background: $grey-100; background: $grey-100;
border-radius: $item-corner; border-radius: $card-corner;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;

195
src/lib/components/ui/segmented-control/segmented-control.module.scss
View file

@ -4,124 +4,123 @@
@use 'themes/mixins'; @use 'themes/mixins';
.wrapper { .wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
&.raid { &.raid {
width: 100%; width: 100%;
} }
@include mixins.breakpoint(small-tablet) { @include mixins.breakpoint(small-tablet) {
width: 100%; width: 100%;
} }
} }
.segmentedControl { .segmentedControl {
display: inline-flex; display: inline-flex;
padding: 3px; position: relative;
position: relative; gap: spacing.$unit-half;
gap: spacing.$unit-half; user-select: none;
user-select: none; overflow: hidden;
overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@include mixins.breakpoint(small-tablet) { @include mixins.breakpoint(small-tablet) {
background: var(--card-bg); background: var(--card-bg);
border-radius: 100px; border-radius: 100px;
} }
&.blended { &.blended {
background: var(--input-bound-bg); background: var(--input-bound-bg);
border-radius: layout.$full-corner; border-radius: layout.$full-corner;
} }
&.background { &.background {
background: var(--input-bg); background: var(--input-bg);
border-radius: layout.$full-corner; border-radius: layout.$full-corner;
} }
&.grow { &.grow {
flex-grow: 1; flex-grow: 1;
} }
&.gap { &.gap {
gap: spacing.$unit; gap: spacing.$unit-2x;
} }
&.raid { &.raid {
width: 100%; width: 100%;
} }
// Element colors // Element colors
&.fire { &.fire {
[data-state='checked'] { [data-state='checked'] {
background: var(--fire-bg); background: var(--fire-bg);
color: var(--fire-text); color: var(--fire-text);
} }
button:hover { button:hover {
background: var(--fire-hover-bg); background: var(--fire-hover-bg);
color: var(--fire-hover-text); color: var(--fire-hover-text);
} }
} }
&.water { &.water {
[data-state='checked'] { [data-state='checked'] {
background: var(--water-bg); background: var(--water-bg);
color: var(--water-text); color: var(--water-text);
} }
button:hover { button:hover {
background: var(--water-hover-bg); background: var(--water-hover-bg);
color: var(--water-hover-text); color: var(--water-hover-text);
} }
} }
&.earth { &.earth {
[data-state='checked'] { [data-state='checked'] {
background: var(--earth-bg); background: var(--earth-bg);
color: var(--earth-text); color: var(--earth-text);
} }
button:hover { button:hover {
background: var(--earth-hover-bg); background: var(--earth-hover-bg);
color: var(--earth-hover-text); color: var(--earth-hover-text);
} }
} }
&.wind { &.wind {
[data-state='checked'] { [data-state='checked'] {
background: var(--wind-bg); background: var(--wind-bg);
color: var(--wind-text); color: var(--wind-text);
} }
button:hover { button:hover {
background: var(--wind-hover-bg); background: var(--wind-hover-bg);
color: var(--wind-hover-text); color: var(--wind-hover-text);
} }
} }
&.light { &.light {
[data-state='checked'] { [data-state='checked'] {
background: var(--light-bg); background: var(--light-bg);
color: var(--light-text); color: var(--light-text);
} }
button:hover { button:hover {
background: var(--light-hover-bg); background: var(--light-hover-bg);
color: var(--light-hover-text); color: var(--light-hover-text);
} }
} }
&.dark { &.dark {
[data-state='checked'] { [data-state='checked'] {
background: var(--dark-bg); background: var(--dark-bg);
color: var(--dark-text); color: var(--dark-text);
} }
button:hover { button:hover {
background: var(--dark-hover-bg); background: var(--dark-hover-bg);
color: var(--dark-hover-text); color: var(--dark-hover-text);
} }
} }
} }

152
src/routes/[username]/+page.svelte
View file

@ -1,65 +1,113 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types' import type { PageData } from './$types'
import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte' import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
const { data } = $props() as { data: PageData } const { data } = $props() as { data: PageData }
const page = data.page || 1 const page = data.page || 1
const totalPages = data.totalPages || undefined const totalPages = data.totalPages || undefined
const tab = data.tab || 'teams' const tab = data.tab || 'teams'
const isOwner = data.isOwner || false const isOwner = data.isOwner || false
const avatarFile = data.user?.avatar?.picture || '' const avatarFile = data.user?.avatar?.picture || ''
function ensurePng(name: string) { function ensurePng(name: string) {
return /\.png$/i.test(name) ? name : `${name}.png` return /\.png$/i.test(name) ? name : `${name}.png`
} }
function to2x(name: string) { function to2x(name: string) {
return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png` return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
} }
const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : '' const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : '' const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : ''
</script> </script>
<section class="profile"> <section class="profile">
<header class="header"> <header class="header">
{#if data.user?.avatar?.picture} {#if data.user?.avatar?.picture}
<img class="avatar" alt={`Avatar of ${data.user.username}`} src={avatarSrc} srcset={avatarSrcSet} width="64" height="64" /> <img
{:else} class="avatar"
<div class="avatar" aria-hidden="true"></div> alt={`Avatar of ${data.user.username}`}
{/if} src={avatarSrc}
<div> srcset={avatarSrcSet}
<h1>@{data.user.username}</h1> width="64"
<nav class="tabs" aria-label="Profile sections"> height="64"
<a class:active={tab==='teams'} href="?tab=teams" data-sveltekit-preload-data="hover">Teams</a> />
{#if isOwner} {:else}
<a class:active={tab==='favorites'} href="?tab=favorites" data-sveltekit-preload-data="hover">Favorites</a> <div class="avatar" aria-hidden="true"></div>
{/if} {/if}
</nav> <div>
</div> <h1>{data.user.username}</h1>
</header> <nav class="tabs" aria-label="Profile sections">
<a class:active={tab === 'teams'} href="?tab=teams" data-sveltekit-preload-data="hover"
>Teams</a
>
{#if isOwner}
<a
class:active={tab === 'favorites'}
href="?tab=favorites"
data-sveltekit-preload-data="hover">Favorites</a
>
{/if}
</nav>
</div>
</header>
<ExploreGrid items={data.items} /> <ExploreGrid items={data.items} />
<nav class="pagination" aria-label="Pagination"> <nav class="pagination" aria-label="Pagination">
{#if page > 1} {#if page > 1}
<a rel="prev" href={`?page=${page - 1}`} data-sveltekit-preload-data="hover">Previous</a> <a rel="prev" href={`?page=${page - 1}`} data-sveltekit-preload-data="hover">Previous</a>
{/if} {/if}
{#if totalPages && page < totalPages} {#if totalPages && page < totalPages}
<a rel="next" href={`?page=${page + 1}`} data-sveltekit-preload-data="hover">Next</a> <a rel="next" href={`?page=${page + 1}`} data-sveltekit-preload-data="hover">Next</a>
{/if} {/if}
</nav> </nav>
</section> </section>
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/colors' as *; @use '$src/themes/colors' as *;
.profile { padding: $unit-2x 0; } .profile {
.header { display: flex; align-items: center; gap: $unit-2x; margin-bottom: $unit-2x; } padding: $unit-2x 0;
.avatar { width: 64px; height: 64px; border-radius: 50%; background: $grey-80; border: 1px solid $grey-75; object-fit: cover; } }
.sub { color: $grey-55; margin: 0; } .header {
.tabs { display: flex; gap: $unit-2x; margin-top: $unit-half; } display: flex;
.tabs a { text-decoration: none; color: inherit; padding-bottom: 2px; border-bottom: 2px solid transparent; } align-items: center;
.tabs a.active { border-color: #3366ff; color: #3366ff; } gap: $unit-2x;
.pagination { display: flex; gap: $unit-2x; padding: $unit-2x 0; } margin-bottom: $unit-2x;
.pagination a { text-decoration: none; } }
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: $grey-80;
border: 1px solid $grey-75;
object-fit: cover;
}
.sub {
color: $grey-55;
margin: 0;
}
.tabs {
display: flex;
gap: $unit-2x;
margin-top: $unit-half;
}
.tabs a {
text-decoration: none;
color: inherit;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.tabs a.active {
border-color: #3366ff;
color: #3366ff;
}
.pagination {
display: flex;
gap: $unit-2x;
padding: $unit-2x 0;
}
.pagination a {
text-decoration: none;
}
</style> </style>

1383
src/routes/teams/new/+page.svelte
View file

File diff suppressed because it is too large Load diff

2
src/themes/_spacing.scss
View file

@ -9,7 +9,7 @@ $desktop: 1920px;
$laptop: 1280px; $laptop: 1280px;
$tablet: 768px; $tablet: 768px;
$phone: 375px; $phone: 375px;
$grid-width: 720px; $grid-width: 780px;
$character-rep-height: 111px; $character-rep-height: 111px;
$summon-rep-height: 117px; $summon-rep-height: 117px;