app/Resources/views/Yardi/property_tabs.html.php line 378

Open in your IDE?
  1. <?php
  3.     $cache_data = json_decode( $this->property->getCache_property() );
  4.     if ( !empty( $cache_data ) && !$cache_data[ 0 ]->Error ) :
  5.         $property_data = $cache_data[ 0 ]->PropertyData;
  6.     endif;
  8.     // Resident Portal
  9.     $resident_portal = $this->property->getCache_resident_portal();
  11.     //Nav tabs
  12.     // $tab_link = null;
  13.     // if( $this->details ) {
  14.     //     $tab_link = $this->path( 'Properties S_C_N_D', [
  15.     //         'state' => $this->state,
  16.     //         'city' => $this->city,
  17.     //         'name' => $this->name,
  18.     //         'details' => $this->details
  19.     //     ]);
  20.     // } else {
  21.     //     $tab_link = $this->path( 'Properties S_C_N', [
  22.     //         'state' => $this->state,
  23.     //         'city' => $this->city,
  24.     //         'name' => $this->name
  25.     //     ]);
  26.     // }
  28.     $tab_link_base = $this->path( 'Properties S_C_N', [
  29.         'state' => $this->state,
  30.         'city' => $this->city,
  31.         'name' => $this->name
  32.     ]);
  34. ?>
  36. <style type="text/css">
  37.     @media (min-width: 0em) {
  38.         #theme-root .property-tabbedcontent {
  39.             background-color: #f8f8f8;
  40.         }
  41.         #theme-root .property-tabbedcontent .tabs-content-wrapper {
  42.             background: #fff;
  43.         }
  44.         #theme-root .property-tabbedcontent .tabs-content {
  45.             border: 0;
  46.             border-top: 0;
  47.             background: transparent;
  48.             -webkit-transition: all .5s ease;
  49.             transition: all .5s ease;
  50.         }
  51.         #theme-root .property-tabbedcontent .general-info {
  52.             padding: 2rem 1rem;
  53.         }
  54.         #theme-root .property-tabbedcontent .general-info p {
  55.             color: #000;
  56.             font-family: 'BrandonTextWeb-Bold', sans-serif;
  57.             font-size: 16px;
  58.             line-height: normal;
  59.         }
  60.         #theme-root .property-tabbedcontent .general-info p.phone > a {
  61.             color: inherit;
  62.         }
  63.         #theme-root .property-tabbedcontent .general-area {
  64.             text-align: center;
  65.             margin-bottom: 1rem;
  66.         }
  67.         #theme-root .property-tabbedcontent .street-address {
  68.             margin-bottom: 0;
  69.         }
  70.         #theme-root .property-tabbedcontent .vertical.tabs {
  71.             border: none;
  72.         }
  73.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title {
  74.             border-top: 2px solid #fff;
  75.         }
  76.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title:last-of-type {
  77.             border-bottom: 2px solid #fff;
  78.         }
  79.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title,
  80.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title a {
  81.             background-color: #e0e0e0;
  82.             font-family: 'BrandonTextWeb-Bold', sans-serif;
  83.             color: #000;
  84.             font-size: 20px;
  85.             line-height: 26px;
  86.             width: 100%;
  87.         }
  88.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title.is-active,
  89.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title.is-active a {
  90.             background-color: #333232;
  91.             color: #fff;
  92.             border: none;
  93.         }
  94.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title.is-active + .tabs-title:not(:last-of-type) {
  95.             border: none;
  96.         }
  97.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title.is-active + .tabs-title:last-of-type {
  98.             border-top: none;
  99.         }
  100.         #theme-root .property-tabbedcontent .link-area a {
  101.             font-family: 'BrandonTextWeb-Bold', sans-serif;
  102.             font-size: 14px;
  103.             display: block;
  104.             min-width: 160px;
  105.             max-width: 300px;
  106.             width: 50%;
  107.             margin: 0 auto 1rem;
  108.             text-transform: uppercase;
  109.             border-radius: 6px;
  110.             background-color: #e02e33;
  111.             transition: background-color 0.5s;
  112.         }
  113.         #theme-root .property-tabbedcontent .link-area a:hover {
  114.             background-color: #33a5bf;
  115.         }
  116.         #theme-root .property-tabbedcontent .tabs-panel {
  117.             padding: 0;
  118.         }
  119.         #theme-root .property-tabbedcontent .accordion-menu {
  120.             margin: 0 auto;
  121.             background-color: #000;
  122.             width: 100%;
  123.             text-align: center;
  124.         }
  125.         #theme-root .property-tabbedcontent .accordion-menu .is-accordion-submenu-parent>a::after {
  126.             position: static;
  127.             display: inline-block;
  128.             margin-left: 0.5rem;
  129.             font-family: FontAwesome;
  130.             content: "\F107";
  131.             color: #e03133;
  132.             border: none;
  133.             transition: all 0.25s;
  134.         }
  135.         #theme-root .property-tabbedcontent .accordion-menu .is-accordion-submenu-parent[aria-expanded="true"]:>a::after {
  136.             -webkit-transform: rotate(180deg);
  137.             transform: rotate(180deg);
  138.         }
  139.         #theme-root .property-tabbedcontent .accordion-menu a {
  140.             color: #fff;
  141.             font-family: 'BrandonTextWeb-Bold', sans-serif;
  142.             font-size: 20px;
  143.             line-height: 26px;
  144.             padding: 1.5rem;
  145.             width: 100%;
  146.         }
  147.         #theme-root .property-tabbedcontent .accordion-menu .submenu {
  148.             margin: 0 auto;
  149.         }
  150.         #theme-root .property-tabbedcontent .accordion-menu .submenu a {
  151.             background-color: #656363;
  152.             border-top: 1px solid #000;
  153.         }
  154.         #theme-root .property-tabbedcontent .accordion-menu .submenu .tabs-title.is-active a {
  155.             background-color: #33a5bf;
  156.         }
  157.         #theme-root .property-tabbedcontent .tabbed-interior .header-area {
  158.             background-color: #e0e0e0;
  159.             padding: 2rem 1rem;
  160.         }
  161.         #theme-root .property-tabbedcontent .tabbed-interior .heading {
  162.             font-family: 'BrandonTextWeb-Bold', sans-serif;
  163.             font-size: 20px;
  164.             line-height: 25px;
  165.             color: #000;
  166.         }
  167.         #theme-root .property-tabbedcontent .tabbed-interior .heading::after {
  168.             display: block;
  169.             width: 3.25rem;
  170.             height: 4px;
  171.             background: #e03133;
  172.             content: '';
  173.             margin-top: 1rem;
  174.         }
  175.         #theme-root .property-tabbedcontent .tabbed-interior .subheading {
  176.             font-family: 'BrandonTextWeb-Bold', sans-serif;
  177.             font-size: 18px;
  178.             line-height: 20px;
  179.             color: #000;
  180.         }
  181.     }
  182.     @media (min-width: 40em) {
  183.         #theme-root .property-tabbedcontent .general-info {
  184.             padding: 3rem 2rem 1rem;
  185.         }
  186.         #theme-root .property-tabbedcontent .general-info p {
  187.             font-size: 18px;
  188.             line-height: 20px;
  189.         }
  190.         #theme-root .property-tabbedcontent .general-area {
  191.             text-align: left;
  192.         }
  193.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title,
  194.         #theme-root .property-tabbedcontent .vertical.tabs .tabs-title a {
  195.             font-size: 22px;
  196.             line-height: 28px;
  197.         }
  198.         #theme-root .property-tabbedcontent .link-area a {
  199.             /*width: 40%;*/
  200.             width: auto;
  201.             /*float: left;*/
  202.             float: right;
  203.             margin-left: 1rem;
  204.         }
  205.         #theme-root .property-tabbedcontent .accordion-menu a {
  206.             font-size: 22px;
  207.             line-height: 28px;
  208.         }
  209.         #theme-root .property-tabbedcontent .tabbed-interior .header-area {
  210.             padding: 3rem 2rem 2rem;
  211.         }
  212.         #theme-root .property-tabbedcontent .tabbed-interior .heading {
  213.             font-size: 25px;
  214.             line-height: 30px;
  215.         }
  216.         #theme-root .property-tabbedcontent .tabbed-interior .subheading {
  217.             font-size: 19px;
  218.             line-height: 21px;
  219.         }
  220.     }
  221.     @media (min-width: 64em) {
  222.         #theme-root .property-tabbedcontent {
  223.             background-color: #e0e0e0;
  224.         }
  225.         #theme-root .property-tabbedcontent .interior {
  226.             max-width: none;
  227.             padding: 0;
  228.             margin: 0;
  229.         }
  230.         #theme-root .property-tabbedcontent .general-info {
  231.             max-width: 300px;
  232.             margin: 0 0 0 auto;
  233.         }
  234.         #theme-root .property-tabbedcontent .general-info p {
  235.             /*font-size: 20px;*/
  236.             font-size: 17px;
  237.             line-height: 23px;
  238.         }
  239.         #theme-root .property-tabbedcontent .vertical.tabs {
  240.             max-width: 300px;
  241.             margin: 0 0 0 auto;
  242.         }
  243.         #theme-root .property-tabbedcontent .link-area {
  244.             max-width: 300px;
  245.             margin: 3rem 0 0 auto;
  246.         }
  247.         #theme-root .property-tabbedcontent .link-area a {
  248.             font-size: 16px;
  249.             max-width: none;
  250.             width: 70%;
  251.             float: none;
  252.             margin: 0 auto 2rem;
  253.         }
  254.         #theme-root .property-tabbedcontent .tabbed-interior .header-area {
  255.             padding: 3rem 4rem 2rem;
  256.             background-color: #333232;
  257.         }
  258.         #theme-root .property-tabbedcontent .tabbed-interior .heading {
  259.             color: #fff;
  260.             font-size: 30px;
  261.             line-height: 35px;
  262.         }
  263.         #theme-root .property-tabbedcontent .tabbed-interior .subheading {
  264.             font-size: 20px;
  265.             line-height: 22px;
  266.         }
  267.         .Anchor-Target {
  268.             position: relative;
  269.             top: -78px;
  270.         }
  271.     }
  272. </style>
  274. <?php /* TABS */ ?>
  275. <?php if ( !empty( $property_data ) ) : ?>
  276.     <div class="Anchor-Target" id="property-tabs"></div>
  277.     <div class="property-tabbedcontent">
  278.         <a class="Anchor-Target"></a>
  279.         <div class="interior grid-container">
  280.             <div class="grid-x">
  281.                 <div class="cell large-4">
  283.                     <?php /* GENERAL INFO ABOVE TABS */ ?>
  284.                     <div class="general-info grid-x .align-middle">
  285.                         <div class="general-area small-12 medium-4 large-12 cell">
  286.                             <p class="street-address"><?= $property_data->address ?></p>
  287.                             <p class="city-state-zip"><?= $property_data->city ?>, <?= $property_data->state ?> <?= $property_data->zipcode ?></p>
  288.                             <p class="phone"><a href="tel:+1<?= preg_replace('/\D+/', '', $property_data->phone) ?>"><?= $property_data->phone ?></a></p>
  289.                         </div>
  291.                         <?php /* LINK AREA FOR MOBILE/TABLET */ ?>
  292.                         <div class="link-area small-12 medium-8 cell hide-for-large">
  293.                             <a class="button" href="//<?= $property_data->url ?>" target="_blank">Property Site</a>
  294.                             <?php if ( !empty ( $resident_portal ) ) : ?>
  295.                                 <a class="button" href="<?= $resident_portal ?>" target="_blank">Resident Portal</a>
  296.                             <?php endif; ?>
  297.                         </div>
  298.                     </div>
  300.                     <?php /* TAB TRIGGERS DESKTOP */ ?>
  301.                     <div class="vertical tabs show-for-large">
  302.                         <div class="tabs-title <?php echo ( !$this->details ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '#property-tabs'; ?>" aria-selected="true">Features &amp; Amenities</a></div>
  303.                         <div class="tabs-title <?php echo ( $this->details == 'gallery' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/gallery#property-tabs'; ?>" aria-selected="true">Gallery</a></div>
  304.                         <div class="tabs-title <?php echo ( $this->details == 'floorplans' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/floorplans#property-tabs'; ?>" aria-selected="true">Floorplans</a></div>
  305.                         <div class="tabs-title <?php echo ( $this->details == 'neighborhood' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/neighborhood#property-tabs'; ?>" aria-selected="true">Neighborhood</a></div>
  306.                         <?php /* SOCIAL TAB DISABLED? */ ?>
  307.                         <?php $disable_social_tab = json_decode( $this->property->getDisable_social_tab() );?>
  308.                         <?php if ( !$disable_social_tab ) : ?>
  309.                             <div class="tabs-title <?php echo ( $this->details == 'social' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/social#property-tabs'; ?>" aria-selected="true">Social</a></div>
  310.                         <?php endif; ?>
  311.                         <div class="tabs-title <?php echo ( $this->details == 'contact' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/contact#property-tabs'; ?>" aria-selected="true">Contact Us</a></div>
  312.                     </div>
  314.                     <?php /* LINK AREA FOR DESKTOP */ ?>
  315.                     <div class="link-area show-for-large">
  316.                         <a class="button" href="http://<?= $property_data->url ?>" target="_blank">Property Site</a>
  317.                         <?php if ( !empty ( $resident_portal ) ) : ?>
  318.                             <a class="button" href="<?= $resident_portal ?>" target="_blank">Resident Portal</a>
  319.                         <?php endif; ?>
  320.                     </div>
  321.                 </div>
  323.                 <?php /* TAB TRIGGERS MOBILE/TABLET */ ?>
  324.                 <ul class="vertical menu accordion-menu hide-for-large" data-accordion-menu data-submenu-toggle="false">
  325.                     <li>
  326.                         <a href="#">Community Menu</a>
  327.                         <ul class="menu vertical nested">
  328.                             <div class="tabs-title <?php echo ( !$this->details ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '#property-tabs'; ?>" aria-selected="true">Features &amp; Amenities</a></div>
  329.                             <div class="tabs-title <?php echo ( $this->details == 'gallery' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/gallery#property-tabs'; ?>" aria-selected="true">Gallery</a></div>
  330.                             <div class="tabs-title <?php echo ( $this->details == 'floorplans' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/floorplans#property-tabs'; ?>" aria-selected="true">Floorplans</a></div>
  331.                             <div class="tabs-title <?php echo ( $this->details == 'neighborhood' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/neighborhood#property-tabs'; ?>" aria-selected="true">Neighborhood</a></div>
  332.                             <?php /* SOCIAL TAB DISABLED? */ ?>
  333.                             <?php $disable_social_tab = json_decode( $this->property->getDisable_social_tab() );?>
  334.                             <?php if ( !$disable_social_tab ) : ?>
  335.                                 <div class="tabs-title <?php echo ( $this->details == 'social' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/social#property-tabs'; ?>" aria-selected="true">Social</a></div>
  336.                             <?php endif; ?>
  337.                             <div class="tabs-title <?php echo ( $this->details == 'contact' ? 'is-active' : '' ); ?>"><a href="<?php echo $tab_link_base . '/contact#property-tabs'; ?>" aria-selected="true">Contact Us</a></div>
  338.                         </ul>
  339.                     </li>
  340.                 </ul>
  342.                 <?php /* TAB CONTENT CONTAINERS */ ?>
  343.                 <div class="cell large-8 medium-12 tabs-content-wrapper">
  344.                     <div class="tabs-content">
  346.                         <?php if ( !$this->details ) : ?>
  347.                             <div class="tabs-panel <?php echo ( !$this->details ? 'is-active' : '' ); ?>">
  348.                                 <?= $this->template( 'Yardi/property_amenities.html.php' ) ?>
  349.                             </div>
  350.                         <?php endif; ?>
  352.                         <?php if ( $this->details == 'gallery' ) : ?>
  353.                             <div class="tabs-panel <?php echo ( $this->details == 'gallery' ? 'is-active' : '' ); ?>">
  354.                                 <?= $this->template( 'Yardi/property_gallery.html.php' ) ?>
  355.                             </div>
  356.                         <?php endif; ?>
  358.                         <?php if ( $this->details == 'floorplans' ) : ?>
  359.                             <div class="tabs-panel <?php echo ( $this->details == 'floorplans' ? 'is-active' : '' ); ?>">
  360.                                 <?= $this->template( 'Yardi/property_floorplans.html.php' ) ?>
  361.                             </div>
  362.                         <?php endif; ?>
  364.                         <?php if ( $this->details == 'neighborhood' ) : ?>
  365.                             <div class="tabs-panel <?php echo ( $this->details == 'neighborhood' ? 'is-active' : '' ); ?>">
  366.                                 <?= $this->template( 'Yardi/property_neighborhood.html.php' ) ?>
  367.                             </div>
  368.                         <?php endif; ?>
  370.                         <?php if ( $this->details == 'social' ) : ?>
  371.                             <div class="tabs-panel <?php echo ( $this->details == 'social' ? 'is-active' : '' ); ?>">
  372.                                 <?= $this->template( 'Yardi/property_social.html.php' ) ?>
  373.                             </div>
  374.                         <?php endif; ?>
  376.                         <?php if ( $this->details == 'contact' ) : ?>
  377.                             <div class="tabs-panel <?php echo ( $this->details == 'contact' ? 'is-active' : '' ); ?>">
  378.                                 <?= $this->template( 'Yardi/property_contact.html.php' ) ?>
  379.                             </div>
  380.                         <?php endif; ?>
  382.                     </div>
  383.                 </div>
  385.             </div>
  386.         </div>
  387.     </div>
  388. <?php endif; ?>
  390. <?php /* CUSTOM LOGIC TO APPEND CLASS "HAS-SUBMENU-TOGGLE" TO .ACCORDION-MENU TO DISABLE ANNOYING FOUNDATION ARROW STYLES */ ?>
  391. <script>
  392.     ( function( $ ) {
  393.         $( function() {
  395.             $(".is-accordion-submenu-parent").addClass("has-submenu-toggle");
  397.         } );
  398.     } )( jQuery );
  399. </script>