SalesGames Dokumentacja

# 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 %}

← Pagination →