Moduł: pointsHistoryList

W katalogu

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

CSS

Dostępne wartości do zmiany

Zmienna	Wartość domyślna	Opis
$phl-header-background-color	$color-bg	kolor tła
$phl-header-color	$color-secondary-darken	kolor tekstu nagłówka
$phl-header-padding	rem(16) rem(56) rem(8) rem(56)	padding nagłówka
$phl-padding-mobile	0 rem(16) 0 rem(16)	padding mobile
$phl-padding-desktop	0 rem(44) 0 rem(20)	padding desktop
$phl-item-background-color	$color-bg	kolor tła elementu
$phl-item-border-radius	rem(8)	zakrąglenia elementu
$phl-item-padding-mobile	rem(12) rem(16) rem(16) rem(16)	padding mobile elementu
$phl-item-padding-desktop	rem(12) rem(12) rem(12) rem(36)	padding desktop elementu
$phl-item-active-background-color	rgba($color-secondary-lighten, .2)	kolor tła aktywnego elementu

HTML

{# 
  header == true -> historia punktow, naglowek  
#}

{% if header == true %}

<div class="pointsHistoryHeader">
  <div>Data</div>
  <div>Typ zadania</div>
  <div>Tytuł zadania</div>
  <div>Ilość zdobytych punktów</div>
</div>
<div class="m-titleBar">
  <div>
    <div class="titleBar__title">Czerwiec 2020</div>
  </div>
</div>
<div class="pointsHistoryList">
  <div class="pointsHistoryItem">
    <div>12.06.2018</div>
    <div>Quiz</div>
    <div>Zaprawy – czym się różnią i dlaczego tak ważne jest, aby wybrać właściwą.</div>
    <div><b>345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>10.06.2018</div>
    <div>Knowledge</div>
    <div>Na co zwrócić uwagę przy wyborze gruntu?</div>
    <div><b>145 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>10.06.2018</div>
    <div>Reccomendation</div>
    <div></div>
    <div><b>145 pkt</b></div>
  </div>
</div>
<div class="m-titleBar">
  <div>
    <div class="titleBar__title">Maj 2020</div>
  </div>
</div>
<div class="pointsHistoryList pointsHistoryList__mb">
  <div class="pointsHistoryItem">
    <div>12.06.2018</div>
    <div>Quiz</div>
    <div>Zaprawy – czym się różnią i dlaczego tak ważne jest, aby wybrać właściwą.</div>
    <div><b>345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>10.06.2018</div>
    <div>Knowledge</div>
    <div>Na co zwrócić uwagę przy wyborze gruntu?</div>
    <div><b>145 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>10.06.2018</div>
    <div>Reccomendation</div>
    <div></div>
    <div><b>145 pkt</b></div>
  </div>
</div>
{% else %}

<div class="pointsHistoryList pointsHistoryList__mb">
  <div class="pointsHistoryItem">
    <div>1.</div>
    <div>Tadeusz</div>
    <div>Wasilewski</div>
    <div><b>12 345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>2.</div>
    <div>Eleonora</div>
    <div>Cybulska-Markiewicz-Wykwintna</div>
    <div><b>11 345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>3.</div>
    <div>Konstancja</div>
    <div>Trybus</div>
    <div><b>11 145 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>1.</div>
    <div>Tadeusz</div>
    <div>Wasilewski</div>
    <div><b>12 345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>2.</div>
    <div>Eleonora</div>
    <div>Cybulska-Markiewicz-Wykwintna</div>
    <div><b>11 345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>3.</div>
    <div>Konstancja</div>
    <div>Trybus</div>
    <div><b>11 145 pkt</b></div>
  </div>
  <div class="pointsHistoryItem pointsHistoryItem__transparent">
    <div></div>
    <div>...</div>
    <div></div>
    <div></div>
  </div>
  <div class="pointsHistoryItem">
    <div>1.</div>
    <div>Tadeusz</div>
    <div>Wasilewski</div>
    <div><b>12 345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem is-active">
    <div>2.</div>
    <div>Eleonora</div>
    <div>Cybulska-Markiewicz-Wykwintna</div>
    <div><b>11 345 pkt</b></div>
  </div>
  <div class="pointsHistoryItem">
    <div>3.</div>
    <div>Konstancja</div>
    <div>Trybus</div>
    <div><b>11 145 pkt</b></div>
  </div>
</div>

{% endif %}