Skip to content

Commit a5cbc08

Browse files
jyotibansal461actuallyakash
jyotibansal461
authored and
actuallyakash
committed
individual step alignment issue fixed
1 parent 71b80d4 commit a5cbc08

2 files changed

Lines changed: 67 additions & 107 deletions

File tree

‎assets/css/howto.css‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@
2222
margin-bottom: 10px;
2323
}
2424

25-
/* .mt-has-img.mt-step-img-right .mt-how-to-step-content {
26-
width: 60%;
27-
} */
28-
2925
.mt-has-img.mt-step-img-right .mt-how-to-step-image {
3026
width: 40%;
3127
margin-left: 10px;
@@ -43,10 +39,6 @@
4339
flex-direction: row-reverse;
4440
}
4541

46-
/* .mt-has-img.mt-step-img-left .mt-how-to-step-content {
47-
width: 60%;
48-
} */
49-
5042
.mt-has-img.mt-step-img-left .mt-how-to-step-image {
5143
width: 40%;
5244
margin-right: 10px;
@@ -115,28 +107,4 @@ p {
115107

116108
.mt-how-to-image img {
117109
display: inline;
118-
}
119-
120-
.mt-how-to-step-content-flex-start {
121-
align-self: flex-start;
122-
}
123-
124-
.mt-how-to-step-content-center {
125-
align-self: center;
126-
}
127-
128-
.mt-how-to-step-content-flex-end {
129-
align-self: flex-end;
130-
}
131-
132-
.mt-how-to-step-image-flex-start {
133-
align-self: flex-start;
134-
}
135-
136-
.mt-how-to-step-image-center {
137-
align-self: center;
138-
}
139-
140-
.mt-how-to-step-image-flex-end {
141-
align-self: flex-end;
142110
}

‎widgets/howto.php‎

Lines changed: 67 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,7 +1131,7 @@ protected function register_controls() {
11311131
[
11321132
'name' => 'image_box_shadow',
11331133
'label' => __( 'Box Shadow', 'mighty' ),
1134-
'selector' => '{{WRAPPER}} .mt-how-to-image',
1134+
'selector' => '{{WRAPPER}} .mt-how-to-image img',
11351135
]
11361136
);
11371137

@@ -2240,7 +2240,7 @@ protected function register_controls() {
22402240
'default' => 'center',
22412241
'toggle' => true,
22422242
'selectors' => [
2243-
'{{WRAPPER}} .mt-how-to-step-image' => 'align-items: {{VALUES}}'
2243+
'{{WRAPPER}} .mt-how-to-step-image' => 'align-self: {{VALUES}}'
22442244
]
22452245
]
22462246
);
@@ -2270,7 +2270,7 @@ protected function register_controls() {
22702270
'default' => 'center',
22712271
'toggle' => true,
22722272
'selectors' => [
2273-
'{{WRAPPER}} .mt-how-to-step-image' => 'align-items: {{VALUES}}'
2273+
'{{WRAPPER}} .mt-how-to-step-image' => 'align-self: {{VALUES}}'
22742274
]
22752275
]
22762276
);
@@ -2504,7 +2504,7 @@ protected function render()
25042504
$estimate_time = $settings['how_to_estimated_time_text'];
25052505

25062506
if ( !empty ( $settings['estimated_currency'] ) ) {
2507-
$estimate_time = $estimate_time . ' <span>' . $settings['estimated_currency'];
2507+
$estimate_time = $estimate_time . ' <span> ' . $settings['estimated_currency'] ;
25082508
}
25092509
if ( !empty ( $settings['estimate_cost'] ) ) {
25102510
$estimate_time = $estimate_time . $settings['estimate_cost'] . '</span>';
@@ -2516,16 +2516,16 @@ protected function render()
25162516
$this->add_render_attribute( 'mt-how-to-tools-title', 'class', 'mt-how-to-tools-title' );
25172517
$this->add_render_attribute( 'mt-how-to-step-title', 'class', 'mt-how-to-step-title' );
25182518
$this->add_render_attribute( 'mt-how-to-step-section-title', 'class', 'mt-how-to-step-section-title' );
2519-
$this->add_render_attribute( 'mt-how-to-step-image', 'class', 'mt-how-to-step-image' );
2520-
$this->add_render_attribute( 'mt-how-to-step-content', 'class', 'mt-how-to-step-content' );
2519+
$this->add_render_attribute( 'mt-how-to-step-content', 'style', 'width:calc(100% - '. $settings['step_image_width']['size'].'%);' );
25212520

25222521
?>
25232522

25242523
<div class="mt-how-to mt-how-to-<?php echo $this->get_id();?>" id ="mt-how-to-<?php echo $this->get_id();?>">
2525-
<?php
2526-
if ( 'yes' == $settings['enable_schema'] ) { ?>
2524+
2525+
<?php if ( 'yes' == $settings['enable_schema'] ) { ?>
25272526
<?php $this->get_how_to_json_ld(); ?>
25282527
<?php } ?>
2528+
25292529
<?php if ( !empty( $settings['how_to_title'] ) ) { ?>
25302530
<?php if ( !empty($how_to_image_link) ) { ?>
25312531
<a href="<?php echo $how_to_image_link;?>">
@@ -2581,97 +2581,89 @@ protected function render()
25812581

25822582
<?php if ( $settings['how_to_tool'] == 'yes' ) { ?>
25832583
<div class="mt-how-to-tools">
2584-
<<?php echo $settings['tool_html_tag'];?> <?php echo $this->get_render_attribute_string('mt-how-to-tools-title'); ?> ><?php echo $settings['tool_title'];?></<?php echo $settings['tool_html_tag'];?> >
2584+
<<?php echo $settings['tool_html_tag'];?> <?php echo $this->get_render_attribute_string('mt-how-to-tools-title'); ?> ><?php echo $settings['tool_title'];?></<?php echo $settings['tool_html_tag'];?> >
25852585
<?php foreach ($settings['tool_list'] as $key => $value) { ?>
25862586
<div class="mt-tool mt-tool-<?php echo $key + 1; ?>">
25872587
<i class="<?php echo $settings['tool_icon']['value'];?>"></i>
25882588
<span><?php echo $value['tool_name'];?></span>
25892589
</div>
25902590
<?php } ?>
25912591
</div>
2592-
<?php } ?>
2592+
<?php } ?>
25932593
<!-- Advanced Options -->
25942594

2595-
<div class="mt-how-to-steps">
2595+
<div class="mt-how-to-steps">
25962596

2597-
<<?php echo $settings['step_section_html_tag'];?> <?php echo $this->get_render_attribute_string('mt-how-to-step-section-title'); ?> ><?php echo $settings['steps_title'];?></<?php echo $settings['step_section_html_tag'];?> >
2597+
<<?php echo $settings['step_section_html_tag'];?> <?php echo $this->get_render_attribute_string('mt-how-to-step-section-title'); ?> ><?php echo $settings['steps_title'];?></<?php echo $settings['step_section_html_tag'];?> >
25982598

2599-
<p class="mt-how-to-step-section-sub-title"><?php echo $settings['steps_description'];?></p>
2599+
<p class="mt-how-to-step-section-sub-title"><?php echo $settings['steps_description'];?></p>
26002600

2601-
<?php foreach ( $settings['step_list'] as $key => $value ) { ?>
2602-
2603-
<php print_r($value); ?>
2604-
2601+
<?php foreach ( $settings['step_list'] as $key => $value ) { ?>
2602+
26052603
<?php if ( $value['image_position'] == 'custom' ) { ?>
26062604

2607-
<?php if ( $value['image_alignment'] == 'left' || $value['image_alignment'] == 'right' ) {
2605+
<div class="mt-how-to-step mt-has-img mt-step-img-<?php echo $value['image_alignment'];?>" >
2606+
<?php } else { ?>
2607+
<div class="mt-how-to-step mt-has-img mt-step-img-<?php echo $settings['step_image_alignment'];?>" >
2608+
<?php } ?>
26082609

2609-
$this->add_render_attribute( 'mt-how-to-step-image', 'style', 'align-self:'.$value['vertical_alignment'].';' );
2610-
}
2610+
<div class="mt-how-to-step-content">
2611+
<?php if ( !empty( $value['step_title'] ) ) { ?>
2612+
<?php if ( !empty($value['step_image_link']['url'] ) ) { ?>
2613+
<a target="_blank" href="<?php echo $value['step_image_link']['url'];?>" >
2614+
<?php } ?>
2615+
<<?php echo $settings['step_html_tag'];?> <?php echo $this->get_render_attribute_string('mt-how-to-step-title'); ?> ><?php echo $value['step_title'];?></<?php echo $settings['step_html_tag'];?> >
2616+
<?php if ( !empty($value['step_image_link']['url'] ) ) { ?>
2617+
</a>
2618+
<?php } ?>
26112619

2612-
if ( $value['image_alignment'] == 'top' || $value['image_alignment'] == 'bottom' ) {
2620+
<?php } ?>
26132621

2614-
$this->add_render_attribute( 'mt-how-to-step-image', 'style', 'align-self:'.$value['horizontal_alignment'].';' );
2622+
<?php if ( !empty( $value['step_description'] ) ) { ?>
2623+
<div class="mt-how-to-step-description"><?php echo $value['step_description'];?></div>
2624+
<?php } ?>
26152625

2616-
} ?>
2626+
</div>
2627+
2628+
<?php if ( !empty( $value['step_image']['url'] ) ) { ?>
2629+
2630+
<?php $link_key = 'mt-lightbox-' . ( $key + 1 );
2631+
2632+
if ( 'no' !== $settings['step_enable_lightbox'] ) {
2633+
$this->add_render_attribute(
2634+
$link_key,
2635+
[
2636+
'href' => $value['step_image']['url'],
2637+
'class' => 'elementor-clickable',
2638+
'data-elementor-open-lightbox' => $settings['step_enable_lightbox'],
2639+
'data-elementor-lightbox-slideshow' => $this->get_id(),
2640+
]
2641+
);
2642+
} ?>
26172643

2618-
<div class="mt-how-to-step mt-has-img mt-step-img-<?php echo $value['image_alignment'];?>" >
2619-
<?php } else { ?>
2620-
<div class="mt-how-to-step mt-has-img mt-step-img-<?php echo $settings['step_image_alignment'];?>" >
26212644
<?php } ?>
26222645

2623-
<?php if ( !empty( $value['step_title'] ) || !empty( $value['step_description'] ) ) { ?>
2624-
2625-
<div <?php echo $this->get_render_attribute_string('mt-how-to-step-content'); ?>>
2626-
2627-
<?php if ( !empty( $value['step_title'] ) ) { ?>
2628-
<?php if ( !empty($value['step_image_link']['url'] ) ) { ?>
2629-
<a target="_blank" href="<?php echo $value['step_image_link']['url'];?>" >
2630-
<?php } ?>
2631-
<<?php echo $settings['step_html_tag'];?> <?php echo $this->get_render_attribute_string('mt-how-to-step-title'); ?> ><?php echo $value['step_title'];?></<?php echo $settings['step_html_tag'];?> >
2632-
<?php if ( !empty($value['step_image_link']['url'] ) ) { ?>
2633-
</a>
2634-
<?php } ?>
2646+
<?php if ( $value['image_position'] == 'custom' && ( $value['image_alignment'] == 'top' || $value['image_alignment'] == 'bottom' ) ) { ?>
26352647

2636-
<?php } ?>
2648+
<div class="mt-how-to-step-image" style="align-self:<?php echo $value['horizontal_alignment'];?>">
26372649

2638-
<?php if ( !empty( $value['step_description'] ) ) { ?>
2639-
<div class="mt-how-to-step-description"><?php echo $value['step_description'];?></div>
2640-
<?php } ?>
2650+
<?php } elseif( $value['image_position'] == 'custom' && ( $value['image_alignment'] == 'left' || $value['image_alignment'] == 'right' ) ) { ?>
26412651

2642-
</div>
2643-
2644-
<?php } ?>
2645-
2646-
<?php if ( !empty( $value['step_image']['url'] ) ) { ?>
2647-
2648-
<?php
2649-
$link_key = 'mt-lightbox-' . ( $key + 1 );
2650-
2651-
if ( 'no' !== $settings['step_enable_lightbox'] ) {
2652-
$this->add_render_attribute(
2653-
$link_key,
2654-
[
2655-
'href' => $value['step_image']['url'],
2656-
'class' => 'elementor-clickable',
2657-
'data-elementor-open-lightbox' => $settings['step_enable_lightbox'],
2658-
'data-elementor-lightbox-slideshow' => $this->get_id(),
2659-
]
2660-
);
2661-
}
2662-
?>
2663-
2664-
<div <?php echo $this->get_render_attribute_string('mt-how-to-step-image'); ?> >
2665-
<?php if ( 'no' !== $settings['step_enable_lightbox'] ) {
2666-
echo '<a ' . wp_kses_post( $this->get_render_attribute_string( $link_key ) ) . '>';
2667-
} ?>
2668-
<img src="<?php echo $value['step_image']['url'];?>" alt="Place Step Title Here" title="<?php echo $settings['steps_title'];?>" >
2669-
<?php if ( 'no' !== $settings['step_enable_lightbox'] ) {
2670-
echo '</a>';
2671-
} ?>
2672-
</div>
2673-
2674-
<?php } ?>
2652+
<div class="mt-how-to-step-image" style="align-self:<?php echo $value['vertical_alignment'];?>">
2653+
2654+
<?php } else { ?>
2655+
2656+
<div class="mt-how-to-step-image">
2657+
2658+
<?php } ?>
2659+
<?php if ( 'no' !== $settings['step_enable_lightbox'] ) {
2660+
echo '<a ' . wp_kses_post( $this->get_render_attribute_string( $link_key ) ) . '>';
2661+
} ?>
2662+
<img src="<?php echo $value['step_image']['url'];?>" alt="Place Step Title Here" title="<?php echo $settings['steps_title'];?>" >
2663+
<?php if ( 'no' !== $settings['step_enable_lightbox'] ) {
2664+
echo '</a>';
2665+
} ?>
2666+
</div>
26752667

26762668
</div>
26772669

0 commit comments

Comments
 (0)