# Moduł: frequentLogins
# W katalogu
|--src/ → Pliki źródłowe
| |--modules/ → Moduły: katalog główny
| | |--frequentLogins/
| | | |--frequentLogins.twig
| | | |--frequentLogins.scss
# CSS
# Dostępne wartości do zmiany
| Zmienna | Wartość domyślna | Opis |
|---|---|---|
$flb-background-color | $color-white | kolor tła boxów |
$flb-color | $color-primary | kolor tekstu boxów |
$flb-background-color-active | $color-secondary | kolor tła aktywnych boxów |
$flb-color-active | $color-white | kolor tekstu aktywnych boxów |
$fle-border-radius | rem(8) | zakrąglenia małych elementów |
$fle-background-color | $color-white | kolor tła małych elementów |
$fle-color | $color-primary | kolor tekstu małych elementów |
$fle-background-color-active | $color-success | kolor tła aktywnych małych elementów |
$fle-color-active | $color-white | kolor tekstu aktywnych małych elementów |
$fle-background-color-failed | $color-error | kolor tła brakujących małych elementów |
$fle-color-failed | $color-white | kolor tekstu brakujących małych elementów |
$fls-background-color-active | $color-secondary | kolor tła aktywnego modułu w sidebarze |
$fls-box-shadow-active | 0 4px 8px 0 rgba(18, 195, 138, .5) | cień aktywnego modułu w sidebarze |
# HTML
{#
boxes === true -> regularne logowanie 4 boxy aktywnosci
elements === true -> historia logowania
sidebar === true -> modul do sidebara
#}
{% if boxes == true %}
<div class="frequentLoginsBoxes">
<div class="frequentLoginsBoxesItem is-active">
<p>tydzień 1 z 4</p>
<img src="./img/icon__star-white.svg" />
<div class="points">20<sup>pkt</sup></div>
</div>
<div class="frequentLoginsBoxesItem is-active is-currentweek">
<div class="frequentLoginsBoxesItem-header">OBECNY TYDZIEŃ</div>
<p>tydzień 2 z 4</p>
<img src="./img/icon__star-white.svg" />
<div class="points">20<sup>pkt</sup></div>
</div>
<div class="frequentLoginsBoxesItem">
<p>tydzień 3 z 4</p>
<img src="./img/icon__star-primary.svg" />
<div class="points">20<sup>pkt</sup></div>
</div>
<div class="frequentLoginsBoxesItem">
<p>tydzień 4 z 4</p>
<img src="./img/icon__trophy.svg" />
<div class="points">100<sup>pkt</sup></div>
</div>
</div>
{% endif %}
{% if elements == true %}
<div class="frequentLoginsElements">
<div class="frequentLoginsElement "><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement "><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement "><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement is-active"><img src="./img/icon__trophy-white.svg" />17.07 - 23.07</div>
<div class="frequentLoginsElement "><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement "><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement is-active"><img src="./img/icon__trophy-white.svg" />17.07 - 23.07</div>
<div class="frequentLoginsElement "><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement is-failed"><img src="./img/icon__times-white.svg" />24.07 - 30.07</div>
<div class="frequentLoginsElement"><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement"><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement"><span>01.</span>26.06 - 02.07</div>
<div class="frequentLoginsElement"><span>01.</span>26.06 - 02.07</div>
</div>
{% endif %}
{% if sidebar == true %}
<a href="/task/regularlogged/1" class="frequentLoginsSidebar">
<span>Regularne logowanie</span>
<ul>
<li class="frequentLoginsSidebar-item is-active "></li>
<li class="frequentLoginsSidebar-item is-active is-curentweek"></li>
<li class="frequentLoginsSidebar-item "></li>
<li class="frequentLoginsSidebar-item "></li>
</ul>
</a>
{% endif %}
← Filters Pagination →