feat: component work (#291)

* feat: add buttons to image with text block * fix: remove category description max-width * fix: reduce person title font size
code4romania · Mar 29, 2023 · 86a9eb2 · 86a9eb2
1 parent 90d1374
commit 86a9eb2
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 13 deletions.
diff --git a/app/View/Components/Blocks/ImageText.php b/app/View/Components/Blocks/ImageText.php
@@ -14,13 +14,29 @@ class ImageText extends BlockComponent
 
     public ?Media $image;
 
+    public ?string $primary_button_url;
+
+    public ?string $primary_button_text;
+
+    public ?string $secondary_button_url;
+
+    public ?string $secondary_button_text;
+
     public function setup(): void
     {
         $this->title = $this->block->translatedInput('title');
 
         $this->html = $this->block->translatedInput('text');
 
         $this->image = $this->block->firstMedia('image');
+
+        $this->primary_button_url = $this->block->translatedInput('primary_button_url');
+
+        $this->primary_button_text = $this->block->translatedInput('primary_button_text');
+
+        $this->secondary_button_url = $this->block->translatedInput('secondary_button_url');
+
+        $this->secondary_button_text = $this->block->translatedInput('secondary_button_text');
     }
 
     public function containerColumns(): string

diff --git a/resources/js/components/Blocks/Block/ImageText.vue b/resources/js/components/Blocks/Block/ImageText.vue
@@ -38,6 +38,34 @@
         :options="align"
         default="top"
     />
+
+    <localized-field
+        field="form-input"
+        type="text"
+        :label="$t('field.button_text')"
+        v-model="content.primary_button_text"
+    />
+
+    <localized-field
+        field="form-input"
+        type="url"
+        :label="$t('field.button_url')"
+        v-model="content.primary_button_url"
+    />
+
+    <localized-field
+        field="form-input"
+        type="text"
+        :label="$t('field.button_text')"
+        v-model="content.secondary_button_text"
+    />
+
+    <localized-field
+        field="form-input"
+        type="url"
+        :label="$t('field.button_url')"
+        v-model="content.secondary_button_url"
+    />
 </template>
 
 <script>
@@ -54,6 +82,10 @@
             position: String,
             align: String,
             width: String,
+            primary_button_text: Object,
+            primary_button_url: Object,
+            secondary_button_text: Object,
+            secondary_button_url: Object,
         },
         setup(props) {
             const position = computed(() =>

diff --git a/resources/views/components/blocks/image-text.blade.php b/resources/views/components/blocks/image-text.blade.php
@@ -1,15 +1,15 @@
-<div
-    @class([
-        'grid gap-8 grid-flow-row-dense',
-        $containerColumns(),
-        $containerAlign(),
-    ])>
+<div @class([
+    'grid gap-8 grid-flow-row-dense',
+    $containerColumns(),
+    $containerAlign(),
+])>
     @if ($image)
         <x-media.figure
             :class="$imageColumns()"
             :src="$image->getUrl()"
             :caption="$image->caption"
-            :preload="$shouldPreload()" />
+            :preload="$shouldPreload()"
+        />
     @endif
 
     <div @class([$contentColumns()])>
@@ -18,5 +18,26 @@
         <div class="prose prose-lg prose-teal">
             {!! $html !!}
         </div>
+
+        <div class="flex items-center mt-10 gap-x-3">
+            @if ($primary_button_url && $primary_button_text)
+                <a
+                    href="{{ $primary_button_url }}"
+                    class="inline-flex rounded-md bg-primary/10 px-3.5 py-2.5 text-sm font-semibold text-primary shadow-sm hover:bg-primary/5 border border-primary/25"
+                >
+                    {{ $primary_button_text }}
+                </a>
+            @endif
+
+            @if ($secondary_button_url && $secondary_button_text)
+                <a
+                    href="{{ $secondary_button_url }}"
+                    class="inline-flex items-center text-sm px-3.5 py-2.5 rounded-md font-semibold text-gray-900 gap-x-1 hover:bg-gray-50 border border-transparent"
+                >
+                    {{ $secondary_button_text }}
+                    <x-ri-arrow-right-line class="w-4 h-4" />
+                </a>
+            @endif
+        </div>
     </div>
 </div>
diff --git a/resources/views/components/blocks/people.blade.php b/resources/views/components/blocks/people.blade.php
@@ -15,27 +15,30 @@ class="grid lg:col-span-2 sm:grid-cols-2 gap-x-6 gap-y-8 md:grid-cols-3 lg:grid-
                     <a
                         href="{{ $person->url }}"
                         title="{{ __('person.action.view') }}"
-                        class="block overflow-hidden transition-shadow duration-150 rounded-lg shadow-lg aspect-w-1 aspect-h-1 hover:shadow-xl">
+                        class="block overflow-hidden transition-shadow duration-150 rounded-lg shadow-lg aspect-w-1 aspect-h-1 hover:shadow-xl"
+                    >
                         <x-media.image
                             :src="$person->getThumbnailUrl(large: true)"
                             class="object-cover"
-                            :preload="$shouldPreload()" />
+                            :preload="$shouldPreload()"
+                        />
                     </a>
                 @endif
 
                 <div class="text-lg">
                     <a
                         href="{{ $person->url }}"
                         title="{{ __('person.action.view') }}"
-                        class="flex items-center justify-between gap-2 hover:underline">
+                        class="flex items-center justify-between gap-2 leading-tight hover:underline"
+                    >
                         <h3 class="font-semibold text-gray-900">
                             {{ $person->name }}
                         </h3>
 
                         <x-ri-arrow-right-line class="w-5 h-5 shrink-0" />
                     </a>
 
-                    <p class="font-medium text-primary">{{ $person->title }}</p>
+                    <p class="text-sm font-medium text-primary">{{ $person->title }}</p>
                 </div>
 
                 <div class="prose text-gray-500 line-clamp-3">

diff --git a/resources/views/front/decisions/category.blade.php b/resources/views/front/decisions/category.blade.php
@@ -4,7 +4,7 @@
             {{ $category->title }}
         </h1>
 
-        <div class="mt-4 prose text-gray-500 max-w-prose sm:prose-lg lg:prose-xl">
+        <div class="mt-4 prose text-gray-500 sm:prose-lg lg:prose-xl">
             {!! $category->description !!}
         </div>
 

diff --git a/resources/views/front/posts/category.blade.php b/resources/views/front/posts/category.blade.php
@@ -4,7 +4,7 @@
             {{ $category->title }}
         </h1>
 
-        <div class="mt-4 prose text-gray-500 max-w-prose sm:prose-lg lg:prose-xl">
+        <div class="mt-4 prose text-gray-500 sm:prose-lg lg:prose-xl">
             {!! $category->description !!}
         </div>