JSFiddle - React, Tailwind, and code Playground

by mtenschert

CSS

@media only screen and (max-width: 767px) {
  .shop-left-col {
    width : 33%;
    padding-bottom : 0px;
  }

  .shop-right-col {
    width : 67%;
    padding-top : 10px;
    line-height : 90%;
  }

  .product__top-shop-badge, .product__discount-shop-badge {
    font-size : 8px;
    padding : 5px;
  }

  .promo-outer-container {
    color : white;
    border : none;
    font-size : 10px;
  }

  .promo-inner-container {
    padding : 2px !important;
    border-color : rgb(109, 185, 88) !important;
    background-color : rgb(109, 185, 88) !important;
  }

  .shop-link {
    font-size : 16px;
    line-height : 120%;
  }

  .product__show-map {
    font-size : 10px;
  }

  .price-wrapper, .price-label-wrapper {
    text-align : right;
    font-size : 10px;
    line-height : 100%;
    float : right !important;
  }

  .price-label-wrapper div {
    overflow-x : visible;
    overflow-y : visible;
  }

  .product__additionals__price {
    text-align : right !important;
    font-size : 14px !important;
    padding-top : 5px !important;
  }

  .product__adress {
    margin-bottom : 0px;
  }

  .towns .product__content {
    visibility : hidden;
    min-height : 120px !important;
  }

  .product__shop-adress {
    font-size : 10px;
  }

  .shop-right-col>.important-label {
    font-size : 8px;
    padding : 2px;
  }

  .additional-offer-info {
    font-size : 8px;
    line-height : 80%;
    float : right;
    text-align : right;
  }

  .additional-offer-info>.date-wrapper {
    padding-bottom : 5px;
  }
}

JavaScript

//Aufräumen
var triggerCss = function() {
  $(".fa-home").remove();
  $(".promo-outer-container").not(".alpi-hasslefree").remove();
  $(".discount-amount").remove();
  $(".online-from-price").remove();
  $(".product__next-arrow").remove();
 
}

//Textzusatz Rabatt

//Media Query

/*

if ($(window).width() < 766) {
  $(".product__content").css({
    "min-height": "120px"
  })
}

*/


triggerCss();


var renderShortPill = function(singleProductPill) {
  var shopLink = singleProductPill.find(".shop-link");
  var shopRightCol = singleProductPill.find(".shop-right-col");
  var shopAdress = singleProductPill.find(".product__shop-adress");
  var shopDiscount = singleProductPill.find(".price-label-wrapper > .important-label");
  var shopImage = singleProductPill.find(".town-image");
  var discountTypes = singleProductPill.find(".product__discount-types");
  var shopDistance = singleProductPill.find(".product__adress > .important-label");


  shopDiscount.css({
    "position": "absolute",
    "top": "3px",
    "left": "-7px",
    "font-size": "10px",
    "font-weight": "bold"
  });

  shopRightCol.prepend(shopLink);
  shopAdress.insertAfter(shopLink);
  discountTypes.insertAfter(shopAdress);
  shopDiscount.insertAfter(shopImage);
  shopDistance.insertAfter(shopAdress);
  shopDistance.before("<br />");
  shopAdress.before("<br />");

  $(function() {
    shopDiscount.prepend("Book Online");
  });
      
  $(".towns .product__content").css({
    "visibility": "visible"
  });

};

var product_pills_in_town = $('.product');

product_pills_in_town.each(function() {
  renderShortPill($(this));
});

/* takes shop info and restyles shop pile in list according to A/B Test.
 * @param shopid: string of the shop id. will be used to find div with scroll-shop info
 */
var restyleShopPill = function(shopid) {
  var shopPile = $('#scroll-shop-' + shopid);
  renderShortPill(shopPile);
  triggerCss();
};

window.addEventListener('alpiShopDeferedLoad', function(e) {
  setTimeout(function()...