<!-- GENERATE DESKTOP CHARTS -->

Notice: Undefined index: data in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 55 Call Stack: 0.0003 278248 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
0.0007 312304 2. eval('?>
<?php
// These css classes are used to change the cell depending on what column its in
    $stage1 = [
        'background-color' => 'careers__background__color-stage-1 ',
        'full' => 'col-xs-2 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-1 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-1 ',
        'arrow' => 'careers__arrow--stage-1 ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-1 ',
        'stage' => ' stage-1 ',
    ];
    $stage2 = [
        'background-color' => 'careers__background__color-stage-2 ',
        'full' => 'col-xs-3 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-2 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-2 ',
        'arrow' => 'careers__arrow--stage-2 ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-2 ',
        'stage' => ' stage-2 ',
    ];
    $stage3 = [
        'background-color' => 'careers__background__color-stage-3 ',
        'full' => 'col-xs-3 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-3 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-3 ',
        'arrow' => 'careers__arrow--stage-3  ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-3 ',
        'stage' => ' stage-3 ',
    ];
    $stage4 = [
        'background-color' => 'careers__background__color-stage-4 ',
        'full' => 'col-xs-4 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-4 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-4 ',
        'arrow' => 'careers__arrow--stage-4  ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-4 ',
        'stage' => ' stage-4 '
    ];
    // Classes which refer to the type of cell
    $div_types = [
        'cell' => 'careers-framework-table-cell ',
        'arrow_cell' => 'careers-framework__arrow__stem ',
        'header_container' => 'careers-framework__header__container flex-row ',
        'arrow_container' => 'careers-framework__arrow__container ',
        'desktop_chart_container' => ' careers-framework__chart__container desktop__table ',
        'title' => 'careers-framework-table-title ',
        'mobile_chart_container' => 'mobile__table ',
        'mobile_column_container' => 'careers-framework__mobile__column col-xs-12 ',
        'title_container' => 'careers-framework__title__container ',
        'header_svg_container' => 'careers-framework__header__svg__container ',
        'mobile_header_svg_container' => 'careers-framework__svg__header__container-mobile '
    ];
?>
    <!-- GENERATE DESKTOP CHARTS -->
    <?php $chart = $variables['data']['#data']['chart']; ?>
    <div aria-hidden="true" class='<?php print $div_types[' desktop_chart_container '] . ' container '; ?>'>
        <!-- Table name -->
        <div class='flex-row'>
            <div class='col-xs-12'>
                <!-- CHART CONTAINER -->
                <div class='container careers-framework__table__container'>
                    <div class='careers-framework-wellcome_logo'></div>
                    <div class='flex-row'>
                        <?php foreach($chart['columns'] as $key => $stage) : ?>
                        <!-- COLUMN -->
                        <div class='<?php print ${$key}[' full '] . ${$key}['stage '] ?>'>
                            <!-- TITLE ROW -->
                            <div class='<?php print $div_types[' header_container '] . ${$key}['stage ']; ?>'>
                                <div class='<?php print $div_types[' header_svg_container ']; ?>'>
                                    <div class='<?php print ${$key}[' svg ']; ?>'></div>
                                </div>
                                <div class='<?php print $div_types[' title_container '] . 'col-xs-9 '; ?>'>
                                    <span class='<?php print ${$key}[' stage '];?>'>
                                        <a href='<?php print $stage['title_url']  ;?>'>
                                            <p><?php print $stage['shortened_title']  ;?></p>
                                        </a>
                                    </span>
                                </div>
                            </div>
                            <!-- ARROW ROW  -->
                            <div class='flex-row <?php print $div_types[' arrow_container '] ?>'>
                                <div class='<?php print $div_types[' arrow_cell '] . ${$key}['background-color ']; ?>'>
                                    <div class='<?php print ${$key}[' arrow ']; ?>'></div>
                                </div>
                            </div>
                            <!-- TABLE ROWS  -->
                            <?php print $chart['columns'][$key]['rows']; ?>
                        </div>
                        <?php endforeach?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- GENERATE MOBILE CHARTS -->
    <div class='<?php print $div_types[' mobile_chart_container ']; ?>'>
        <?php foreach($chart['columns'] as $stage_name => $stage) : ?>
        <div class='container'>
            <div class='flex-row'>
                <div class='<?php print $div_types[' mobile_column_container '] ?>'>
                    <!-- TITLE ROW -->
                    <div class='<?php print ' flex-row ' . ${$stage_name}['mobile_header_row '] ?>'>
                        <div class='<?php print $div_types[' mobile_header_svg_container ']; ?>'>
                            <div class='<?php print ${$stage_name}[' mobile_svg ']; ?>'></div>
                        </div>
                        <div class='<?php print $div_types[' title_container '] . 'col-xs-9 '; ?>'>
                            <span>
                              <h3>
                                <a href='<?php print $stage['title_url']  ;?>'>
                                  <?php print $stage['title'] ;?>
                                </a>
                              </h3>
                            </span>
                        </div>
                    </div>
                    <!-- TABLE ROWS  -->
                    <?php print $chart['columns'][$stage_name]['mobile']; ?>
                </div>
            </div>
        </div>
        <?php endforeach?>
    </div>
    ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

    <div aria-hidden="true" class=' careers-framework__chart__container desktop__table  container'>
        <!-- Table name -->
        <div class='flex-row'>
            <div class='col-xs-12'>
                <!-- CHART CONTAINER -->
                <div class='container careers-framework__table__container'>
                    <div class='careers-framework-wellcome_logo'></div>
                    <div class='flex-row'>

                        Warning: Invalid argument supplied for foreach() in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 64 Call Stack: 0.0003 278248 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
                        0.0007 312304 2. eval('?>
                        <?php
// These css classes are used to change the cell depending on what column its in
    $stage1 = [
        'background-color' => 'careers__background__color-stage-1 ',
        'full' => 'col-xs-2 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-1 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-1 ',
        'arrow' => 'careers__arrow--stage-1 ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-1 ',
        'stage' => ' stage-1 ',
    ];
    $stage2 = [
        'background-color' => 'careers__background__color-stage-2 ',
        'full' => 'col-xs-3 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-2 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-2 ',
        'arrow' => 'careers__arrow--stage-2 ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-2 ',
        'stage' => ' stage-2 ',
    ];
    $stage3 = [
        'background-color' => 'careers__background__color-stage-3 ',
        'full' => 'col-xs-3 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-3 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-3 ',
        'arrow' => 'careers__arrow--stage-3  ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-3 ',
        'stage' => ' stage-3 ',
    ];
    $stage4 = [
        'background-color' => 'careers__background__color-stage-4 ',
        'full' => 'col-xs-4 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-4 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-4 ',
        'arrow' => 'careers__arrow--stage-4  ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-4 ',
        'stage' => ' stage-4 '
    ];
    // Classes which refer to the type of cell
    $div_types = [
        'cell' => 'careers-framework-table-cell ',
        'arrow_cell' => 'careers-framework__arrow__stem ',
        'header_container' => 'careers-framework__header__container flex-row ',
        'arrow_container' => 'careers-framework__arrow__container ',
        'desktop_chart_container' => ' careers-framework__chart__container desktop__table ',
        'title' => 'careers-framework-table-title ',
        'mobile_chart_container' => 'mobile__table ',
        'mobile_column_container' => 'careers-framework__mobile__column col-xs-12 ',
        'title_container' => 'careers-framework__title__container ',
        'header_svg_container' => 'careers-framework__header__svg__container ',
        'mobile_header_svg_container' => 'careers-framework__svg__header__container-mobile '
    ];
?>
                            <!-- GENERATE DESKTOP CHARTS -->
                            <?php $chart = $variables['data']['#data']['chart']; ?>
                            <div aria-hidden="true" class='<?php print $div_types[' desktop_chart_container '] . ' container '; ?>'>
                                <!-- Table name -->
                                <div class='flex-row'>
                                    <div class='col-xs-12'>
                                        <!-- CHART CONTAINER -->
                                        <div class='container careers-framework__table__container'>
                                            <div class='careers-framework-wellcome_logo'></div>
                                            <div class='flex-row'>
                                                <?php foreach($chart['columns'] as $key => $stage) : ?>
                                                <!-- COLUMN -->
                                                <div class='<?php print ${$key}[' full '] . ${$key}['stage '] ?>'>
                                                    <!-- TITLE ROW -->
                                                    <div class='<?php print $div_types[' header_container '] . ${$key}['stage ']; ?>'>
                                                        <div class='<?php print $div_types[' header_svg_container ']; ?>'>
                                                            <div class='<?php print ${$key}[' svg ']; ?>'></div>
                                                        </div>
                                                        <div class='<?php print $div_types[' title_container '] . 'col-xs-9 '; ?>'>
                                                            <span class='<?php print ${$key}[' stage '];?>'>
                                        <a href='<?php print $stage['title_url']  ;?>'>
                                            <p><?php print $stage['shortened_title']  ;?></p>
                                        </a>
                                    </span>
                                                        </div>
                                                    </div>
                                                    <!-- ARROW ROW  -->
                                                    <div class='flex-row <?php print $div_types[' arrow_container '] ?>'>
                                                        <div class='<?php print $div_types[' arrow_cell '] . ${$key}['background-color ']; ?>'>
                                                            <div class='<?php print ${$key}[' arrow ']; ?>'></div>
                                                        </div>
                                                    </div>
                                                    <!-- TABLE ROWS  -->
                                                    <?php print $chart['columns'][$key]['rows']; ?>
                                                </div>
                                                <?php endforeach?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- GENERATE MOBILE CHARTS -->
                            <div class='<?php print $div_types[' mobile_chart_container ']; ?>'>
                                <?php foreach($chart['columns'] as $stage_name => $stage) : ?>
                                <div class='container'>
                                    <div class='flex-row'>
                                        <div class='<?php print $div_types[' mobile_column_container '] ?>'>
                                            <!-- TITLE ROW -->
                                            <div class='<?php print ' flex-row ' . ${$stage_name}['mobile_header_row '] ?>'>
                                                <div class='<?php print $div_types[' mobile_header_svg_container ']; ?>'>
                                                    <div class='<?php print ${$stage_name}[' mobile_svg ']; ?>'></div>
                                                </div>
                                                <div class='<?php print $div_types[' title_container '] . 'col-xs-9 '; ?>'>
                                                    <span>
                              <h3>
                                <a href='<?php print $stage['title_url']  ;?>'>
                                  <?php print $stage['title'] ;?>
                                </a>
                              </h3>
                            </span>
                                                </div>
                                            </div>
                                            <!-- TABLE ROWS  -->
                                            <?php print $chart['columns'][$stage_name]['mobile']; ?>
                                        </div>
                                    </div>
                                </div>
                                <?php endforeach?>
                            </div>
                            ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- GENERATE MOBILE CHARTS -->
    <div class='mobile__table '>

        Warning: Invalid argument supplied for foreach() in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 97 Call Stack: 0.0003 278248 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
        0.0007 312304 2. eval('?>
        <?php
// These css classes are used to change the cell depending on what column its in
    $stage1 = [
        'background-color' => 'careers__background__color-stage-1 ',
        'full' => 'col-xs-2 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-1 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-1 ',
        'arrow' => 'careers__arrow--stage-1 ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-1 ',
        'stage' => ' stage-1 ',
    ];
    $stage2 = [
        'background-color' => 'careers__background__color-stage-2 ',
        'full' => 'col-xs-3 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-2 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-2 ',
        'arrow' => 'careers__arrow--stage-2 ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-2 ',
        'stage' => ' stage-2 ',
    ];
    $stage3 = [
        'background-color' => 'careers__background__color-stage-3 ',
        'full' => 'col-xs-3 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-3 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-3 ',
        'arrow' => 'careers__arrow--stage-3  ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-3 ',
        'stage' => ' stage-3 ',
    ];
    $stage4 = [
        'background-color' => 'careers__background__color-stage-4 ',
        'full' => 'col-xs-4 ',
        'svg' => 'careers-framework__svg__header-desktop-stage-4 ',
        'mobile_svg' => 'careers-framework__mobile__svg-stage-4 ',
        'arrow' => 'careers__arrow--stage-4  ',
        'mobile_header_row' => 'careers-framework__mobile__header__container careers__border__top-stage-4 ',
        'stage' => ' stage-4 '
    ];
    // Classes which refer to the type of cell
    $div_types = [
        'cell' => 'careers-framework-table-cell ',
        'arrow_cell' => 'careers-framework__arrow__stem ',
        'header_container' => 'careers-framework__header__container flex-row ',
        'arrow_container' => 'careers-framework__arrow__container ',
        'desktop_chart_container' => ' careers-framework__chart__container desktop__table ',
        'title' => 'careers-framework-table-title ',
        'mobile_chart_container' => 'mobile__table ',
        'mobile_column_container' => 'careers-framework__mobile__column col-xs-12 ',
        'title_container' => 'careers-framework__title__container ',
        'header_svg_container' => 'careers-framework__header__svg__container ',
        'mobile_header_svg_container' => 'careers-framework__svg__header__container-mobile '
    ];
?>
            <!-- GENERATE DESKTOP CHARTS -->
            <?php $chart = $variables['data']['#data']['chart']; ?>
            <div aria-hidden="true" class='<?php print $div_types[' desktop_chart_container '] . ' container '; ?>'>
                <!-- Table name -->
                <div class='flex-row'>
                    <div class='col-xs-12'>
                        <!-- CHART CONTAINER -->
                        <div class='container careers-framework__table__container'>
                            <div class='careers-framework-wellcome_logo'></div>
                            <div class='flex-row'>
                                <?php foreach($chart['columns'] as $key => $stage) : ?>
                                <!-- COLUMN -->
                                <div class='<?php print ${$key}[' full '] . ${$key}['stage '] ?>'>
                                    <!-- TITLE ROW -->
                                    <div class='<?php print $div_types[' header_container '] . ${$key}['stage ']; ?>'>
                                        <div class='<?php print $div_types[' header_svg_container ']; ?>'>
                                            <div class='<?php print ${$key}[' svg ']; ?>'></div>
                                        </div>
                                        <div class='<?php print $div_types[' title_container '] . 'col-xs-9 '; ?>'>
                                            <span class='<?php print ${$key}[' stage '];?>'>
                                        <a href='<?php print $stage['title_url']  ;?>'>
                                            <p><?php print $stage['shortened_title']  ;?></p>
                                        </a>
                                    </span>
                                        </div>
                                    </div>
                                    <!-- ARROW ROW  -->
                                    <div class='flex-row <?php print $div_types[' arrow_container '] ?>'>
                                        <div class='<?php print $div_types[' arrow_cell '] . ${$key}['background-color ']; ?>'>
                                            <div class='<?php print ${$key}[' arrow ']; ?>'></div>
                                        </div>
                                    </div>
                                    <!-- TABLE ROWS  -->
                                    <?php print $chart['columns'][$key]['rows']; ?>
                                </div>
                                <?php endforeach?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- GENERATE MOBILE CHARTS -->
            <div class='<?php print $div_types[' mobile_chart_container ']; ?>'>
                <?php foreach($chart['columns'] as $stage_name => $stage) : ?>
                <div class='container'>
                    <div class='flex-row'>
                        <div class='<?php print $div_types[' mobile_column_container '] ?>'>
                            <!-- TITLE ROW -->
                            <div class='<?php print ' flex-row ' . ${$stage_name}['mobile_header_row '] ?>'>
                                <div class='<?php print $div_types[' mobile_header_svg_container ']; ?>'>
                                    <div class='<?php print ${$stage_name}[' mobile_svg ']; ?>'></div>
                                </div>
                                <div class='<?php print $div_types[' title_container '] . 'col-xs-9 '; ?>'>
                                    <span>
                              <h3>
                                <a href='<?php print $stage['title_url']  ;?>'>
                                  <?php print $stage['title'] ;?>
                                </a>
                              </h3>
                            </span>
                                </div>
                            </div>
                            <!-- TABLE ROWS  -->
                            <?php print $chart['columns'][$stage_name]['mobile']; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach?>
            </div>
            ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

    </div>

Description

This template creates the mobile and desktop version of the careers framework chart.

Content notes

UX notes

Design notes

Back-end notes

The data structure expected

$variables['#data'] = [
    'chart' => [
        'title' => 'Chart title',
        'columns' => [ // there need to be 4 items in this array labeled 'stage1', 'stage2', 'stage3', 'stage4'
            'stage1' =>[
                'title' => 'Undergraduate education', // full title for mobile view
                'shortened_title' => 'Undergrad education', // shortened title for table
                'rows' => theme('corp_markup_career_framework_cell', [
                    'row_height' => $row_height,
                    'cells' => $cells,
                ]),
                'mobile' => theme('corp_markup_career_framework_mobile_column', [
                    'row_height' => $row_height,
                    'cells' => $cells,
                ]),
            ],
            'stage2' => [
                ...
            ],
            'stage3' => [
                ...
            ],
            'stage4' => [
                ...
            ],
        ],
    ],
];

Front-end notes

/* No context defined for this component. */
  • Handle: @career-framework-cell
  • Preview:
  • Filesystem Path: ../../modules/custom/corp_markup/theme/misc/career_framework.tpl.php/career_framework.tpl.php