Moduł: taskList

W katalogu

|--src/                           →  Pliki źródłowe
|  |--modules/                    →  Moduły: katalog główny
|  |  |--taskList/                   
|  |  |  |--taskList.twig       
|  |  |  |--taskList.scss       

CSS

Dostępne wartości do zmiany

Zmienna	Wartość domyślna	Opis
$taskItem-background-color	$color-white	kolor tła kafla
$taskItem-border-radius	rem(16)	zaokrąglenia kafla
$taskItem-box-shadow	0 4px 8px 0 rgba(0, 52, 104, .1), 0 0 1px 0 rgba(0, 52, 104, .3)	cień kafla
$taskItem-padding-mobile	rem(12) rem(16) rem(16) rem(16)	padding kafla mobile
$taskItem-padding-desktop	rem(16) rem(24) rem(24)	padding kafla mobile

HTML

<div class="taskList">
  <div class="taskList__sizer"></div>
  <div class="taskBox">
    <div class="taskItem">
      <div class="taskItem__photo"><img src="http://gladiators.pl/site/9/images/bgimages/bgimage_24_usli.jpg" alt=""></div>
      <div class="taskItem__content">
        <div>
          <div class="taskItem__cat text-secondary">Quiz</div>
          <div class="taskItem__title">Czy wiesz jak powstają beczki do leżakowania whiskey? - tytuł w 3 liniach</div>
        </div>
        <div>
          <div class="taskItem__points">
            <span class="text-secondary">zdobądź</span>
            <div class="points">600 <sup>pkt</sup></div>
          </div>
        </div>
        <div>
          <div class="taskItem__time">
            <span class="text-secondary">zadanie aktywne przez</span>
            <span class="text-primary">6d 16h 23m</span>
          </div>
        </div>
        <a href="/zadania-index.html" class="taskItem__more btn btn-primary">rozpocznij</a>
      </div>
    </div>
  </div>
</div>

{% block pagejs %}
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<script>
  var grids = Array.from(document.querySelectorAll('.taskList'));
  var msnry;

  imagesLoaded( document.querySelector('body'), function() {
    grids.forEach(function(grid) {
      msnry = new Masonry( grid, {
        itemSelector: '.taskBox',
        columnWidth: '.taskList__sizer',
        percentPosition: true,
      });
    });	
  });	
</script>

{% endblock %}