Moduł: taskSummary

W katalogu

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

CSS

Dostępne wartości do zmiany

Zmienna	Wartość domyślna	Opis
$ts-padding-mobile	rem(32) rem(16)	padding mobile
$ts-padding-desktop	rem(32)	padding desktop
$ts-background-color-congrats	$color-success	kolor tła sukcesu
$ts-background-color-badluck	$color-bg	kolor tła porazki
$st-padding-desktop	rem(16) rem(32)	padding desktop

HTML

<div class="taskSummary taskSummary__{{ status }}">
  <div>
    <div class="taskSummary__subtitle">Zadanie zakończone</div>
    <div class="taskSummary__title">{% if status == 'congrats' %}Gratulacje!{% else %}Pech...{% endif %}</div>
  </div>
  {% if quiz == true %}
  <div>
    <div class="taskSummary__subtitle">Poprawne odpowiedzi</div>
    <div class="taskSummary__title">{% if status == 'congrats' %}4 z 5{% else %}0 z 5{% endif %}</div>    
  </div>
  {% endif %}
  <div>
    <div class="taskSummary__subtitle">Zdobyłeś</div>
    <div class="points">{% if status == 'congrats' %}600{% else %}0{% endif %}<sup>pkt</sup></div>
  </div>
</div>