More shop stuff.

This commit is contained in:
Graphictoria 2022-07-22 00:13:13 -04:00
parent 4d888e938e
commit a680360ef7
3 changed files with 65 additions and 14 deletions

View File

@ -118,20 +118,20 @@ class Feed extends Component {
(
this.state.feedPosts.length > 0 ?
<>
<div className="card d-flex">
<div className="card">
{
this.state.feedPosts.map(({ postId, poster, time, content }, index) =>
<>
<div className="row p-2" onMouseEnter={ () => this.setState({ mouseHover: index }) } onMouseLeave={ () => this.setState({ mouseHover: -1 }) }>
<div className="col-3 col-sm-2 col-md-1">
<div className="d-flex p-2" onMouseEnter={ () => this.setState({ mouseHover: index }) } onMouseLeave={ () => this.setState({ mouseHover: -1 }) }>
<div className="me-2">
<a href={ buildGenericApiUrl('www', (poster.type == 'User' ? `users/${poster.name}/profile` : `groups/${poster.id}`)) }>
{ poster.type == 'User' ?
<img src={ poster.thumbnail } width="90" height="90" className="img-fluid border graphictora-user-circle" /> :
<img src={ poster.thumbnail } width="90" height="90" className="img-fluid" />
<img src={ poster.thumbnail } alt={ poster.name } width="50" height="50" className="border graphictora-feed-user-circle" /> :
<img src={ poster.thumbnail } alt={ poster.name } width="50" height="50" className="img-fluid" />
}
</a>
</div>
<div className="col-9 col-sm-10 col-md-11">
<div className="flex-fill">
<div className="d-flex">
<a href={ buildGenericApiUrl('www', (poster.type == 'User' ? `users/${poster.name}/profile` : `groups/${poster.id}`)) } className="text-decoration-none fw-bold me-auto">{ poster.name }{ poster.icon ? <>&nbsp;<i className={ poster.icon }></i></> : null }</a>
{ this.state.mouseHover == index ? <a href={ buildGenericApiUrl('www', `report/user-wall/${postId}`) } target="_blank" className="text-decoration-none link-danger me-2">Report <i className="fa-solid fa-circle-exclamation"></i></a> : null }

View File

@ -337,6 +337,14 @@ html {
background-size: cover;
}
.graphictora-feed-user-circle {
border-radius: 50%;
background: url("/Images/User-Image-Vignette.png");
background-size: cover;
width: 50px;
height: 50px;
}
// Border
.border {

View File

@ -6,22 +6,65 @@
@endsection
@section('content')
<div class="container graphictoria-center-vh">
<div class="container pt-5">
@if(!$asset->approved)
<div class="alert alert-danger text-center"><strong>This asset is pending approval.</strong> It will not appear in-game and cannot be voted on or purchased at this time.</div>
@endif
<div class="card shadow-sm">
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="col-5">
<img src={{ asset('images/testing/hat.png') }} alt="{{ $asset->name }}" class="border img-fluid" />
</div>
<div class="col-6">
<h4 class="mb-0">{{ $asset->name }}</h4>
<div class="col-7">
<h3 class="mb-0">{{ $asset->name }}</h3>
{{-- TODO: XlXi: url to user's profile --}}
<p>By: {{ $asset->user->username }}<p>
<br />
<p>Type: {{ $asset->typeString() }}</p>
<p>Description:</p>
<p>By {{ $asset->user->username }}</p>
<hr />
{{-- TODO: XlXi: limiteds/trading --}}
<div class="row mt-2">
<div class="col-3 fw-bold">
<p>Price</p>
</div>
<div class="col-9 d-flex">
@if( $asset->onSale )
<h4 class="my-auto" style="color:#e59800!important;font-weight:bold">
<img src="{{ asset('images/symbols/token.svg') }}" height="32" width="32" class="img-fluid me-1" style="margin-top:-1px" />{{ \App\Helpers\NumberHelper::Abbreviate(Auth::user()->tokens) }}</h4>
</h4>
@endif
@php
$buttonText = 'Buy';
$buttonClass = 'success';
// TODO: XlXi: Owned items
if(!$asset->onSale) {
$buttonText = 'Offsale';
$buttonClass = 'secondary';
}
@endphp
<button class="ms-auto px-5 btn btn-lg btn-{{ $buttonClass }}" {{ !$asset->onSale ? 'disabled' : '' }}>{{ $buttonText }}</button>
</div>
</div>
<div class="row mt-2">
<div class="col-3 fw-bold">
<p>Type</p>
</div>
<div class="col-9">
<p>{{ $asset->typeString() }}</p>
</div>
</div>
<div class="row mt-2">
<div class="col-3 fw-bold">
<p>Description</p>
</div>
<div class="col-9">
@if ( $asset->description )
<p>{{ $asset->description }}</p>
@else
<p class="text-muted">This item has no description.</p>
@endif
</div>
</div>
</div>
</div>
</div>