flexbox vypis produktu V3

by Petr Haluza

HTML

<div id="test">
<div id="product-container">

<div class="product-item">
  <div class="product-item-top">
    <div class="product-name"><a href="#">Nazev produktu</a></div>
    <div class="product-desc"><span>Popisek a specifikace</span></div>
    <div class="product-functions">
      <div class="click">x</div>
      <ul>
        <li><button>Porovnat</button></li>
        <li><button>Do oblíbených</button></li>
        <li><button>Hlídat cenu</button></li>
        <li><button>Hlídat dostupnost</button></li>
      </ul>
    </div>    
  </div><!-- /.product-item-top -->
  <div class="product-item-bot">
    <div class="product-image">
      <button class="quickView">Rychlý náhled</button>
      <a href="#"><img src="https://cdn.alza.cz/Foto/f8/NT/NT356p9r2i.jpg" /></a>
      <div class="product-icons">
        <div class="product-icon delivery"><span>Doprava zdarma</span></div>
        <div class="product-icon sale"><span>Sleva <strong>10%</strong></span></div>
        <div class="product-icon gift"><span><strong>DÁREK</strong></span></div>
      </div>
    </div>
    <div class="product-prices">
      <div class="product-prices-cont">
        <div class="product-price-before"><span>15 345 Kč</span></div>
        <div class="product-price"><span>12 345 Kč</span></div>
        <div class="product-price-wvat"><span>10 345 Kč</span></div>
       </div>
      <div class="product-buy"><button>koupit</button></div>
    </div>
    <div class="product-stock"><span>skladem</span></div>
  </div><!-- /.product-item-bot -->
</div><!-- /.product-item -->

<div class="product-item">
  <div class="product-item-top">
    <div class="product-name"><a href="#">Nazev produktu</a></div>
    <div class="product-desc"><span>Popisek a specifikace</span></div>
    <div class="product-functions">
      <div class="click">x</div>
      <ul>
        <li><button>Porovnat</button></li>
        <li><button>Do oblíbených</button></li>
        <li><button>Hlídat cenu</button></li>
       ...

CSS

/* proměnný */
$primary-color: #333;
$primary-bg-color: white;

/* mixiny */
@mixin animace02 {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
@mixin animace03 {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
    @if $inset {
        -webkit-box-shadow:inset $top $left $blur $size $color;
        -moz-box-shadow:inset $top $left $blur $size $color;
        box-shadow:inset $top $left $blur $size $color;
    } @else {
        -webkit-box-shadow: $top $left $blur $size $color;
        -moz-box-shadow: $top $left $blur $size $color;
        box-shadow: $top $left $blur $size $color;
    }
}
@mixin linear-gradient($from, $to) {
  background: $to;
	background: -moz-linear-gradient(top, $from 0%, $to 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
	background: -webkit-linear-gradient(top, $from 0%,$to 100%);
	background: -o-linear-gradient(top, $from 0%,$to 100%);
	background: linear-gradient(to bottom, $from 0%,$to 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})
  /*@include linear-gradient($lg_blue_From, $lg_blue_To);*/ }
@mixin linear-gradient01 {
  background: #fff;
	background: -moz-linear-gradient(bottom, #ddd 1px, #fff 80px, #fff 100%);
	background: -webkit-linear-gradient(bottom, #ddd 1px, #fff 80px, #fff 100%);
	background: -o-linear-gradient(bottom, #ddd 1px, #fff 80px, #fff 100%);
	background: linear-gradient(bottom, #ddd 1px, #fff 80px, #fff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',...

JavaScript

// klik funkce nad produktem ve výpisu

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

var containers = document.querySelectorAll(".product-functions");

forEach(containers, function(index, value) {
  value.addEventListener("click", function() {
    this.classList.toggle("isOpen");
    //this.delay(300).removeClass('isOpen');
  });
});