inFakt Styleguide

Rozszerzone pola formularzy

W wielu miejscach aplikacji korzystamy z rozszerzonych/własnych kontrolek formularzy. Są to rozbudowane elementy składające się często z wielu różnych elementów, takich jak: pola formularzy, listy, wyszukiwarki itp. Mają one ułatwić pracę z aplikacją i rozszerzyć funkcjonalności jakie dają standardowe pola formularzy.

Pole wyboru w przypadku braku wcześniej zapisanych elementów.

Wybierz lub dodaj nowego klienta Rozwiń
<div class="field-disappear-row">
  <div class="fake-input active">
    Wybierz lub dodaj nowego klienta
    <a href="#">Rozwiń</a>
  </div>

  <div class="field-row--list">
    <a href="#">Dodaj nowego klienta</a>
  </div>
</div>

Pole wyboru w przypadku gdy użytkownik ma już zapisane wcześniej dane. W polu tym mamy możliwość wyszukiwania wcześniej zapisanych danych oraz wyświetlamy ostatnio wybrane elementy.

Wybierz lub dodaj nowego klienta Rozwiń
Dodaj nowego klienta
<div class="field field-disappear" style="min-height: 200px;">
  <div class="field-disappear-row">
    <div class="fake-input active">
      Wybierz lub dodaj nowego klienta
      <a href="#">Rozwiń</a>
    </div>

    <div class="field-row--list">
      <div class="row-list--search">
        <div class="list-search--area active">
          <input type="text" id="search-1" placeholder="Wpisz nazwę klienta" class="search--area-img">
          <ul class="search-area--deep">
            <li>Komandos Sklep Militarny</li>
            <li>Komandor Szafy</li>
            <li>Kominiarz</li>
            <li>KomoKomo Ristorante Italia</li>
          </ul>
        </div>
        <span>Ostatnio wybierani</span>
        <ul>
          <li>Aligatores Sp z o.o.</li>
          <li>Cheil Worldwide GMBH Germany</li>
          <li>inFakt Sp. z o.o</li>
        </ul>
      </div>
      <a href="#">Dodaj nowego klienta</a>
    </div>
  </div>
</div>

Pole zawierające podpowiedzi i wskazówki dla użytkownika np. zachętę do dodania innych typów kosztów.

Wybierz rodzaj kosztu Rozwiń
  • Koszty firmy
  • Opłata za media
  • Zakup towarów i materiałów
  • Dokument wewnętrzny
Koszty związane z pojazdami Dodaj pojazd firmowy, aby rozliczać koszty z nim związane, czyli:
  • koszty pojazdu
  • koszty paliwa
  • koszty leasingu
Dodaj pierwszy pojazd
<div style="min-height: 330px;">
  <div class="field-disappear-row">
    <div class="fake-input active">
      Wybierz rodzaj kosztu
      <a href="#">Rozwiń</a>
    </div>

    <div class="field-row--list">
      <ul>
        <li>Koszty firmy</li>
        <li>Opłata za media</li>
        <li>Zakup towarów i materiałów</li>
        <li>Dokument wewnętrzny</li>
      </ul>

      <div class="row-list--desc">
        <span class="grey">Koszty związane z pojazdami</span>
        <span>Dodaj pojazd firmowy, aby rozliczać koszty z nim związane, czyli: </span>
        <ul class="list-disc--small">
          <li>koszty pojazdu</li>
          <li>koszty paliwa</li>
          <li>koszty leasingu</li>
        </ul>
      </div>

      <a href="#">Dodaj pierwszy pojazd</a>
    </div>
  </div>
</div>
Wybierz rodzaj kosztu Rozwiń
Wybierz opis kosztu Rozwiń

Dodawanie nowego opisu kosztu

Dodaj kwotę do opisu
Anuluj
<div class="field field-disappear" style="min-height: 200px;">
  <div class="field-disappear-row">
    <div class="fake-input active">
      Wybierz rodzaj kosztu
      <a href="#">Rozwiń</a>
    </div>

    <div class="field-row--list hide">
      <a href="#">Dodaj nowego klienta</a>
    </div>
  </div>

  <div class="field-disappear-row row-relative">
    <div class="fake-input">
      Wybierz opis kosztu
      <a href="#">Rozwiń</a>
    </div>

    <div class="box-layer box-layer--short-label">
      <h3>Dodawanie nowego opisu kosztu</h3>
      <div class="field field-group">
        <div class="row row-textarea">
          <label for="cost-desc-1">Opis kosztu</label>
          <textarea rows="2" cols="5" id="cost-desc-1" name="cost-desc-1" class="long--xxx">Wymiana płynu hamulcowego w samochodzie Volkswagen New Beetle RLA 82RP</textarea>
        </div>
      </div>
      <a href="#" class="expand x-expand-box-layer">Dodaj kwotę do opisu</a>
      <div class="field field-desc hide">
        <label for="brutto">Wartość brutto</label>
        <input type="text" class="small--x-x" name="brutto" id="brutto"> <span class="grey"></span>
      </div>

      <div class="btn--group">
        <button class="btn green btn--ok">Zapisz</button>
        <a class="light" href="#">Anuluj</a>
      </div>
    </div>
  </div>
</div>
Wybierz rodzaj kosztu Rozwiń
Wybierz opis kosztu Rozwiń

Dodawanie nowego opisu kosztu

Nie dodawaj kwoty
Anuluj
<div class="field field-disappear" style="min-height: 286px;">
  <div class="field-disappear-row">
    <div class="fake-input active">
      Wybierz rodzaj kosztu
      <a href="#">Rozwiń</a>
    </div>

    <div class="field-row--list hide">
      <a href="#">Dodaj nowego klienta</a>
    </div>
  </div>

  <div class="field-disappear-row row-relative">
    <div class="fake-input">
      Wybierz opis kosztu
      <a href="#">Rozwiń</a>
    </div>

    <div class="box-layer box-layer--short-label">
      <h3>Dodawanie nowego opisu kosztu</h3>
      <div class="field field-group">
        <div class="row row-textarea">
          <label for="cost-desc-2">Opis kosztu</label>
          <textarea class="long--xxx" name="cost-desc-2" id="cost-desc-2" cols="5" rows="2">Wymiana płynu hamulcowego w samochodzie Volkswagen New Beetle RLA 82RP</textarea>
        </div>
      </div>
      <a class="expand x-expand-box-layer" href="#">Nie dodawaj kwoty</a>
      <div>
        <div class="field">
          <label for="stawka-vat">Stawka VAT</label>
          <select class="small--x-xxx" name="stawka-vat" id="stawka-vat">
            <option value="1">23%</option>
            <option value="2">7%</option>
          </select>
        </div>

        <div class="field field-inline">
          <label for="kwota">Kwota</label>
          <input  id="kwota" class="small--x-xxx" type="text">

          <select name="kwota[netto]" id="kwota[netto]">
            <option value="1">Netto</option>
            <option value="2">Brutto</option>
          </select>
        </div>
      </div>

      <div class="btn--group">
        <button class="btn green btn--ok">Zapisz</button>
        <a href="#" class="light">Anuluj</a>
      </div>
    </div>
  </div>
</div>

Rozszerzone pole wyboru (select) zawierające dodatkowe dane tj. numer rejestracyjny pojazdu.

Wybierz pojazd Rozwiń
  • VW Beattle niebieski KRA 23456
  • Mercedes KRA 23456
  • Suzuki KRA 23456
  • VW Beattle niebieski KRA 23456
Dodaj kolejny pojazd
<div class="field field-disappear" style="min-height: 232px;">
  <div class="field-disappear-row">
    <div class="fake-input active">
      Wybierz pojazd
      <a href="#">Rozwiń</a>
    </div>

    <div class="field-row--list">
      <ul>
        <li>VW Beattle niebieski <span class="grey car-rego">KRA 23456</span></li>
        <li>Mercedes <span class="grey car-rego">KRA 23456</span></li>
        <li>Suzuki <span class="grey car-rego">KRA 23456</span></li>
        <li>VW Beattle niebieski <span class="grey car-rego">KRA 23456</span></li>
      </ul>

      <a href="#">Dodaj kolejny pojazd</a>
    </div>
  </div>
</div>