add element icons
This commit is contained in:
parent
ac7af2463d
commit
f3f500d491
12 changed files with 49 additions and 0 deletions
|
|
@ -46,6 +46,7 @@ class ElementController
|
|||
'id' => $element->getId(),
|
||||
'title' => $element->getTitle(),
|
||||
'description' => $element->getDescription(),
|
||||
'iconImageUrl' => $element->getIconImageUrl(),
|
||||
'richText' => $element->getRichText(),
|
||||
'pdfPath' => $element->getPdfPath(),
|
||||
'youtubeUrl' => $element->getYoutubeUrl(),
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ class CreateElementDto
|
|||
public Set $set,
|
||||
public string $title,
|
||||
public string $description,
|
||||
public ?string $iconImageUrl,
|
||||
public string $richText,
|
||||
public ?string $pdfPath,
|
||||
public ?string $youtubeUrl,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ class Element
|
|||
private int $id,
|
||||
private string $title,
|
||||
private string $description,
|
||||
private ?string $iconImageUrl,
|
||||
private string $richText,
|
||||
private ?string $pdfPath,
|
||||
private ?string $youtubeUrl,
|
||||
|
|
@ -33,6 +34,11 @@ class Element
|
|||
return $this->description;
|
||||
}
|
||||
|
||||
public function getIconImageUrl(): ?string
|
||||
{
|
||||
return $this->iconImageUrl;
|
||||
}
|
||||
|
||||
public function getRichText(): string
|
||||
{
|
||||
return $this->richText;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ use Illuminate\Database\Eloquent\Model;
|
|||
* @property int $set_id
|
||||
* @property string $title
|
||||
* @property string $description
|
||||
* @property string|null $icon_image_url
|
||||
* @property string $rich_text
|
||||
* @property string|null $pdf_path
|
||||
* @property string|null $youtube_url
|
||||
|
|
@ -23,6 +24,7 @@ use Illuminate\Database\Eloquent\Model;
|
|||
* @method static Builder<static>|ElementModel whereSetId($value)
|
||||
* @method static Builder<static>|ElementModel whereTitle($value)
|
||||
* @method static Builder<static>|ElementModel whereDescription($value)
|
||||
* @method static Builder<static>|ElementModel whereIconImageUrl($value)
|
||||
* @method static Builder<static>|ElementModel whereRichText($value)
|
||||
* @method static Builder<static>|ElementModel wherePdfPath($value)
|
||||
* @method static Builder<static>|ElementModel whereYoutubeUrl($value)
|
||||
|
|
@ -39,6 +41,7 @@ class ElementModel extends Model
|
|||
'set_id',
|
||||
'title',
|
||||
'description',
|
||||
'icon_image_url',
|
||||
'rich_text',
|
||||
'pdf_path',
|
||||
'youtube_url',
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ class EloquentElementRepository implements ElementRepository
|
|||
'set_id' => $dto->set->getId(),
|
||||
'title' => $dto->title,
|
||||
'description' => $dto->description,
|
||||
'icon_image_url' => $dto->iconImageUrl,
|
||||
'rich_text' => $dto->richText,
|
||||
'pdf_path' => $dto->pdfPath,
|
||||
'youtube_url' => $dto->youtubeUrl,
|
||||
|
|
@ -28,6 +29,7 @@ class EloquentElementRepository implements ElementRepository
|
|||
id: $model->id,
|
||||
title: $dto->title,
|
||||
description: $dto->description,
|
||||
iconImageUrl: $dto->iconImageUrl,
|
||||
richText: $dto->richText,
|
||||
pdfPath: $dto->pdfPath,
|
||||
youtubeUrl: $dto->youtubeUrl,
|
||||
|
|
@ -111,6 +113,7 @@ class EloquentElementRepository implements ElementRepository
|
|||
id: $model->id,
|
||||
title: $model->title,
|
||||
description: $model->description,
|
||||
iconImageUrl: $model->icon_image_url,
|
||||
richText: $model->rich_text,
|
||||
pdfPath: $model->pdf_path,
|
||||
youtubeUrl: $model->youtube_url,
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ class CreateElement
|
|||
throw new BadRequestException('title is required');
|
||||
}
|
||||
$description = $request->description ?? '';
|
||||
$iconImageUrl = $request->iconImageUrl === ''
|
||||
? null
|
||||
: $request->iconImageUrl;
|
||||
$richText = $request->richText ?? '';
|
||||
$pdfPath = $request->pdfPath === '' ? null : $request->pdfPath;
|
||||
$youtubeUrl = $request->youtubeUrl === ''
|
||||
|
|
@ -51,6 +54,7 @@ class CreateElement
|
|||
set: $set,
|
||||
title: $request->title,
|
||||
description: $description,
|
||||
iconImageUrl: $iconImageUrl,
|
||||
richText: $richText,
|
||||
pdfPath: $pdfPath,
|
||||
youtubeUrl: $youtubeUrl,
|
||||
|
|
@ -76,6 +80,7 @@ class CreateElement
|
|||
set: $set,
|
||||
title: $request->title,
|
||||
description: $description,
|
||||
iconImageUrl: $iconImageUrl,
|
||||
richText: $richText,
|
||||
pdfPath: $pdfPath,
|
||||
youtubeUrl: $youtubeUrl,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ class CreateElementRequest
|
|||
public ?int $setId,
|
||||
public ?string $title,
|
||||
public ?string $description,
|
||||
public ?string $iconImageUrl,
|
||||
public ?string $richText,
|
||||
public ?string $pdfPath,
|
||||
public ?string $youtubeUrl,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ return new class extends Migration
|
|||
$table->foreignId('set_id')->constrained('sets');
|
||||
$table->string('title');
|
||||
$table->text('description')->default('');
|
||||
$table->string('icon_image_url')->nullable();
|
||||
$table->text('rich_text')->default('');
|
||||
$table->string('pdf_path')->nullable();
|
||||
$table->string('youtube_url')->nullable();
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ class ElementSeeder extends Seeder
|
|||
set: $baderechSet,
|
||||
title: $baderechSet->getName(),
|
||||
description: $baderechSet->getDescription(),
|
||||
iconImageUrl: '/assets/baderech-haavodah-icon.png',
|
||||
richText: '<p>Begin with a clear map for avodah growth.</p>'
|
||||
. '<p><strong>Move steadily</strong> from awareness '
|
||||
. 'to practice.</p>',
|
||||
|
|
@ -31,6 +32,7 @@ class ElementSeeder extends Seeder
|
|||
title: 'Avodah Foundations',
|
||||
description: 'Core foundations for building a steady '
|
||||
. 'avodah practice.',
|
||||
iconImageUrl: null,
|
||||
richText: '<p>Avodah foundations begin with honest awareness '
|
||||
. 'and small repeatable steps.</p>',
|
||||
pdfPath: null,
|
||||
|
|
@ -41,6 +43,7 @@ class ElementSeeder extends Seeder
|
|||
set: $baderechSet,
|
||||
title: 'Daily Practice',
|
||||
description: 'Practical steps for consistent daily growth.',
|
||||
iconImageUrl: null,
|
||||
richText: '<p>Daily practice turns inspiration into a '
|
||||
. 'dependable rhythm.</p>',
|
||||
pdfPath: null,
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ class FakeElementRepository implements ElementRepository
|
|||
id: $id,
|
||||
title: $dto->title,
|
||||
description: $dto->description,
|
||||
iconImageUrl: $dto->iconImageUrl,
|
||||
richText: $dto->richText,
|
||||
pdfPath: $dto->pdfPath,
|
||||
youtubeUrl: $dto->youtubeUrl,
|
||||
|
|
@ -100,6 +101,7 @@ class FakeElementRepository implements ElementRepository
|
|||
id: $element->getId(),
|
||||
title: $element->getTitle(),
|
||||
description: $element->getDescription(),
|
||||
iconImageUrl: $element->getIconImageUrl(),
|
||||
richText: $element->getRichText(),
|
||||
pdfPath: $element->getPdfPath(),
|
||||
youtubeUrl: $element->getYoutubeUrl(),
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export interface ChildElement {
|
|||
}
|
||||
|
||||
export interface Element extends ChildElement {
|
||||
iconImageUrl: string | null
|
||||
richText: string
|
||||
pdfPath: string | null
|
||||
youtubeUrl: string | null
|
||||
|
|
|
|||
|
|
@ -211,6 +211,14 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
{{ error }}
|
||||
</p>
|
||||
<section v-else-if="element" class="element-page__content">
|
||||
<img
|
||||
v-if="element.iconImageUrl !== null"
|
||||
:src="element.iconImageUrl"
|
||||
:alt="`${element.title} icon`"
|
||||
class="element-page__icon"
|
||||
data-cy="element-icon"
|
||||
/>
|
||||
|
||||
<h1 class="element-page__heading">
|
||||
{{ element.title }}
|
||||
</h1>
|
||||
|
|
@ -296,6 +304,14 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.element-page__icon {
|
||||
display: block;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
margin: 0 auto 1.8rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.element-page__heading {
|
||||
margin: 0;
|
||||
color: #2c2c2c;
|
||||
|
|
@ -459,5 +475,11 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
.element-page__children {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.element-page__icon {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue