WIP V0.6.0

happytodev · Nov 16, 2022 · 71b4475 · 71b4475
1 parent 9bff0e0
commit 71b4475
Show file tree

Hide file tree

Showing 5 changed files with 788 additions and 643 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,14 +2,24 @@
 
 All notable changes to `typhoon` will be documented in this file.
 
+## v0.6.0 - 2022-09-01
+- Add support of Filament Tailwind Color Picker
+- Big improvement on Hero component with many new possibilities for customization (background image, colors, text, art icon, etc.)
+- Add first version of block 'Separator' with 6 forms for beginning
+- Remove plugin martin-ro/charcounted-field due to backend display break (in relation with issue #3712 of FilamentPhp) => Waiting for fix from author
+- Add collapsible menu option
+- Page blocks are now collapsible
+- New gorgeous purple theme for the backend
+- Add heroicons to page builder elements and reorder them
+- Some cleaning in the code
+
 ## v0.5.6 - 2022-08-15
 - remove tw-elements
 - add a new menu responsive with accessible navigation adapted from [this article](https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/)
 - now a menu can have 2 sub-levels
 - some cleaning in the code
 
 ## v0.5.7 - 2022-08-23
-
 - Update demo content
 
 ## v0.5.5 - 2022-08-15

diff --git a/resources/views/components/typhoon/page/hero.blade.php b/resources/views/components/typhoon/page/hero.blade.php
@@ -5,18 +5,18 @@
         <img src="{{ Storage::url($heroArtIcon) }}" alt="" class="{{ $heroArtIconHeight }} {{ $heroArtIconInvertColor ? 'invert' : '' }} {{ $heroArtIconOpacity }}">
     </div>
     @endif
-    <section class="text-grey-900 body-font">
+    <section class="text-grey-900 body-font {{ $fullwidth ?? '' }}">
         <div class="mx-auto flex md:flex-row items-center {{ $heroHeight == 'content' ? '' : $heroHeight }}">
             <div class="lg:flex-grow w-full flex flex-col md:mb-0 {{ $heroBackgroundTextPosition ??  '' }} z-10 {{ $heroBackgroundBackdropBrightness ?? '' }} {{ $heroBackgroundBackdropOpacity ?? '' }} {{ $heroBackgroundBackdropInvert ? 'backdrop-invert' : '' }} {{ $heroBackgroundBackdropColor ?? '' }} h-full justify-center px-4">
-                <h1 class="px-2 title-font {{ $heroTitleTextSize - 2 > 1 ? 'text-' . $heroTitleTextSize - 2 . 'xl' : 'text-xl' }} sm:{{ 'text-' . $heroTitleTextSize . 'xl'  }}  mb-4 font-medium {{ $titleTextColor }}">{{ $heroTitle }}</h1>
-                <h1 class="px-2 {{ $heroTitleTextSize - 4 > 0 ? 'text-' . $heroTitleTextSize - 4 . 'xl' : 'text-xl' }} sm:{{ $heroTitleTextSize - 3 > 0 ? 'text-' . $heroTitleTextSize - 3 . 'xl' : 'text-xl'  }} font-thin {{ $subtitleTextColor }}">{{ $heroSubtitle }}</h1>
-                <div class="px-2 leading-relaxed prose pt-4">
-                    <x-markdown class="{{ $descriptionTextColor }}">
-                        {{ $heroText }}
+                <h1 class="px-2 title-font {{ $heroTitleTextSize - 2 > 1 ? 'text-' . $heroTitleTextSize - 2 . 'xl' : 'text-xl' }} sm:{{ 'text-' . $heroTitleTextSize . 'xl'  }}  mb-4 font-medium {{ $titleTextColor }} {{ $heroTitleTextPosition }}">{{ $heroTitle }}</h1>
+                <p class="px-2 {{ $heroSubtitleTextSize }} font-thin {{ $subtitleTextColor }} {{ $heroSubtitleTextPosition }}">{{ $heroSubtitle }}</p>
+                <div class="px-2 leading-relaxed prose pt-4 w-full">
+                    <x-markdown class="{{ $descriptionTextColor }} {{ $heroDescriptionTextPosition }}">
+                        {{ $heroDescription }}
                     </x-markdown>
                 </div>
                 @if ($heroCtaVisible)
-                <div class="mb-4">
+                <div class="flex flex-col w-full {{ $heroCtaButtonPosition }} mb-4">
                         <a href="{{ $heroCtaUrl }}" target="{{ $heroCtaUrlTarget ? '_blank' : '_self' }}">
                             <button class="{{ $heroCtaButtonTextColor }} {{ $heroCtaButtonBackgroundColor }} border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0">{{ $heroCtaButtonText }}</button>
                         </a>
@@ -35,7 +35,8 @@
         <img src="{{ Storage::url($heroArtIcon) }}" alt="" class="{{ $heroArtIconHeight }} {{ $heroArtIconInvertColor ? 'invert' : '' }} {{ $heroArtIconOpacity }}">
     </div>
     @endif
-    <section class="text-grey-900 body-font {{ $heroHeight == 'content' ? '' : $heroHeight }}">
+    {{-- @dd($fullwidth) --}}
+    <section class="text-grey-900 body-font {{ $heroHeight == 'content' ? '' : $heroHeight }} {{ $fullwidth ?? '' }}">
         <div class="flex md:flex-row flex-col items-center">
         @if ($heroImagePosition == 'left')
             <div class="md:w-1/2 w-full h-full">
@@ -44,11 +45,11 @@
                 @endif
             </div>            
             <div class="lg:flex-grow md:w-1/2 w-full flex flex-col items-center text-center z-10">
-                <h1 class="px-2 title-font {{ $heroTitleTextSize - 2 > 1 ? 'text-' . $heroTitleTextSize - 2 . 'xl' : 'text-xl' }} sm:{{ 'text-' . $heroTitleTextSize . 'xl'  }}  mb-4 font-medium {{ $titleTextColor }}">{{ $heroTitle }}</h1>
-                <h1 class="px-2 lg:inline-block sm:text-4xl text-3xl  font-thin {{ $subtitleTextColor }}">{{ $heroSubtitle }}</h1>
-                <div class="px-2 my-2 leading-relaxed prose lg:px-8 md:px-16 pt-4 {{ $descriptionTextColor }}">
-                    <x-markdown  class="{{ $descriptionTextColor }}">
-                        {{ $heroText }}
+                <h1 class="px-2 title-font {{ $heroTitleTextSize - 2 > 1 ? 'text-' . $heroTitleTextSize - 2 . 'xl' : 'text-xl' }} sm:{{ 'text-' . $heroTitleTextSize . 'xl'  }}  mb-4 font-medium {{ $titleTextColor }} {{ $heroTitleTextPosition }}">{{ $heroTitle }}</h1>
+                <p class="px-2 lg:inline-block {{ $heroSubtitleTextSize }}  font-thin {{ $subtitleTextColor }} {{ $heroSubtitleTextPosition }}">{{ $heroSubtitle }}</p>
+                <div class="px-2 my-2 leading-relaxed prose lg:px-8 md:px-16 pt-4 {{ $descriptionTextColor }} w-full">
+                    <x-markdown  class="{{ $descriptionTextColor }} {{ $heroDescriptionTextPosition }}">
+                        {{ $heroDescription }}
                     </x-markdown>
                 </div>
                 @if ($heroCtaVisible)
@@ -58,20 +59,20 @@
                         <div class="grid gap-8 items-start justify-center">
                             <div class="relative group">
                                 <div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
-                                    <a href="{{ $heroCtaUrl }}" target="{{ $heroCtaUrlTarget ? '_blank' : '_self' }}">
-                                        <button class="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
-                                            <span class="flex items-center space-x-5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600 -rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-                                            </svg>
-                                            <span class="pr-6 text-gray-100">{{ $heroCtaButtonText }}</span>
-                                        </button>
-                                    </a>
-                                </div>
+                                <a href="{{ $heroCtaUrl }}" target="{{ $heroCtaUrlTarget ? '_blank' : '_self' }}">
+                                    <button class="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
+                                        <span class="flex items-center space-x-5">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600 -rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                                        </svg>
+                                        <span class="pr-6 text-gray-100">{{ $heroCtaButtonText }}</span>
+                                    </button>
+                                </a>
                             </div>
+                        </div>
                     </div>
                     @else
-                    <div class="px-8 py-4">
+                    <div class="flex flex-col w-full {{ $heroCtaButtonPosition }} px-8 py-4">
                         <a href="{{ $heroCtaUrl }}" target="{{ $heroCtaUrlTarget ? '_blank' : '_self' }}">
                             <button class="{{ $heroCtaButtonTextColor }} {{ $heroCtaButtonBackgroundColor }} border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0">{{ $heroCtaButtonText }}</button>
                         </a>
@@ -82,27 +83,31 @@
         @endif
         @if ($heroImagePosition == 'right')
             <div class="lg:flex-grow md:w-1/2 w-full flex flex-col items-center text-center z-10">
-                <h1 class="px-2 title-font {{ $heroTitleTextSize - 2 > 1 ? 'text-' . $heroTitleTextSize - 2 . 'xl' : 'text-xl' }} sm:{{ 'text-' . $heroTitleTextSize . 'xl'  }}  mb-4 font-medium {{ $titleTextColor }}">{{ $heroTitle }}</h1>
-                <h1 class="px-2 lg:inline-block sm:text-4xl text-3xl font-thin {{ $subtitleTextColor }}">{{ $heroSubtitle }}</h1>
-                <div class="px-2 my-2 leading-relaxed prose pt-4">
-                    <x-markdown class="{{ $descriptionTextColor }}">
-                        {{ $heroText }}
+                <h1 class="px-2 title-font {{ $heroTitleTextSize - 2 > 1 ? 'text-' . $heroTitleTextSize - 2 . 'xl' : 'text-xl' }} sm:{{ 'text-' . $heroTitleTextSize . 'xl'  }}  mb-4 font-medium {{ $titleTextColor }} {{ $heroTitleTextPosition }}">{{ $heroTitle }}</h1>
+                <p class="px-2 lg:inline-block {{ $heroSubtitleTextSize }} font-thin {{ $subtitleTextColor }} {{ $heroSubtitleTextPosition }}">{{ $heroSubtitle }}</p>
+                <div class="px-2 my-2 leading-relaxed prose pt-4 w-full">
+                    <x-markdown class="{{ $descriptionTextColor }} {{ $heroDescriptionTextPosition }}">
+                        {{ $heroDescription }}
                     </x-markdown>
                 </div>
                 @if ($heroCtaVisible)
-                <div class="px-2 mb-4">
+                <div class="flex flex-col w-full {{ $heroCtaButtonPosition }} px-2 mb-4">
                     <a href="{{ $heroCtaUrl }}" target="{{ $heroCtaUrlTarget ? '_blank' : '_self' }}">
                         <button class="{{ $heroCtaButtonTextColor }} {{ $heroCtaButtonBackgroundColor }} border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0">{{ $heroCtaButtonText }}</button>
                     </a>
                 </div>
                 @endif
             </div>
-            {{-- <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6"> --}}
+
             <div class="md:w-1/2 w-full">
                 @if ($heroImage)    
                 <img class="object-contain w-full object-center lazyload {{ $heroHeight == 'content' ? '' : $heroHeight }}" alt="hero" data-src="{{ Storage::url($heroImage) }}">
                 @endif
             </div>
+
+            <div>
+
+            </div>
         @endif
 
         </div>

diff --git a/resources/views/default/page/index.blade.php b/resources/views/default/page/index.blade.php
@@ -30,40 +30,46 @@
                     {{-- @dd($content['data']) --}}
                     @if($content['data']['visible'])
                         <x-typhoon.page.hero 
-                            :heroTitle="$content['data']['heroTitle']" 
+                            :heroTitle="$content['data']['heroTitle'] ?? '' "  
                             :heroTitleTextSize="$content['data']['heroTitleTextSize'] ?? ''" 
-                            :heroSubtitle="$content['data']['heroSubtitle']" 
-                            :heroText="$content['data']['heroText']" 
-                            :heroImage="$content['data']['heroImage']" 
-                            :heroImagePosition="$content['data']['heroImagePosition']" 
-                            :titleTextColor="$content['data']['titleTextColor']" 
-                            :subtitleTextColor="$content['data']['subtitleTextColor']" 
-                            :descriptionTextColor="$content['data']['descriptionTextColor']" 
-                            :backgroundColor="$content['data']['backgroundColor']" 
-                            :heroHeight="$content['data']['heroHeight']" 
-                            :heroArtIcon="$content['data']['heroArtIcon']"
-                            :heroArtIconHeight="$content['data']['heroArtIconHeight']"
-                            :heroArtIconOffsetX="$content['data']['heroArtIconOffsetX']" 
-                            :heroArtIconVisible="$content['data']['heroArtIconVisible']" 
-                            :heroArtIconInvertColor="$content['data']['heroArtIconInvertColor']" 
-                            :heroArtIconOpacity="$content['data']['heroArtIconOpacity']" 
-                            :heroArtIconRotate="$content['data']['heroArtIconRotate']" 
-                            :heroArtIconRotateInverse="$content['data']['heroArtIconRotateInverse']" 
-                            :heroArtIconRotateAngle="$content['data']['heroArtIconRotateAngle']" 
-                            :heroCtaVisible="$content['data']['heroCtaVisible']" 
-                            :heroCtaButtonGlowing="$content['data']['heroCtaButtonGlowing']" 
-                            :heroCtaButtonText="$content['data']['heroCtaButtonText']" 
-                            :heroCtaButtonBackgroundColor="$content['data']['heroCtaButtonBackgroundColor']" 
-                            :heroCtaButtonTextColor="$content['data']['heroCtaButtonTextColor']" 
-                            :heroCtaUrl="$content['data']['heroCtaUrl']" 
-                            :heroCtaUrlTarget="$content['data']['heroCtaUrlTarget']" 
-                            :heroBackgroundTextPosition="$content['data']['heroBackgroundTextPosition']" 
-                            :heroBackgroundBackdropBrightness="$content['data']['heroBackgroundBackdropBrightness']"
-                            :heroBackgroundBackdropOpacity="$content['data']['heroBackgroundBackdropOpacity']"
-                            :heroBackgroundBackdropInvert="$content['data']['heroBackgroundBackdropInvert']"
-                            :heroBackgroundBackdropColor="$content['data']['heroBackgroundBackdropColor']"
-                            :heroImageBackgroundSize="$content['data']['heroImageBackgroundSize']"
-                            :heroImageBackgroundPosition="$content['data']['heroImageBackgroundPosition']"
+                            :heroSubtitle="$content['data']['heroSubtitle'] ?? '' "  
+                            :heroSubtitleTextSize="$content['data']['heroSubtitleTextSize'] ?? '' "  
+                            :heroDescription="$content['data']['heroDescription'] ?? '' "  
+                            :heroImage="$content['data']['heroImage'] ?? '' "  
+                            :heroImagePosition="$content['data']['heroImagePosition'] ?? '' "  
+                            :titleTextColor="$content['data']['titleTextColor'] ?? '' "  
+                            :subtitleTextColor="$content['data']['subtitleTextColor'] ?? '' "  
+                            :descriptionTextColor="$content['data']['descriptionTextColor'] ?? '' "  
+                            :backgroundColor="$content['data']['backgroundColor'] ?? '' "  
+                            :heroHeight="$content['data']['heroHeight'] ?? '' "  
+                            :heroArtIcon="$content['data']['heroArtIcon'] ?? '' " 
+                            :heroArtIconHeight="$content['data']['heroArtIconHeight'] ?? '' " 
+                            :heroArtIconOffsetX="$content['data']['heroArtIconOffsetX'] ?? '' "  
+                            :heroArtIconVisible="$content['data']['heroArtIconVisible'] ?? '' "  
+                            :heroArtIconInvertColor="$content['data']['heroArtIconInvertColor'] ?? '' "  
+                            :heroArtIconOpacity="$content['data']['heroArtIconOpacity'] ?? '' "  
+                            :heroArtIconRotate="$content['data']['heroArtIconRotate'] ?? '' "  
+                            :heroArtIconRotateInverse="$content['data']['heroArtIconRotateInverse'] ?? '' "  
+                            :heroArtIconRotateAngle="$content['data']['heroArtIconRotateAngle'] ?? '' "      
+                            :heroCtaVisible="$content['data']['heroCtaVisible'] ?? '' "  
+                            :heroCtaButtonGlowing="$content['data']['heroCtaButtonGlowing'] ?? '' "  
+                            :heroCtaButtonText="$content['data']['heroCtaButtonText'] ?? '' "  
+                            :heroCtaButtonBackgroundColor="$content['data']['heroCtaButtonBackgroundColor'] ?? '' "  
+                            :heroCtaButtonTextColor="$content['data']['heroCtaButtonTextColor'] ?? '' "  
+                            :heroCtaButtonPosition="$content['data']['heroCtaButtonPosition'] ?? '' "  
+                            :heroCtaUrl="$content['data']['heroCtaUrl'] ?? '' "  
+                            :heroCtaUrlTarget="$content['data']['heroCtaUrlTarget'] ?? '' "  
+                            :heroBackgroundTextPosition="$content['data']['heroBackgroundTextPosition'] ?? '' "  
+                            :heroBackgroundBackdropBrightness="$content['data']['heroBackgroundBackdropBrightness'] ?? '' " 
+                            :heroBackgroundBackdropOpacity="$content['data']['heroBackgroundBackdropOpacity'] ?? '' " 
+                            :heroBackgroundBackdropInvert="$content['data']['heroBackgroundBackdropInvert'] ?? '' " 
+                            :heroBackgroundBackdropColor="$content['data']['heroBackgroundBackdropColor'] ?? '' " 
+                            :heroImageBackgroundSize="$content['data']['heroImageBackgroundSize'] ?? '' " 
+                            :heroImageBackgroundPosition="$content['data']['heroImageBackgroundPosition'] ?? '' " 
+                            :fullwidth="$content['data']['fullwidth'] ?? '' "
+                            :heroTitleTextPosition="$content['data']['heroTitleTextPosition'] ?? '' "
+                            :heroSubtitleTextPosition="$content['data']['heroSubtitleTextPosition'] ?? '' "
+                            :heroDescriptionTextPosition="$content['data']['heroDescriptionTextPosition'] ?? '' "
                         />
                     @endif
                     @break