Add divider vertical type & fix issue bottom media in Grid Widget

templaza · Aug 29, 2024 · c7e2a5d · c7e2a5d
1 parent fb54eaf
commit c7e2a5d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/framework/elements/divider/divider.php b/framework/elements/divider/divider.php
@@ -15,22 +15,25 @@
 use Astroid\Helper\Style;
 extract($displayData);
 $border_width   = $params->get('border_width', 1);
+$type           = $params->get('type', '');
 $border_style   = $params->get('style', 'solid');
 $color          = Style::getColor($params->get('color', ''));
 $margin         = $params->get('margin', '');
+$height         = $params->get('height_divider', '60');
 
-echo '<div class="divider-content"></div>';
-$style      = new Style('#'.$element->id.' .divider-content');
-$style_dark = new Style('#'.$element->id.' .divider-content', 'dark');
-$style->addCss('border-top', $border_width. 'px ' . $border_style . ' ' . $color['light']);
-$style_dark->addCss('border-color', $color['dark']);
+echo '<div class="divider-content'. ($type == 'vertical' ? ' d-flex justify-content-center' : '') .'"></div>';
+if ($type == 'vertical') {
+    $element->style->child('.divider-content:after')->addCss('content', '""');
+    $element->style->child('.divider-content:after')->addCss('height', $height . 'px');
+    $element->style->child('.divider-content:after')->addCss('border-left', $border_width. 'px ' . $border_style . ' ' . $color['light']);
+} else {
+    $element->style->child('.divider-content')->addCss('border-top', $border_width. 'px ' . $border_style . ' ' . $color['light']);
+    $element->style_dark->child('.divider-content')->addCss('border-color', $color['dark']);
+}
 
 if (!empty($margin)) {
     $margin = \json_decode($margin, false);
     foreach ($margin as $device => $props) {
-        $style->addStyle(Style::spacingValue($props, "margin"), $device);
+        $element->style->child('.divider-content')->addStyle(Style::spacingValue($props, "margin"), $device);
     }
-}
-
-$style->render();
-$style_dark->render();
+}
diff --git a/framework/elements/divider/divider.xml b/framework/elements/divider/divider.xml
@@ -9,13 +9,17 @@
         <fields>
             <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
                 <field astroidgroup="general" name="border_width" type="astroidrange" min="1" max="300" step="1" postfix="px" default="1" label="ASTROID_WIDGET_WIDTH_LABEL" />
+                <field astroidgroup="general" name="type" type="astroidlist" label="TPL_ASTROID_PRELOADER_TYPE" default="">
+                    <option value="">Horizontal</option>
+                    <option value="vertical">Vertical</option>
+                </field>
+                <field astroidgroup="general" ngShow="[type]=='vertical'" name="height_divider" type="astroidrange" min="10" max="1000" step="1" default="60" label="ASTROID_WIDGET_HEIGHT_LABEL" postfix="px" />
                 <field astroidgroup="general" name="style" type="astroidlist" label="ASTROID_WIDGET_GLOBAL_STYLES_LABEL" default="solid">
                     <option value="solid">Solid</option>
                     <option value="dashed">Dashed</option>
                     <option value="dotted">Dotted</option>
                 </field>
                 <field astroidgroup="general" name="color" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
-                <field astroidgroup="general" name="margin" type="astroidspacing" label="ASTROID_WIDGET_MARGIN_LABEL" />
             </fieldset>
             <fieldset name="assignment-settings" label="TPL_ASTROID_ASSIGNMENT_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields" articleData="false">
                 <field type="astroidlist" name="assignment_type" label="ASTROID_WIDGET_ASSIGN" default="1">

diff --git a/framework/elements/grid/grid.php b/framework/elements/grid/grid.php
@@ -162,11 +162,11 @@
     $link_target    =   !empty($grid_params['link_target']) ? ' target="'.$grid_params['link_target'].'"' : '';
     $media          =   '';
     if ($grid_params['type'] == 'image' && $grid_params['image']) {
-        $media      =   '<div class="as-image-cover position-relative overflow-hidden' . ($layout == 'overlay' ? ' astroid-image-overlay-cover' : '') . $image_border_radius . $hover_effect . $transition . ($media_position == 'bottom' ? 'order-2 ' : '') . '">';
+        $media      =   '<div class="as-image-cover position-relative overflow-hidden' . ($layout == 'overlay' ? ' astroid-image-overlay-cover' : '') . $image_border_radius . $hover_effect . $transition . ($media_position == 'bottom' ? ' order-2 ' : '') . '">';
         $media      .=  '<img class="' . ($image_fullwidth ? 'w-100' : '') . ($enable_image_cover || $media_position == 'left' || $media_position == 'right' ? ' object-fit-cover h-100' : '') . ($params->get('card_style', '') == 'none' ? '' : ' card-img-'. $media_position) .'" src="'. Astroid\Helper\Media::getPath() . '/' . $grid_params['image'].'" alt="'.$grid_params['title'].'">';
         $media      .=  '</div>';
         if ( !empty($grid_params['link']) ) {
-            $media      =   '<a href="'. $grid_params['link'] . '"'.$link_target.'>'. $media .'</a>';
+            $media      =   '<a href="'. $grid_params['link'] . '"'.$link_target.' class="'.($media_position == 'bottom' ? 'order-2 ' : '').'">'. $media .'</a>';
         }
     } elseif ($grid_params['type'] == 'icon') {
         if ($grid_params['icon_type'] == 'fontawesome') {
@@ -175,7 +175,7 @@
             $media  =   '<i class="astroid-icon '. ($media_position == 'bottom' ? 'order-2 ' : '') .$grid_params['custom_icon'].'"></i>';
         }
         if ( !empty($grid_params['link']) && !empty($params->get('enable_icon_link', 0)) ) {
-            $media      =   '<a href="'. $grid_params['link'] . '"'.$link_target.'>'. $media .'</a>';
+            $media      =   '<a href="'. $grid_params['link'] . '"'.$link_target.' class="'.($media_position == 'bottom' ? 'order-2 ' : '').'">'. $media .'</a>';
         }
     }