add: donation scss and package descriptions

This commit is contained in:
HDVinnie
2024-09-16 20:54:43 -04:00
parent 50d4a129d4
commit f890a61771
12 changed files with 208 additions and 48 deletions

View File

@@ -31,8 +31,13 @@ class StoreDonationPackageRequest extends FormRequest
],
'name' => [
'required',
'string',
'unique:donation_packages',
],
'description' => [
'required',
'string',
],
'cost' => [
'required',
'numeric',

View File

@@ -31,6 +31,11 @@ class UpdateDonationPackageRequest extends FormRequest
],
'name' => [
'required',
'string',
],
'description' => [
'required',
'string',
],
'cost' => [
'required',

View File

@@ -22,15 +22,11 @@ use Illuminate\Database\Eloquent\Model;
* App\Models\Donation.
*
* @property int $id
* @property float $cost
* @property int $upload_value
* @property int $invite_value
* @property int $bonus_value
* @property int $donor_value
* @property int $user_id
* @property int $gifted_user_id
* @property string $transaction
* @property int $status
* @property int $package_id
* @property string $transaction
* @property bool $is_gifted
* @property \Illuminate\Support\Carbon $starts_at
* @property \Illuminate\Support\Carbon $ends_at

View File

@@ -18,6 +18,17 @@ namespace App\Models;
use Illuminate\Database\Eloquent\Model;
/**
* App\Models\DonationGateway.
*
* @property int $id
* @property int $position
* @property string $name
* @property string $address
* @property bool $is_active
* @property \Illuminate\Support\Carbon $created_at
* @property \Illuminate\Support\Carbon $updated_at
*/
class DonationGateway extends Model
{
/**

View File

@@ -18,6 +18,22 @@ namespace App\Models;
use Illuminate\Database\Eloquent\Model;
/**
* App\Models\DonationPackage.
*
* @property int $id
* @property int $position
* @property string $name
* @property string $description
* @property float $cost
* @property int $upload_value
* @property int $invite_value
* @property int $bonus_value
* @property int $donor_value
* @property bool $is_active
* @property \Illuminate\Support\Carbon $created_at
* @property \Illuminate\Support\Carbon $updated_at
*/
class DonationPackage extends Model
{
/**
@@ -30,13 +46,14 @@ class DonationPackage extends Model
/**
* Get the attributes that should be cast.
*
* @return array{position: 'int', name: 'string', cost: 'decimal:2', upload_value: 'int', invite_value: 'int', bonus_value: 'int', donor_value: 'int', is_active: 'bool', created_at: 'datetime', updated_at: 'datetime'}
* @return array{position: 'int', name: 'string', description: 'string', cost: 'decimal:2', upload_value: 'int', invite_value: 'int', bonus_value: 'int', donor_value: 'int', is_active: 'bool', created_at: 'datetime', updated_at: 'datetime'}
*/
protected function casts(): array
{
return [
'position' => 'int',
'name' => 'string',
'description' => 'string',
'cost' => 'decimal:2',
'upload_value' => 'int',
'invite_value' => 'int',

View File

@@ -22,7 +22,7 @@ return [
| Configure site to use Donation System
|
*/
'is_enabled' => false,
'is_enabled' => true,
'monthly_goal' => 100,
'currency' => 'USD',
'description' => 'Help keep the site alive by donating to our monthly goal.',

View File

@@ -27,13 +27,14 @@ return new class () extends Migration {
Schema::create('donation_packages', function (Blueprint $table): void {
$table->increments('id');
$table->integer('position')->index();
$table->string('name')->index();
$table->string('name');
$table->text('description');
$table->decimal('cost', 6, 2);
$table->unsignedBigInteger('upload_value')->nullable();
$table->unsignedBigInteger('invite_value')->nullable();
$table->unsignedBigInteger('bonus_value')->nullable();
$table->unsignedBigInteger('donor_value')->nullable();
$table->boolean('is_active')->default(false);
$table->boolean('is_active')->index();
$table->timestamps();
});
}

View File

@@ -0,0 +1,112 @@
:root {
--border-color: #e0e0e0;
--box-shadow-color: rgba(0, 0, 0, 0.1);
--primary-text-color: #333;
--secondary-text-color: #666;
--button-bg-color: #f44336;
--button-text-color: #fff;
--button-hover-bg-color: #d32f2f;
}
.donation-packages {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Adjust the gap as needed */
justify-content: center; /* Center the last row if it has fewer than three packages */
}
.donation-package__wrapper {
flex: 1 1 calc(33.333% - 20px); /* Adjust the width to fit three packages in a row */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 5px;
box-shadow: 0 0 10px var(--box-shadow-color);
transition: all 0.3s;
margin-bottom: 20px;
box-sizing: border-box;
max-width: calc(33.333% - 20px); /* Ensure the packages do not take full width */
}
.donation-package {
display: flex;
flex-direction: column;
height: 100%;
}
.donation-package__header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.donation-package__name {
font-size: 20px;
font-weight: 700;
color: var(--primary-text-color);
}
.donation-package__price-days {
display: flex;
align-items: center;
}
.donation-package__days {
font-size: 14px;
font-weight: 700;
color: var(--primary-text-color);
}
.donation-package__price {
font-size: 17px;
font-weight: 700;
color: var(--primary-text-color);
}
.donation-package__separator {
margin: 0 5px;
}
.donation-package__description {
font-size: 14px;
color: var(--secondary-text-color);
}
.donation-package__benefits-list {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.benefits-list {
text-align: left;
padding-left: 20px;
}
.donation-package__footer {
margin-top: auto;
display: flex;
justify-content: center;
width: 100%;
}
.donation-package__button {
padding: 10px 20px;
background-color: var(--button-bg-color);
color: var(--button-text-color);
font-size: 16px;
font-weight: 700;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.donation-package__button:hover {
background-color: var(--button-hover-bg-color);
}

View File

@@ -29,6 +29,7 @@
@import 'components/comparison';
@import 'components/data-table';
@import 'components/dialog';
@import 'components/donation-package';
@import 'components/emoji';
@import 'components/featured-pane';
@import 'components/form/button';

View File

@@ -25,6 +25,7 @@
<tr>
<th>Position</th>
<th>Name</th>
<th>Description</th>
<th>Cost</th>
<th>Upload (Bytes)</th>
<th>Invite (#)</th>
@@ -53,6 +54,13 @@
class="form__text"
/>
</td>
<td>
<textarea
name="description"
placeholder="Description"
class="form__textarea"
></textarea>
</td>
<td>
<input
type="number"

View File

@@ -31,6 +31,7 @@
<tr>
<th>Position</th>
<th>Name</th>
<th>Description</th>
<th>Cost</th>
<th>Upload (GiB)</th>
<th>Invite (#)</th>
@@ -58,6 +59,12 @@
class="form__text"
/>
</td>
<td>
<textarea name="description" class="form__textarea">
{{ $package->description }}</textarea
>
</td>
<td>
<input
type="number"

View File

@@ -15,36 +15,37 @@
@section('content')
<section x-data class="panelV2">
<h2 class="panel__heading">Support {{ config('other.title') }}</h2>
<div class="panel__body bbcode-rendered">
<div class="panel__body">
<p>{{ config('donation.description') }}</p>
<table>
<tbody>
<tr>
@foreach ($packages as $package)
<td style="text-align: center">
<span>
@if ($package->donor_value === null)
Lifetime
@else
{{ $package->donor_value }} Days
@endif
--- {{ $package->cost }} {{ config('donation.currency') }}
</span>
</td>
@endforeach
</tr>
<tr>
@foreach ($packages as $package)
<td>
<ul>
<div class="donation-packages">
@foreach ($packages as $package)
<div class="donation-package__wrapper">
<div class="donation-package">
<div class="donation-package__header">
<div class="donation-package__name">{{ $package->name }}</div>
<div class="donation-package__price-days">
<span class="donation-package__price">
{{ $package->cost }} {{ config('donation.currency') }}
</span>
<span class="donation-package__separator">/</span>
<span class="donation-package__days">
@if ($package->donor_value === null)
Lifetime
@else
{{ $package->donor_value }} Days
@endif
</span>
</div>
<div class="donation-package__description">
{{ $package->description }}
</div>
</div>
<div class="donation-package__benefits-list">
<ol class="benefits-list">
@if ($package->donor_value === null)
<li>Unlimited Download Slots</li>
@endif
@if ($package->donor_value === null)
<li>Custom User Icon</li>
@endif
<li>Global Freeleech</li>
<li>Immunity To Automated Warnings (Don't Abuse)</li>
<li
@@ -87,24 +88,20 @@
@if ($package->invite_value !== null)
<li>{{ $package->invite_value }} Invites</li>
@endif
</ul>
</td>
@endforeach
</tr>
<tr>
@foreach ($packages as $package)
<td style="text-align: center">
</ol>
</div>
<div class="donation-package__footer">
<button
class="donation-package__button"
x-on:click.stop="$refs.dialog{{ $package->id }}.showModal()"
class="form__button form__button--filled form__button--centered"
>
Donate
</button>
</td>
@endforeach
</tr>
</tbody>
</table>
</div>
</div>
</div>
@endforeach
</div>
</div>
@foreach ($packages as $package)