progress
This commit is contained in:
@@ -146,26 +146,64 @@
|
||||
<p class="text-muted mb-0">No reviews yet. Be the first to review this game!</p>
|
||||
@else
|
||||
@foreach($game->reviews as $review)
|
||||
<div class="mb-4 pb-4 border-bottom border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div>
|
||||
<h6 class="mb-0">{{ $review->user->name }}</h6>
|
||||
<small class="text-muted">{{ $review->created_at->diffForHumans() }}</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rating-stars d-flex gap-1 me-2">
|
||||
@for($i = 1; $i <= 10; $i++)
|
||||
<i class="fas fa-star {{ $i <= $review->rating ? 'text-warning' : 'text-secondary' }}"></i>
|
||||
@endfor
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0">
|
||||
<a href="{{ route('profile.show', $review->user) }}" class="text-white text-decoration-none">
|
||||
{{ $review->user->name }}
|
||||
</a>
|
||||
</h6>
|
||||
<small class="text-muted">
|
||||
<i class="far fa-clock"></i> {{ $review->created_at->diffForHumans() }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
@if($review->recommended)
|
||||
<span class="badge bg-success">Recommended</span>
|
||||
@else
|
||||
<span class="badge bg-danger">Not Recommended</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rating-stars d-flex gap-1 me-2">
|
||||
@for($i = 1; $i <= 10; $i++)
|
||||
<i class="fas fa-star {{ $i <= $review->rating ? 'text-warning' : 'text-secondary' }}"></i>
|
||||
@endfor
|
||||
</div>
|
||||
@if($review->recommended)
|
||||
<span class="badge bg-success">Recommended</span>
|
||||
@else
|
||||
<span class="badge bg-danger">Not Recommended</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="review-content">
|
||||
{!! nl2br(e($review->content)) !!}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-dark border-top border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="{{ route('reviews.show', $review) }}" class="btn btn-link text-white p-0">
|
||||
Read full review
|
||||
</a>
|
||||
@if(auth()->id() === $review->user_id)
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ route('reviews.edit', $review) }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-edit"></i> Edit
|
||||
</a>
|
||||
<form action="{{ route('reviews.destroy', $review) }}" method="POST" class="d-inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Are you sure you want to delete this review?')">
|
||||
<i class="fas fa-trash"></i> Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-0">{{ $review->content }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
@@ -1,29 +1,48 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
{{ __('Profile') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
@extends('layouts.app')
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w-xl">
|
||||
@include('profile.partials.update-profile-information-form')
|
||||
@section('title', 'Edit Profile')
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0">Edit Profile</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ route('profile.update') }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w-xl">
|
||||
@include('profile.partials.update-password-form')
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" name="name" id="name" class="form-control bg-dark text-white @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required>
|
||||
@error('name')
|
||||
<div class="text-danger mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w-xl">
|
||||
@include('profile.partials.delete-user-form')
|
||||
<div class="mb-4">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" name="email" id="email" class="form-control bg-dark text-white @error('email') is-invalid @enderror" value="{{ old('email', $user->email) }}" required>
|
||||
@error('email')
|
||||
<div class="text-danger mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ route('profile.show') }}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left"></i> Back to Profile
|
||||
</a>
|
||||
<button type="submit" class="btn btn-gradient">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $user->name . "'s Reviews")
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h3 mb-0">{{ $user->name }}'s Reviews</h1>
|
||||
@if(auth()->id() === $user->id)
|
||||
<a href="{{ route('profile.show', $user) }}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left"></i> Back to Profile
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($reviews->isEmpty())
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="fas fa-comment-alt fa-3x mb-3"></i>
|
||||
<h3>No Reviews Yet</h3>
|
||||
<p class="text-muted">This user hasn't written any reviews yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="row">
|
||||
@foreach($reviews as $review)
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<h5 class="card-title mb-0">
|
||||
<a href="{{ route('games.show', $review->game) }}" class="text-white text-decoration-none">
|
||||
{{ $review->game->title }}
|
||||
</a>
|
||||
</h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge bg-primary me-2">
|
||||
<i class="fas fa-star"></i> {{ $review->rating }}/10
|
||||
</span>
|
||||
@if($review->recommended)
|
||||
<span class="badge bg-success">
|
||||
<i class="fas fa-thumbs-up"></i> Recommended
|
||||
</span>
|
||||
@else
|
||||
<span class="badge bg-danger">
|
||||
<i class="fas fa-thumbs-down"></i> Not Recommended
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text text-muted">
|
||||
<small>
|
||||
<i class="far fa-clock"></i> {{ $review->created_at->diffForHumans() }}
|
||||
</small>
|
||||
</p>
|
||||
<p class="card-text">{{ Str::limit($review->content, 200) }}</p>
|
||||
<a href="{{ route('reviews.show', $review) }}" class="btn btn-outline-primary">
|
||||
Read Full Review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center mt-4">
|
||||
{{ $reviews->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,142 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $user->name . "'s Profile")
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<i class="fas fa-user-circle fa-5x"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{{ $user->name }}</h3>
|
||||
<p class="text-muted">{{ $user->email }}</p>
|
||||
@if(auth()->id() === $user->id)
|
||||
<a href="{{ route('profile.edit') }}" class="btn btn-outline-primary">
|
||||
<i class="fas fa-edit"></i> Edit Profile
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Activity Summary</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Reviews</span>
|
||||
<span class="badge bg-primary">{{ $user->reviews()->count() }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Ratings</span>
|
||||
<span class="badge bg-primary">{{ $user->ratings()->count() }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Lists</span>
|
||||
<span class="badge bg-primary">{{ $user->lists()->count() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Recent Activity</h5>
|
||||
@if(auth()->id() === $user->id)
|
||||
<a href="{{ route('profile.reviews') }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-list"></i> View All Reviews
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if($recentActivity->isEmpty())
|
||||
<div class="text-center py-4">
|
||||
<i class="fas fa-history fa-3x mb-3 text-muted"></i>
|
||||
<p class="text-muted">No recent activity</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach($recentActivity as $activity)
|
||||
@if($activity instanceof \App\Models\Review)
|
||||
<div class="list-group-item bg-dark text-white border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
<a href="{{ route('games.show', $activity->game) }}" class="text-white text-decoration-none">
|
||||
{{ $activity->game->title }}
|
||||
</a>
|
||||
</h6>
|
||||
<p class="mb-1 text-muted">
|
||||
<i class="fas fa-star text-warning"></i> Rated {{ $activity->rating }}/10
|
||||
@if($activity->recommended)
|
||||
<span class="badge bg-success ms-2">
|
||||
<i class="fas fa-thumbs-up"></i> Recommended
|
||||
</span>
|
||||
@else
|
||||
<span class="badge bg-danger ms-2">
|
||||
<i class="fas fa-thumbs-down"></i> Not Recommended
|
||||
</span>
|
||||
@endif
|
||||
</p>
|
||||
<small class="text-muted">
|
||||
<i class="far fa-clock"></i> {{ $activity->created_at->diffForHumans() }}
|
||||
</small>
|
||||
</div>
|
||||
<a href="{{ route('reviews.show', $activity) }}" class="btn btn-outline-primary btn-sm">
|
||||
View Review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($activity instanceof \App\Models\Rating)
|
||||
<div class="list-group-item bg-dark text-white border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
<a href="{{ route('games.show', $activity->game) }}" class="text-white text-decoration-none">
|
||||
{{ $activity->game->title }}
|
||||
</a>
|
||||
</h6>
|
||||
<p class="mb-1 text-muted">
|
||||
<i class="fas fa-star text-warning"></i> Rated {{ $activity->rating }}/10
|
||||
</p>
|
||||
<small class="text-muted">
|
||||
<i class="far fa-clock"></i> {{ $activity->created_at->diffForHumans() }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($activity instanceof \App\Models\GameList)
|
||||
<div class="list-group-item bg-dark text-white border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
<a href="{{ route('lists.show', $activity) }}" class="text-white text-decoration-none">
|
||||
{{ $activity->name }}
|
||||
</a>
|
||||
</h6>
|
||||
<p class="mb-1 text-muted">
|
||||
<i class="fas fa-list"></i> {{ $activity->games()->count() }} games
|
||||
</p>
|
||||
<small class="text-muted">
|
||||
<i class="far fa-clock"></i> {{ $activity->created_at->diffForHumans() }}
|
||||
</small>
|
||||
</div>
|
||||
<a href="{{ route('lists.show', $activity) }}" class="btn btn-outline-primary btn-sm">
|
||||
View List
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -1,206 +1,101 @@
|
||||
@csrf
|
||||
@extends('layouts.app')
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="content" class="form-label">Review</label>
|
||||
<textarea name="content" id="content" rows="5"
|
||||
class="form-control bg-dark text-white @error('content') is-invalid @enderror"
|
||||
required>{{ old('content', $review->content ?? '') }}</textarea>
|
||||
@error('content')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
@section('title', isset($review) ? 'Edit Review' : 'Write a Review')
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Rating</label>
|
||||
<div class="rating-container">
|
||||
<div class="rating-stars d-flex gap-1">
|
||||
@for($i = 1; $i <= 10; $i++)
|
||||
<div class="rating-item" data-rating="{{ $i }}">
|
||||
<input type="radio" name="rating" id="rating{{ $i }}" value="{{ $i }}"
|
||||
class="rating-input" {{ old('rating', $review->rating ?? '') == $i ? 'checked' : '' }}>
|
||||
<label for="rating{{ $i }}" class="rating-star">
|
||||
<i class="fas fa-star"></i>
|
||||
</label>
|
||||
<span class="rating-number">{{ $i }}</span>
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0">{{ isset($review) ? 'Edit Review' : 'Write a Review' }}</h4>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="rating-value mt-2 text-muted">
|
||||
<span class="current-rating">{{ old('rating', $review->rating ?? '0') }}</span>/10
|
||||
<div class="card-body">
|
||||
<form action="{{ isset($review) ? route('reviews.update', $review) : route('games.reviews.store', $game) }}" method="POST">
|
||||
@csrf
|
||||
@if(isset($review))
|
||||
@method('PUT')
|
||||
@endif
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="rating" class="form-label">Rating</label>
|
||||
<select name="rating" id="rating" class="star-rating" required>
|
||||
<option value="">Select a rating</option>
|
||||
<option value="10" {{ isset($review) && $review->rating == 10 ? 'selected' : '' }}>10 - Masterpiece</option>
|
||||
<option value="9" {{ isset($review) && $review->rating == 9 ? 'selected' : '' }}>9 - Amazing</option>
|
||||
<option value="8" {{ isset($review) && $review->rating == 8 ? 'selected' : '' }}>8 - Great</option>
|
||||
<option value="7" {{ isset($review) && $review->rating == 7 ? 'selected' : '' }}>7 - Good</option>
|
||||
<option value="6" {{ isset($review) && $review->rating == 6 ? 'selected' : '' }}>6 - Fair</option>
|
||||
<option value="5" {{ isset($review) && $review->rating == 5 ? 'selected' : '' }}>5 - Average</option>
|
||||
<option value="4" {{ isset($review) && $review->rating == 4 ? 'selected' : '' }}>4 - Below Average</option>
|
||||
<option value="3" {{ isset($review) && $review->rating == 3 ? 'selected' : '' }}>3 - Poor</option>
|
||||
<option value="2" {{ isset($review) && $review->rating == 2 ? 'selected' : '' }}>2 - Bad</option>
|
||||
<option value="1" {{ isset($review) && $review->rating == 1 ? 'selected' : '' }}>1 - Terrible</option>
|
||||
</select>
|
||||
@error('rating')
|
||||
<div class="text-danger mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="content" class="form-label">Review</label>
|
||||
<textarea name="content" id="content" class="form-control bg-dark text-white @error('content') is-invalid @enderror" rows="10" required>{{ old('content', $review->content ?? '') }}</textarea>
|
||||
@error('content')
|
||||
<div class="text-danger mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="recommended" id="recommended" class="form-check-input" value="1" {{ isset($review) && $review->recommended ? 'checked' : '' }}>
|
||||
<label for="recommended" class="form-check-label">I recommend this game</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-gradient">
|
||||
{{ isset($review) ? 'Update Review' : 'Submit Review' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@error('rating')
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Recommendation</label>
|
||||
<div class="recommendation-buttons d-flex gap-3">
|
||||
<input type="radio" name="recommended" id="recommended1" value="1" class="recommendation-input"
|
||||
{{ old('recommended', $review->recommended ?? '') == 1 ? 'checked' : '' }}>
|
||||
<label for="recommended1" class="recommendation-button btn btn-outline-success">
|
||||
<i class="fas fa-thumbs-up me-2"></i> Recommended
|
||||
</label>
|
||||
|
||||
<input type="radio" name="recommended" id="recommended0" value="0" class="recommendation-input"
|
||||
{{ old('recommended', $review->recommended ?? '') == 0 ? 'checked' : '' }}>
|
||||
<label for="recommended0" class="recommendation-button btn btn-outline-danger">
|
||||
<i class="fas fa-thumbs-down me-2"></i> Not Recommended
|
||||
</label>
|
||||
</div>
|
||||
@error('recommended')
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-gradient">
|
||||
<i class="fas fa-paper-plane me-2"></i> {{ isset($review) ? 'Update Review' : 'Post Review' }}
|
||||
</button>
|
||||
|
||||
@push('styles')
|
||||
<link href="{{ asset('css/star-rating.css') }}" rel="stylesheet">
|
||||
<style>
|
||||
.rating-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rating-stars {
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rating-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rating-star {
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.rating-number {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.rating-item:hover .rating-number {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rating-item:hover .rating-star,
|
||||
.rating-item:hover ~ .rating-item .rating-star,
|
||||
.rating-input:checked ~ .rating-item .rating-star {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.rating-input:checked + .rating-star {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.rating-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recommendation-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recommendation-button {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.recommendation-button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.recommendation-input:checked + .recommendation-button {
|
||||
background-color: var(--bs-btn-bg);
|
||||
color: var(--bs-btn-color);
|
||||
}
|
||||
|
||||
#recommended1:checked + .recommendation-button {
|
||||
background-color: var(--bs-success);
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
|
||||
#recommended0:checked + .recommendation-button {
|
||||
background-color: var(--bs-danger);
|
||||
border-color: var(--bs-danger);
|
||||
.star-rating {
|
||||
--gl-star-color: #fdd835;
|
||||
--gl-star-color-inactive: #dcdce6;
|
||||
--gl-star-size: 32px;
|
||||
--gl-tooltip-border-radius: 4px;
|
||||
--gl-tooltip-font-size: 1rem;
|
||||
--gl-tooltip-font-weight: 400;
|
||||
--gl-tooltip-line-height: 1;
|
||||
--gl-tooltip-margin: 12px;
|
||||
--gl-tooltip-padding: .5em 1em;
|
||||
--gl-tooltip-background: rgba(17,17,17, .9);
|
||||
--gl-tooltip-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="{{ asset('js/star-rating.js') }}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const ratingContainer = document.querySelector('.rating-stars');
|
||||
const currentRating = document.querySelector('.current-rating');
|
||||
const ratingInputs = document.querySelectorAll('.rating-input');
|
||||
|
||||
ratingContainer.addEventListener('mouseover', function(e) {
|
||||
const ratingItem = e.target.closest('.rating-item');
|
||||
if (!ratingItem) return;
|
||||
|
||||
const rating = ratingItem.dataset.rating;
|
||||
currentRating.textContent = rating;
|
||||
|
||||
// Highlight stars up to the hovered rating
|
||||
const stars = document.querySelectorAll('.rating-star');
|
||||
stars.forEach((star, index) => {
|
||||
if (index < rating) {
|
||||
star.style.color = '#ffc107';
|
||||
} else {
|
||||
star.style.color = '#6c757d';
|
||||
}
|
||||
});
|
||||
var stars = new StarRating('.star-rating', {
|
||||
classNames: {
|
||||
active: "gl-active",
|
||||
base: "gl-star-rating",
|
||||
selected: "gl-selected",
|
||||
},
|
||||
clearable: true,
|
||||
maxStars: 10,
|
||||
tooltip: 'Select a Rating'
|
||||
});
|
||||
|
||||
ratingContainer.addEventListener('mouseout', function() {
|
||||
const checkedInput = document.querySelector('.rating-input:checked');
|
||||
if (checkedInput) {
|
||||
currentRating.textContent = checkedInput.value;
|
||||
// Restore the checked state colors
|
||||
const stars = document.querySelectorAll('.rating-star');
|
||||
stars.forEach((star, index) => {
|
||||
if (index < checkedInput.value) {
|
||||
star.style.color = '#ffc107';
|
||||
} else {
|
||||
star.style.color = '#6c757d';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
currentRating.textContent = '0';
|
||||
// Reset all stars to default color
|
||||
const stars = document.querySelectorAll('.rating-star');
|
||||
stars.forEach(star => {
|
||||
star.style.color = '#6c757d';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Update current rating when a star is clicked
|
||||
ratingInputs.forEach(input => {
|
||||
input.addEventListener('change', function() {
|
||||
currentRating.textContent = this.value;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endpush
|
||||
@endsection
|
||||
@@ -0,0 +1,102 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $review->game->title . ' - Review by ' . $review->user->name)
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h4 class="mb-0">{{ $review->game->title }}</h4>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rating-stars d-flex gap-1 me-2">
|
||||
@for($i = 1; $i <= 10; $i++)
|
||||
<i class="fas fa-star {{ $i <= $review->rating ? 'text-warning' : 'text-secondary' }}"></i>
|
||||
@endfor
|
||||
</div>
|
||||
@if($review->recommended)
|
||||
<span class="badge bg-success">Recommended</span>
|
||||
@else
|
||||
<span class="badge bg-danger">Not Recommended</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-user-circle fa-2x"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0">
|
||||
<a href="{{ route('profile.show', $review->user) }}" class="text-white text-decoration-none">
|
||||
{{ $review->user->name }}
|
||||
</a>
|
||||
</h6>
|
||||
<small class="text-muted">
|
||||
<i class="far fa-clock"></i> {{ $review->created_at->diffForHumans() }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-content">
|
||||
{!! nl2br(e($review->content)) !!}
|
||||
</div>
|
||||
</div>
|
||||
@if(auth()->id() === $review->user_id)
|
||||
<div class="card-footer bg-dark border-top border-secondary">
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<a href="{{ route('reviews.edit', $review) }}" class="btn btn-outline-primary">
|
||||
<i class="fas fa-edit"></i> Edit Review
|
||||
</a>
|
||||
<form action="{{ route('reviews.destroy', $review) }}" method="POST" class="d-inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to delete this review?')">
|
||||
<i class="fas fa-trash"></i> Delete Review
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-dark text-white">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Game Details</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-4">
|
||||
<img src="{{ $review->game->cover_url }}" alt="{{ $review->game->title }}" class="img-fluid rounded">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted mb-2">Platforms</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach($review->game->platforms as $platform)
|
||||
<span class="badge bg-secondary">{{ $platform->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted mb-2">Genres</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach($review->game->genres as $genre)
|
||||
<span class="badge bg-primary">{{ $genre->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted mb-2">Release Date</h6>
|
||||
<p class="mb-0">{{ $review->game->first_release_date?->format('F j, Y') ?? 'TBA' }}</p>
|
||||
</div>
|
||||
<a href="{{ route('games.show', $review->game) }}" class="btn btn-outline-primary w-100">
|
||||
<i class="fas fa-gamepad"></i> View Game
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user