mantismamita
8/10/2015 - 9:25 AM

Progress row module

Progress row module

.progress-row{
  background-color: $secondary-text-color;
  padding: 100px 0 100px 0;
  color: #fff;
  position: relative;

  .wrap{
    border-bottom: 2px solid #fff;
  }

  .progress-title{
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 30px;
    text-align: center;
    color: #fff;

    &:after{
      content: "_____";
      display: block;
      font-weight: 400;
    }
  }
  .progress-subtitle {
    font-weight: 400;
    margin-bottom: 60px;
    font-size: 20px;
    text-align: center;
    color: #fff;
  }
}
.progress-step{
  text-align: center;
  position: relative;
  padding-bottom: 40px;
  h5, h6, .fa{
    color: $primary-color-text;
  }
  h6{
    font-weight: 400;
  }
  .panel{
    min-height: 216px;
  }
  .panel .fa{
    font-size: 42px;
    color: $primary-color-dark;
    padding: 20px 0;
  }
  .fa-circle-o{
    position: absolute;
    bottom: -10px;
    margin-left: -10px;
    background-color: $secondary-text-color;
    border-radius: 100%;
    color: #fff;
    font-size: 20px;
    height: 20px;
    width: 20px;
  }
  &:hover{
    .panel{
      background-color: $accent-color;
      .fa, h5, h6 {
      color: #fff;
      }
      &:after{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 12px 0 12px;
        border-color: $accent-color transparent transparent transparent;
        position: absolute;
        bottom: -12px;
        margin-left: -12px;
      }
    }
    .fa-circle-o{
      background-color: $primary-color-light;
      background-position: center center;
      color: transparent;
      border: 3px solid $primary-color-dark;
      font-weight: bold;
    }
  }
}
.progress-step:first-of-type {
    margin-left: 0;
}
function kc_do_frontpage_progress_row() { ?>
	<?php

	if (have_rows('progress_repeater')):
		$rows= get_field('progress_repeater');
		$count= count($rows);

		if ($count == 1 ){
			$class = "full-width progress-step";
		} elseif ( $count == 2 ) {
			$class = "one-half progress-step";
		} elseif ( $count == 3) {
			$class = "one-third progress-step";
		} elseif ( $count == 4) {
			$class = "one-fourth progress-step";
		} else {
			$class = "one-fifth progress-step";
		}

		?>
		<div class="progress-row">
			<div class="wrap">

			<h4 class="progress-title"><?php ( get_field('progress_title') ? the_field('progress_title') : '' );?></h4>
			<h5 class="progress-subtitle"><?php ( get_field('progress_subtitle') ? the_field('progress_subtitle') : '' );?></h5>
			<?php while (have_rows('progress_repeater')):
				the_row();



				$step_icon = get_sub_field('step_icon');


				?>

				<div class="<?php echo $class; ?>">
					<div class="panel">

						<i class="fa <?php echo $step_icon; ?>"></i>


						<h5 class="step-title"><?php the_sub_field('step_title'); ?></h5>

						<h6 class="step-description"><?php the_sub_field('step_description'); ?></h6>
						<a href="<?php the_sub_field('step_link'); ?>"><span class="div-link"></span></a>

					</div>
					<i class="fa fa-circle-o"></i>
				</div>

				<?php

			endwhile; ?>

			</div>

		</div>
	<?php endif; ?>
	<?php
}

#Progress module

##Requirements -WordPress -ACF Pro

[
    {
        "key": "group_55c65ddbd14ea",
        "title": "Progress Module",
        "fields": [
            {
                "key": "field_55c66f980c854",
                "label": "Progress Title",
                "name": "progress_title",
                "type": "text",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "",
                "placeholder": "",
                "prepend": "",
                "append": "",
                "maxlength": "",
                "readonly": 0,
                "disabled": 0
            },
            {
                "key": "field_55c66faf0c855",
                "label": "Progress Subtitle",
                "name": "progress_subtitle",
                "type": "text",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "",
                "placeholder": "",
                "prepend": "",
                "append": "",
                "maxlength": "",
                "readonly": 0,
                "disabled": 0
            },
            {
                "key": "field_55c65e9d99347",
                "label": "Progress Repeater",
                "name": "progress_repeater",
                "type": "repeater",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "min": 3,
                "max": 5,
                "layout": "block",
                "button_label": "Add Row",
                "sub_fields": [
                    {
                        "key": "field_55c660149934a",
                        "label": "Step Link",
                        "name": "step_link",
                        "type": "page_link",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": 25,
                            "class": "",
                            "id": ""
                        },
                        "post_type": [

                        ],
                        "taxonomy": [

                        ],
                        "allow_null": 0,
                        "multiple": 0
                    },
                    {
                        "key": "field_55c65f8799348",
                        "label": "Step Icon",
                        "name": "step_icon",
                        "type": "text",
                        "instructions": "Font Awesome Icon class name",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": 25,
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "placeholder": "",
                        "prepend": "",
                        "append": "",
                        "maxlength": "",
                        "readonly": 0,
                        "disabled": 0
                    },
                    {
                        "key": "field_55c65e3599346",
                        "label": "Step Title",
                        "name": "step_title",
                        "type": "text",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": 25,
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "placeholder": "",
                        "prepend": "",
                        "append": "",
                        "maxlength": "",
                        "readonly": 0,
                        "disabled": 0
                    },
                    {
                        "key": "field_55c65ffa99349",
                        "label": "Step Description",
                        "name": "step_description",
                        "type": "textarea",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": 25,
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "placeholder": "",
                        "maxlength": "",
                        "rows": "",
                        "new_lines": "wpautop",
                        "readonly": 0,
                        "disabled": 0
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "page_type",
                    "operator": "==",
                    "value": "front_page"
                }
            ]
        ],
        "menu_order": 0,
        "position": "acf_after_title",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "field",
        "hide_on_screen": ""
    }
]