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

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

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

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

@ -95,7 +95,6 @@
}
.actions-section {
margin-top: $unit-2x;
padding: $unit-2x;
padding-bottom: $unit-2x;
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;
background: transparent;
border: none;
border-radius: $item-corner;
border-radius: $card-corner;
cursor: pointer;
transition: all 0.2s ease;
@ -37,7 +37,7 @@
position: absolute;
inset: 0;
background: $grey-100;
border-radius: $item-corner;
border-radius: $card-corner;
opacity: 0;
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';
.wrapper {
display: flex;
justify-content: center;
display: flex;
justify-content: center;
&.raid {
width: 100%;
}
&.raid {
width: 100%;
}
@include mixins.breakpoint(small-tablet) {
width: 100%;
}
@include mixins.breakpoint(small-tablet) {
width: 100%;
}
}
.segmentedControl {
display: inline-flex;
padding: 3px;
position: relative;
gap: spacing.$unit-half;
user-select: none;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: inline-flex;
position: relative;
gap: spacing.$unit-half;
user-select: none;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@include mixins.breakpoint(small-tablet) {
background: var(--card-bg);
border-radius: 100px;
}
@include mixins.breakpoint(small-tablet) {
background: var(--card-bg);
border-radius: 100px;
}
&.blended {
background: var(--input-bound-bg);
border-radius: layout.$full-corner;
}
&.blended {
background: var(--input-bound-bg);
border-radius: layout.$full-corner;
}
&.background {
background: var(--input-bg);
border-radius: layout.$full-corner;
}
&.background {
background: var(--input-bg);
border-radius: layout.$full-corner;
}
&.grow {
flex-grow: 1;
}
&.grow {
flex-grow: 1;
}
&.gap {
gap: spacing.$unit;
}
&.gap {
gap: spacing.$unit-2x;
}
&.raid {
width: 100%;
}
&.raid {
width: 100%;
}
// Element colors
&.fire {
[data-state='checked'] {
background: var(--fire-bg);
color: var(--fire-text);
}
// Element colors
&.fire {
[data-state='checked'] {
background: var(--fire-bg);
color: var(--fire-text);
}
button:hover {
background: var(--fire-hover-bg);
color: var(--fire-hover-text);
}
}
button:hover {
background: var(--fire-hover-bg);
color: var(--fire-hover-text);
}
}
&.water {
[data-state='checked'] {
background: var(--water-bg);
color: var(--water-text);
}
&.water {
[data-state='checked'] {
background: var(--water-bg);
color: var(--water-text);
}
button:hover {
background: var(--water-hover-bg);
color: var(--water-hover-text);
}
}
button:hover {
background: var(--water-hover-bg);
color: var(--water-hover-text);
}
}
&.earth {
[data-state='checked'] {
background: var(--earth-bg);
color: var(--earth-text);
}
&.earth {
[data-state='checked'] {
background: var(--earth-bg);
color: var(--earth-text);
}
button:hover {
background: var(--earth-hover-bg);
color: var(--earth-hover-text);
}
}
button:hover {
background: var(--earth-hover-bg);
color: var(--earth-hover-text);
}
}
&.wind {
[data-state='checked'] {
background: var(--wind-bg);
color: var(--wind-text);
}
&.wind {
[data-state='checked'] {
background: var(--wind-bg);
color: var(--wind-text);
}
button:hover {
background: var(--wind-hover-bg);
color: var(--wind-hover-text);
}
}
button:hover {
background: var(--wind-hover-bg);
color: var(--wind-hover-text);
}
}
&.light {
[data-state='checked'] {
background: var(--light-bg);
color: var(--light-text);
}
&.light {
[data-state='checked'] {
background: var(--light-bg);
color: var(--light-text);
}
button:hover {
background: var(--light-hover-bg);
color: var(--light-hover-text);
}
}
button:hover {
background: var(--light-hover-bg);
color: var(--light-hover-text);
}
}
&.dark {
[data-state='checked'] {
background: var(--dark-bg);
color: var(--dark-text);
}
&.dark {
[data-state='checked'] {
background: var(--dark-bg);
color: var(--dark-text);
}
button:hover {
background: var(--dark-hover-bg);
color: var(--dark-hover-text);
}
}
}
button:hover {
background: var(--dark-hover-bg);
color: var(--dark-hover-text);
}
}
}

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

@ -1,65 +1,113 @@
<script lang="ts">
import type { PageData } from './$types'
import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
import type { PageData } from './$types'
import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
const { data } = $props() as { data: PageData }
const page = data.page || 1
const totalPages = data.totalPages || undefined
const tab = data.tab || 'teams'
const isOwner = data.isOwner || false
const { data } = $props() as { data: PageData }
const page = data.page || 1
const totalPages = data.totalPages || undefined
const tab = data.tab || 'teams'
const isOwner = data.isOwner || false
const avatarFile = data.user?.avatar?.picture || ''
function ensurePng(name: string) {
return /\.png$/i.test(name) ? name : `${name}.png`
}
function to2x(name: string) {
return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
}
const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : ''
const avatarFile = data.user?.avatar?.picture || ''
function ensurePng(name: string) {
return /\.png$/i.test(name) ? name : `${name}.png`
}
function to2x(name: string) {
return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
}
const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : ''
</script>
<section class="profile">
<header class="header">
{#if data.user?.avatar?.picture}
<img class="avatar" alt={`Avatar of ${data.user.username}`} src={avatarSrc} srcset={avatarSrcSet} width="64" height="64" />
{:else}
<div class="avatar" aria-hidden="true"></div>
{/if}
<div>
<h1>@{data.user.username}</h1>
<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>
<header class="header">
{#if data.user?.avatar?.picture}
<img
class="avatar"
alt={`Avatar of ${data.user.username}`}
src={avatarSrc}
srcset={avatarSrcSet}
width="64"
height="64"
/>
{:else}
<div class="avatar" aria-hidden="true"></div>
{/if}
<div>
<h1>{data.user.username}</h1>
<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">
{#if page > 1}
<a rel="prev" href={`?page=${page - 1}`} data-sveltekit-preload-data="hover">Previous</a>
{/if}
{#if totalPages && page < totalPages}
<a rel="next" href={`?page=${page + 1}`} data-sveltekit-preload-data="hover">Next</a>
{/if}
</nav>
<nav class="pagination" aria-label="Pagination">
{#if page > 1}
<a rel="prev" href={`?page=${page - 1}`} data-sveltekit-preload-data="hover">Previous</a>
{/if}
{#if totalPages && page < totalPages}
<a rel="next" href={`?page=${page + 1}`} data-sveltekit-preload-data="hover">Next</a>
{/if}
</nav>
</section>
<style lang="scss">
@use '$src/themes/spacing' as *;
@use '$src/themes/colors' as *;
@use '$src/themes/spacing' as *;
@use '$src/themes/colors' as *;
.profile { padding: $unit-2x 0; }
.header { display: flex; align-items: center; gap: $unit-2x; margin-bottom: $unit-2x; }
.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; }
.profile {
padding: $unit-2x 0;
}
.header {
display: flex;
align-items: center;
gap: $unit-2x;
margin-bottom: $unit-2x;
}
.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>

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;
$tablet: 768px;
$phone: 375px;
$grid-width: 720px;
$grid-width: 780px;
$character-rep-height: 111px;
$summon-rep-height: 117px;