7-rows edit

<!-- components/7-rows/statistics.php --> <!-- uses adjust-row-card-height() to set all cards to have height of tallest card, regardless of wrapping --> <!-- HARD-CODED EXAMPLE FOR TESTING use VS Code extension "Nest Comments" to uncomment --> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row StatsRow h-theme-white"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title StatsRow__title">New code - Hard Coded - Stats Row</h3> <div class="wm-row__intro-text StatsRow__intro-text"> <p>Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti. A praesentium nisi molestias iusto nihil minus aspernatur inventore quia cum. Minus saepe eius voluptates quas nisi voluptate earum iusto. Commodi in modi dolores ex est aut voluptas quisquam optio adipisci explicabo temporibus dolor a repellat. Ut consequatur rerum porro ut fugiat atque perferendis.</p> </div> <ul class="wm-cards --cards5 --chars5 h-theme-cards StatsRow__cards"> <!-- if link, output link class --> <li class="wm-card h-theme-card StatsRow__card -alt-theme"> <!-- visual area with designed text --> <div class=" wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top">Top</sup> <span class="wm-statnum__number">3</span> <sub class="wm-statnum--append-bottom"></sub> <sub class="wm-statnum--append-top"></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> ALT THEME - Cheeseburgers </h4> <div class="wm-description-text__publication StatsRow__description-text-publication"> Barnes &amp; Noble </div> </div> </li> <!-- if link, output link class --> <li class="wm-card wm-card--isLink h-theme-card StatsRow__card"> <!-- visual area with designed text --> <div class=" wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top">Top</sup> <span class="wm-statnum__number">3</span> <sub class="wm-statnum--append-bottom"></sub> <sub class="wm-statnum--append-top"></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> Is Link </h4> <div class="wm-description-text__publication StatsRow__description-text-publication"> Pops Greatest 100 Hits </div> </div> </li> <!-- if link, output link class --> <li class="wm-card h-theme-card StatsRow__card"> <!-- visual area with designed text --> <div class=" wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top">#</sup> <span class="wm-statnum__number">25</span> <sub class="wm-statnum--append-bottom"></sub> <sub class="wm-statnum--append-top"></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> Terse </h4> </div> </li> <!-- if link, output link class --> <li class="wm-card h-theme-card StatsRow__card"> <!-- visual area with designed text --> <div class=" wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top">$</sup> <span class="wm-statnum__number">342</span> <sub class="wm-statnum--append-bottom">million</sub> <sub class="wm-statnum--append-top"></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> Terse </h4> </div> </li> <!-- if link, output link class --> <li class="wm-card h-theme-card StatsRow__card"> <!-- visual area with designed text --> <div class=" wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top"></sup> <span class="wm-statnum__number">4037</span> <sub class="wm-statnum--append-bottom">ft.</sub> <sub class="wm-statnum--append-top"></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> Best Ever </h4> <div class="wm-description-text__publication StatsRow__description-text-publication"> Twitter </div> </div> </li> <!-- if link, output link class --> <li class="wm-card h-theme-card StatsRow__card"> <!-- visual area with designed text --> <div class=" wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"></sup> <sup class="wm-statnum--prepend-top">$</sup> <span class="wm-statnum__number">5,378</span> <sub class="wm-statnum--append-bottom">billion</sub> <sub class="wm-statnum--append-top"></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> Amount of gallons saved in 2021 </h4> <div class="wm-description-text__publication StatsRow__description-text-publication"> Twitter </div> <div class="wm-description-text__caption StatsRow__description-text-caption"> <p>Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti. </p> </div> </div> </li> </ul> </div> </div> </section> <?php $downArrow = '<i class="fa-regular fa-arrow-down"></i>'; $upArrow = '<i class="fa-regular fa-arrow-up"></i>'; // output all the row options $themeArray = ["white", "green", "silver"]; // switches text colors $optionArray = ["", "t-alt"]; $statsArray = [ ["prelow" => "", "pre" => "Top", "num" => "3", "applow" => "", "apphigh" => ""], ["prelow" => "", "pre" => "#", "num" => "25", "applow" => "", "apphigh" => ""], ["prelow" => "", "pre" => "$", "num" => "342", "applow" => "million", "apphigh" => ""], ["prelow" => "", "pre" => "", "num" => "4037", "applow" => "ft.", "apphigh" => ""], ["prelow" => "", "pre" => "$", "num" => "5,378", "applow" => "billion", "apphigh" => ""], ["prelow" => "", "pre" => "", "num" => "63,124", "applow" => "kb", "apphigh" => ""], ["prelow" => $upArrow, "pre" => "", "num" => "700,821", "applow" => "", "apphigh" => "st"], ["prelow" => $downArrow, "pre" => "", "num" => "1", "applow" => "", "apphigh" => "%"] ]; $titleArray = ["", "", "Cheeseburgers", "Soft Rock from the '90s to today", "Terse", "Best Ever", "Amount of gallons saved in 2021", "William & Mary Rocks", "Short title", "Students"];; $introText = true; $pubArray = ["", "", "Barnes & Noble", "Pops Greatest 100 Hits", "", "Twitter", "", "Simon & Garfunkel", "Page Type", ""];; $captionShort = '<p>Aspernatur inventore quia cum. Minus saepe eius voluptates quas nisi voluptate earum iusto.</p>'; // test long caption $captionLong = '<p>A praesentium nisi molestias iusto nihil minus aspernatur inventore quia cum. Minus saepe eius voluptates quas nisi voluptate earum iusto.</p>'; $captionArray = ["", $captionShort, $captionLong, "", $captionShort, $captionLong, ""]; // 3 themes - per row // publication on/off - per row // title on/off - per row // link on/off - per card // output rows with num of cards between 2 and 8 $numCards = 2; $maxCards = 8; $isLink = true; $isAlt = ""; // output rows until max cards reached $currentNum = 4; $currentTheme = 0; $switchTheme = 0; for ($i = 0; $i < $maxCards - 1; $i++) { ?> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row StatsRow h-theme-<?php echo $themeArray[$currentTheme]; ?>"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title StatsRow__description">New code - Stats Row</h3> <?php if ($introText) { ?> <div class="wm-row__intro-text"> <p>Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti. A praesentium nisi molestias iusto nihil minus aspernatur inventore quia cum. Minus saepe eius voluptates quas nisi voluptate earum iusto. Commodi in modi dolores ex est aut voluptas quisquam optio adipisci explicabo temporibus dolor a repellat. Ut consequatur rerum porro ut fugiat atque perferendis.</p> </div> <?php }; // get longest number $longestNumber = 1; for ($j = $numCards; $j < $currentNum; $j++) { $numberLength = strlen($statsArray[$j - 2]["num"]); $numberLength > $longestNumber ? $longestNumber = $numberLength : null; } ?> <ul class="wm-cards --cards<?php echo ($currentNum - 2); ?> h-theme-cards StatsRow__cards"> <?php // output cards from 2-8 for ($j = $numCards; $j < $currentNum; $j++) { if ($j == $maxCards + 2) { break; } ?> <!-- if link, output link class --> <li class="wm-card --chars<?php echo $longestNumber; ?> <?php if ($isLink) { echo ' wm-card--isLink'; } ?> h-theme-card StatsRow__card <?php echo $isAlt; ?>"> <!-- visual area with designed text --> <div class="wm-card__graphic-section StatsRow__graphic-section"> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"><?php echo $statsArray[$j - 2]["prelow"]; ?></sup> <sup class="wm-statnum--prepend-top"><?php echo $statsArray[$j - 2]["pre"]; ?></sup> <span class="wm-statnum__number"><?php echo $statsArray[$j - 2]["num"]; ?></span> <sub class="wm-statnum--append-bottom"><?php echo $statsArray[$j - 2]["applow"]; ?></sub> <sub class="wm-statnum--append-top"><?php echo $statsArray[$j - 2]["apphigh"]; ?></sub> </div> </div> <!-- text area --> <div class="wm-card__text-section StatsRow__text-section"> <h4 class="wm-card__title wm-description-text__title StatsRow__description-text-title"> <?php if ($isLink) { echo '<a href="https://www.wm.edu">'; } ?> <?php echo $titleArray[$j]; ?> <?php if ($isLink) { echo '</a>'; } ?> </h4> <?php if ($pubArray[$j] != "") { ?> <div class="wm-description-text__publication StatsRow__description-text-publication"> <?php echo $pubArray[$j]; ?> </div> <?php }; if ($captionArray[$i] != "") { ?> <div class="wm-description-text__caption StatsRow__description-text-caption"> <?php echo $captionArray[$i]; ?> </div> <?php }; ?> </div> </li> <?php }; $currentNum = $currentNum + 1; ?> </ul> </div> </div> </section> <?php // swap per row settings $isLink == false ? $isLink = true : $isLink = false; $isAlt == "" ? $isAlt = " -alt-theme" : $isAlt = ""; // on every even row, switch theme if ($switchTheme == 1) { if ($currentTheme != 2) { $currentTheme = $currentTheme + 1; } else { $currentTheme = 0; } } $switchTheme == 0 ? $switchTheme = 1 : $switchTheme = 0; } ?> <script src='<?php echo $base_url; ?>/js/adjust-row-card-height.js'></script>