Skip to content

Commit

Permalink
fix: improve user profile, character page row styling on smaller view…
Browse files Browse the repository at this point in the history 
…ports/mobile (#1099)

- User profile rows no longer are so small that they break heading text on >= 992px viewports (as their biggest breakpoint is lg)
- Character information pages (image info and stats tab) have also had rows adjusted to prevent breaking headings
  • Loading branch information
@liwoyadan
liwoyadan authored Oct 29, 2024
1 parent eb63b11 commit 79397de
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 42 deletions.
30 changes: 15 additions & 15 deletions resources/views/character/_image_info.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,25 @@

{{-- Basic info --}}
<div class="tab-pane fade show active" id="info-{{ $image->id }}">
<div class="row">
<div class="col-lg-4 col-md-6 col-4">
<div class="row no-gutters">
<div class="col-lg-4 col-5">
<h5>Species</h5>
</div>
<div class="col-lg-8 col-md-6 col-8">{!! $image->species_id ? $image->species->displayName : 'None' !!}</div>
<div class="col-lg-8 col-7 pl-1">{!! $image->species_id ? $image->species->displayName : 'None' !!}</div>
</div>
@if ($image->subtype_id)
<div class="row">
<div class="col-lg-4 col-md-6 col-4">
<div class="row no-gutters">
<div class="col-lg-4 col-5">
<h5>Subtype</h5>
</div>
<div class="col-lg-8 col-md-6 col-8">{!! $image->subtype_id ? $image->subtype->displayName : 'None' !!}</div>
<div class="col-lg-8 col-7 pl-1">{!! $image->subtype_id ? $image->subtype->displayName : 'None' !!}</div>
</div>
@endif
<div class="row">
<div class="col-lg-4 col-md-6 col-4">
<div class="row no-gutters">
<div class="col-lg-4 col-5">
<h5>Rarity</h5>
</div>
<div class="col-lg-8 col-md-6 col-8">{!! $image->rarity_id ? $image->rarity->displayName : 'None' !!}</div>
<div class="col-lg-8 col-7 pl-1">{!! $image->rarity_id ? $image->rarity->displayName : 'None' !!}</div>
</div>

<div class="mb-3">
Expand Down Expand Up @@ -142,21 +142,21 @@
{{-- Image credits --}}
<div class="tab-pane fade" id="credits-{{ $image->id }}">

<div class="row mb-2">
<div class="col-lg-4 col-md-6 col-4">
<div class="row no-gutters mb-2">
<div class="col-lg-4 col-4">
<h5>Design</h5>
</div>
<div class="col-lg-8 col-md-6 col-8">
<div class="col-lg-8 col-8">
@foreach ($image->designers as $designer)
<div>{!! $designer->displayLink() !!}</div>
@endforeach
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-4">
<div class="row no-gutters">
<div class="col-lg-4 col-4">
<h5>Art</h5>
</div>
<div class="col-lg-8 col-md-6 col-8">
<div class="col-lg-8 col-8">
@foreach ($image->artists as $artist)
<div>{!! $artist->displayLink() !!}</div>
@endforeach
Expand Down
30 changes: 15 additions & 15 deletions resources/views/character/_tab_stats.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<div class="row">
<div class="col-lg-3 col-4">
<div class="row no-gutters">
<div class="col-lg-3 col-5">
<h5>Owner</h5>
</div>
<div class="col-lg-9 col-8">{!! $character->displayOwner !!}</div>
<div class="col-lg-9 col-7">{!! $character->displayOwner !!}</div>
</div>
@if (!$character->is_myo_slot)
<div class="row">
<div class="col-lg-3 col-4">
<div class="row no-gutters">
<div class="col-lg-3 col-5">
<h5>Category</h5>
</div>
<div class="col-lg-9 col-8">{!! $character->category->displayName !!}</div>
<div class="col-lg-9 col-7">{!! $character->category->displayName !!}</div>
</div>
@endif
<div class="row">
<div class="col-lg-3 col-4">
<div class="row no-gutters">
<div class="col-lg-3 col-5">
<h5 class="mb-0">Created</h5>
</div>
<div class="col-lg-9 col-8">{!! format_date($character->created_at) !!}</div>
<div class="col-lg-9 col-7">{!! format_date($character->created_at) !!}</div>
</div>

<hr />
Expand All @@ -32,21 +32,21 @@
<i class="text-{{ $character->is_sellable ? 'success far fa-circle' : 'danger fas fa-times' }} fa-fw mr-2"></i> {{ $character->is_sellable ? 'Can' : 'Cannot' }} be sold
</h5>
@if ($character->sale_value > 0)
<div class="row">
<div class="col-lg-3 col-4">
<div class="row no-gutters">
<div class="col-lg-3 col-5">
<h5>Sale Value</h5>
</div>
<div class="col-lg-9 col-8">
<div class="col-lg-9 col-7 pl-1">
{{ Config::get('lorekeeper.settings.currency_symbol') }}{{ $character->sale_value }}
</div>
</div>
@endif
@if ($character->transferrable_at && $character->transferrable_at->isFuture())
<div class="row">
<div class="col-lg-3 col-4">
<div class="row no-gutters">
<div class="col-lg-3 col-5">
<h5>Cooldown</h5>
</div>
<div class="col-lg-9 col-8">Cannot be transferred until {!! format_date($character->transferrable_at) !!}</div>
<div class="col-lg-9 col-7 pl-1">Cannot be transferred until {!! format_date($character->transferrable_at) !!}</div>
</div>
@endif
@if (Auth::check() && Auth::user()->hasPower('manage_characters'))
Expand Down
24 changes: 12 additions & 12 deletions resources/views/user/_profile_content.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@

<!-- User Information -->
<div class="row no-gutters">
<div class="row col-sm-5">
<div class="col-lg-2 col-md-3 col-4">
<div class="row no-gutters col-sm-5">
<div class="col-lg-3 col-md-3 col-4">
<h5>Alias</h5>
</div>
<div class="col-lg-10 col-md-9 col-8">
<div class="col-lg-9 col-md-9 col-8">
{!! $user->displayAlias !!}
@if (count($aliases) > 1 && config('lorekeeper.extensions.aliases_on_userpage'))
<a class="small collapse-toggle collapsed" href="#otherUserAliases" data-toggle="collapse">&nbsp;</a>
Expand All @@ -46,24 +46,24 @@
@endif
</div>
</div>
<div class="row col-sm-7">
<div class="col-md-3 col-4">
<div class="row no-gutters col-sm-7">
<div class="col-md-4 col-4">
<h5>Joined</h5>
</div>
<div class="col-md-9 col-8">{!! format_date($user->created_at, false) !!} ({{ $user->created_at->diffForHumans() }})</div>
<div class="col-md-8 col-8">{!! format_date($user->created_at, false) !!} ({{ $user->created_at->diffForHumans() }})</div>
</div>
<div class="row col-sm-5">
<div class="col-lg-2 col-md-3 col-4">
<div class="row no-gutters col-sm-5">
<div class="col-lg-3 col-md-3 col-4">
<h5>Rank</h5>
</div>
<div class="col-lg-10 col-md-9 col-8">{!! $user->rank->displayName !!} {!! add_help($user->rank->parsed_description) !!}</div>
<div class="col-lg-9 col-md-9 col-8">{!! $user->rank->displayName !!} {!! add_help($user->rank->parsed_description) !!}</div>
</div>
@if ($user->birthdayDisplay && isset($user->birthday))
<div class="row col-sm-7">
<div class="col-md-3 col-4">
<div class="row no-gutters col-sm-7">
<div class="col-md-4 col-4">
<h5>Birthday</h5>
</div>
<div class="col-md-9 col-8">{!! $user->birthdayDisplay !!}</div>
<div class="col-md-8 col-8">{!! $user->birthdayDisplay !!}</div>
</div>
@endif
</div>
Expand Down

0 comments on commit 79397de

Please sign in to comment.