init

Author: lyove

modules/Article/Resources/views/frontend/posts/index.blade.php

@@ -39,7 +39,7 @@
  @endphp
  <x-frontend.list 
  :url="$detail_url" 
- :name="$$module_name_singular->name" 
+ :title="$$module_name_singular->name" 
  :image="$$module_name_singular->featured_image"
  >
  @if($$module_name_singular->created_by_alias)
@@ -68,15 +68,21 @@
  <span class="w-6">
  <i class="fa fa-fw fa-folder-open"></i>
  </span>
- <x-frontend.badge :url="route('frontend.categories.show', [encode_id($$module_name_singular->category_id), $$module_name_singular->category->slug])" :text="$$module_name_singular->category_name" />
+ <x-frontend.badge 
+ :url="route('frontend.categories.show', [encode_id($$module_name_singular->category_id), $$module_name_singular->category->slug])" 
+ :text="$$module_name_singular->category_name"
+ />
  </div>
  @if(count($$module_name_singular->tags))
  <div class="flex flex-row items-center">
  <span class="w-6">
  <i class="fa fa-tag"></i> 
  </span>
  @foreach ($$module_name_singular->tags as $tag)
- <x-frontend.badge :url="route('frontend.tags.show', [encode_id($tag->id), $tag->slug])" :text="$tag->name" />
+ <x-frontend.badge 
+ :url="route('frontend.tags.show', [encode_id($tag->id), $tag->slug])" 
+ :text="$tag->name"
+ />
  @endforeach
  </div>
  @endif

modules/Page/Resources/views/frontend/pages/index.blade.php

@@ -28,7 +28,7 @@
  $detail_url = route("frontend.$module_name.show",[encode_id($$module_name_singular->id), $$module_name_singular->slug]);
  @endphp
 
- <x-frontend.list :url="$detail_url" :name="$$module_name_singular->name">
+ <x-frontend.list :url="$detail_url" :title="$$module_name_singular->name">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
  {{$$module_name_singular->description}}
  </p>

resources/assets/css/app-frontend.scss

@@ -125,7 +125,7 @@ a {
  */
 
 .flex-0-0-24 {
- flex: 0 0 100px;
+ flex: 0 0 24px;
 }
 
 .flex-0-0-48 {
@@ -140,6 +140,14 @@ a {
  flex: 0 0 200px;
 }
 
+.flex-0-0-300 {
+ flex: 0 0 300px;
+}
+
+.flex-0-0-400 {
+ flex: 0 0 400px;
+}
+
 /**
  * Button
  * =========================================================================

resources/views/components/frontend/list.blade.php

@@ -1,29 +1,33 @@
-@props(['url', 'name', 'image'=>''])
+@props(['url', 'title', 'image'=>''])
 
-<div class="bg-white border border-gray-200 rounded-lg shadow hover:shadow-lg dark:bg-gray-800 dark:border-gray-700">
- @if ($image)
- <div class="rounded-t-lg overflow-hidden">
+<div class="flex flex-row items-center bg-white border border-gray-200 rounded-lg shadow hover:shadow-lg dark:bg-gray-800 dark:border-gray-700">
+ <div class="flex-0-0-300 mx-4">
  <a href="{{$url}}">
- <img class="rounded-t-lg transform hover:scale-110 duration-300" src="{{$image}}" alt="{{$name}}">
+ @if ($image)
+ <img class="transform hover:scale-110 duration-300" src="{{$image}}" alt="{{$title}}">
+ @else
+ <x-image-placeholder width='300' height='200' text="Costar" class="transform hover:scale-110 duration-300" />
+ @endif
  </a>
  </div>
- @endif
- <div class="mt-5 px-5">
- <a href="{{$url}}">
- <h5 class="mb-2 sm:mb-4 text-lg sm:text-xl font-semibold tracking-tight text-gray-900">
- {{$name}}
- </h5>
- </a>
- </div>
- <div class="px-5 mb-2 sm:mb-4 font-normal text-sm sm:text-base">
- {!! $slot !!}
- </div>
- <div class="px-5 text-end pb-5">
- <a href="{{$url}}" class="inline-flex items-center text-sm text-gray-700 hover:text-gray-100 bg-gray-200 hover:bg-gray-700 py-2 px-3 rounded">
- {{__("View details")}}
- <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
- </svg>
- </a>
+ <div class="flex flex-col flex-1">
+ <div class="mt-5 px-5">
+ <a href="{{$url}}">
+ <h5 class="mb-2 sm:mb-4 text-lg sm:text-xl font-semibold tracking-tight text-gray-900">
+ {{$title}}
+ </h5>
+ </a>
+ </div>
+ <div class="px-5 mb-2 sm:mb-4 font-normal text-sm sm:text-base">
+ {!! $slot !!}
+ </div>
+ <div class="px-5 text-end pb-5">
+ <a href="{{$url}}" class="inline-flex items-center text-sm text-gray-700 hover:text-gray-100 bg-gray-200 hover:bg-gray-700 py-2 px-3 rounded">
+ {{__("View details")}}
+ <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+ </svg>
+ </a>
+ </div>
  </div>
 </div>

resources/views/components/image-placeholder.blade.php

@@ -0,0 +1,25 @@
+@props([
+ 'width' => '600', 
+ 'height' => '400', 
+ 'text' => '600x400',
+ 'bgColor' => '#ddd', 
+ 'fontColor' => '#fff', 
+ 'fontSize' => '56px', 
+ 'class' => 'image-placeholder',
+])
+<svg 
+ xmlns="http://www.w3.org/2000/svg" 
+ width="{{$width}}" 
+ height="{{$height}}"
+ class="{{$class}}"
+>
+ <rect x="0" y="0" width="{{$width}}" height="{{$height}}" fill="{{$bgColor}}"/>
+ <text 
+ x="50%" 
+ y="50%" 
+ style="{{'dominant-baseline:middle;text-anchor:middle;font-size:'.$fontSize}}" 
+ fill="{{$fontColor}}"
+ >
+ {{$text}}
+ </text>
+</svg>