templates/elements/popout-ad.html.twig line 85

Open in your IDE?
  1. <style>
  2.     .popout-ad {
  3.         max-height: 400px;
  4.         min-height: 200px;
  5.         position: fixed;
  6.         right: -510px;
  7.         display: flex;
  8.         flex-direction: row;
  9.         z-index: 15;
  10.         background: white;
  11.         bottom: 15%;
  12.         padding-right: 20px;
  13.         /*height: 120px;*/
  14.         box-shadow: -4px 9px 20px 0px #00000078;
  15.         transition: 1s ease-in-out;
  16.         cursor: pointer;
  17.         width: 565px;
  19.         max-height: 400px;
  20.         overflow: hidden;
  21.     }
  22.     .popout-ad:hover {
  23.         right: 0;
  24.     }
  26.     #rc-wrapper {
  27.         top: 0;
  28.         bottom: 0;
  29.         left: 0;
  30.         right: 0;
  31.         overflow: auto;
  32.         position: absolute;
  33.         display: flex;
  34.     }
  35.     #rc-center {
  36.         /*width: 300px;
  37.         height: 300px;*/
  38.         /*background-color: yellow;*/
  39.         /*margin: auto;*/
  40.     }
  42.     
  43.     @media (max-width: 767px) {
  44.         .popout-ad {
  45.             display: none;
  46.         }
  47.     }
  49. </style>
  50. {% if popout %}
  52.     <div class="popout-ad" id="poa-container">
  53.         <p class="standard-bg-dark" style="writing-mode:vertical-rl; transform: rotate(180deg); text-align:center; margin:0; padding:15px; color:white">
  54.             {% if popout.getDisplayTitle() %}
  55.                 {{ popout.getDisplayTitle() }}
  56.             {% else %}
  57.                 {% if customer %}
  58.                     {{ customer.getTitle() }}
  59.                 {% endif %}
  60.             {% endif %}
  61.         </p>
  62.         <div class="row" style="width:100%">
  63.             <div class="col-sm-4">
  64.                 <div style="height:100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
  65.                     {% if popout.getMedia() %}
  66.                         {{ popout.getMediaImageTag("", "width: 100%; margin: 15px 5px; height: fit-content;")|raw }}
  67.                     {% elseif customer and customer.getMedia() %}
  69.                         {% if popout.getExternalUrl() %}
  70.                             <a href="{{popout.getExternalUrl()}}" data-mitem-id="{{popout.getId()}}">
  71.                         {% endif %}
  72.                         {{ customer.getMedia().getImageTag("", "width: 100%; margin: 15px 5px; height: fit-content", popout.getId())|raw }}
  73.                         {% if popout.getExternalUrl() %}
  74.                             </a>
  75.                         {% endif %}
  76.                     {% endif %}
  77.                 </div>
  78.             </div>
  79.             <div class="col-sm-8">
  80.                 <div id="rc-wrapper">
  81.                     <div id="rc-center">
  82.                         {% if popout.getPopOutPoll() and popout.getPopOutPoll().isReallyActive() %}
  83.                             {#<div id="popout-poll" class="home-poll home-poll-rcs" style="margin-bottom:15px;">#}
  84.                             <div id="home-poll" class="home-poll home-poll-rcs" style="margin-bottom:15px;">
  85.                                 {{ "[poll site='RoofCoffeeShop' id='#{popout.getPopOutPoll().getId()}' directory='yes']" | wordpress | raw }}
  86.                             </div>
  87.                             <div id="pollReplacementAd" style="display:none;">
  88.                                 <p>{{popout.getDescription() | wordpress | raw}}</p>
  89.                             </div>
  90.                         {% else %}
  91.                             <p>{{popout.getDescription() | wordpress | raw}}</p>
  92.                             {#{% if customer.getDirectoryContent() %}
  93.                                 <a href="{{customer.getDirectoryContent().getURL()}}">Learn More</a>
  94.                             {% endif %}#}
  95.                         {% endif %}
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </div>
  102. {% else %}
  104.     
  105. {#
  106.     <div class="popout-ad" id="poa-container">
  107.         <p style="writing-mode:vertical-rl; transform: rotate(180deg); padding-bottom:10px; text-align:center;">RoofersCoffeeShop®</p>
  108.         <div  class="row">
  109.             <div class="col-md-5">
  110.                 <img src="https://www.rooferscoffeeshop.com/assets/img/Roofers-Coffee-Shop-Logo-R.png" alt="" style="margin-top:60px" />
  111.             </div>
  112.             <div class="col-md-7">
  113.                 <div id="part1" style="margin-top:25px;">
  114.                     <p>How likely are you to recommend us to a friend or colleague?</p>
  115.                     <p><input id="pi_input" type="range" class="slider" min="0" max="10" step="1" style="width:100%;"/></p>
  116.                     <div  class="row">
  117.                         <div class="col-md-6" style="font-size:16px;padding-left:40px;">
  118.                             Rating: <output id="value"></output>
  119.                         </div>
  120.                         <div class="col-md-6">
  121.                             <input type="buttom" class="button" value="Submit" id="popSubmit" style="width:100px;">
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.                 <div id="part2" style="display:none">
  126.                     <div style="margin-top:50px;">
  127.                         <h3>Thank you for your feedback!</h3>
  128.                         <p>Visit the <a href="/our-directory">RCS Directory</a> to see more from our partners!</p>
  129.                     </div>
  130.                 </div>
  131.             </div>
  132.         </div>
  134.     </div>
  136. <style>
  137. .slider {
  138.   -webkit-appearance: none;
  139.   width: 100%;
  140.   height: 10px;
  141.   background: #d3d3d3;
  142.   outline: none;
  143.   opacity: 0.7;
  144.   -webkit-transition: .2s;
  145.   transition: opacity .2s;
  146. }
  147. .slider:hover {
  148.   opacity: 1;
  149. }
  151. .slider::-webkit-slider-thumb {
  152.   -webkit-appearance: none;
  153.   appearance: none;
  154.   width: 20px;
  155.   height: 20px;
  156.   background: #a41822;
  157.   cursor: pointer;
  158. }
  159. </style>
  161.     <script>
  162.         (function ($) {
  163.             $(function () {
  165.                 //Temp default pop-out
  166.                 const value = document.querySelector("#value")
  167.                 const input = document.querySelector("#pi_input")
  168.                 value.textContent = input.value
  169.                 input.addEventListener("input", (event) => {
  170.                 value.textContent = event.target.value
  171.                 })
  173.                 $('#popSubmit').click(function() {
  174.                     $('#part1').hide();
  175.                     $('#part2').show();
  176.                 });
  178.             });
  179.         }(jQuery));
  180.     </script>
  182.     #}
  184. {% endif %}
  188.  <script>
  189.     (function ($) {
  190.         $(function () {
  192.             //Adjust height of pop-out ad
  193.             $('#poa-container').height($('#rc-center').height()) ;
  195.         });
  196.     }(jQuery));
  197. </script>