inFakt Styleguide

1. Widok główny

Dodawanie kosztu

Przeciągnij i upuść pliki tutaj aby przesłać koszt do Twojej Księgowej lub dodaj pliki ręcznie

Upuść pliki tutaj

Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt

<div class="module-file-upload x-module-upload">
  <form class="file-upload-form" action="#">
    <div class="file-upload-state-box">
      <div class="file-upload-state file-upload-state--init">
        <h2>Dodawanie kosztu</h2>
        <p>Przeciągnij i upuść pliki tutaj aby przesłać koszt do Twojej Księgowej lub <span class="file-upload-trigger">dodaj pliki<input multiple="" type="file"></span> ręcznie</p>
      </div>
      <div class="file-upload-state file-upload-state--drop hide">
        <h2>Upuść pliki tutaj</h2>
        <!-- przy dodawaniu kolejnego pliku zmieniamy tekst na "Upuść kolejne pliki tutaj -->
      </div>
      <div class="file-upload-state file-upload-state--progress hide">
        <p>Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt</p>
      </div>
      <!-- svg loader -->
      <div class="svg-loader-animation hide">
        <svg class="svg-loader x-svg-loader" width="68px" height="68px" viewBox="0 0 68 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path stroke="#068eda" stroke-width="2.5" fill="none" d="M30,44 C30,36.268 36.269,30 44,30 C51.733,30 58,36.268 58,44 C58,51.733 51.733,58 44,58 C36.269,58 30,51.733 30,44 L30,44 Z" id="Stroke-3" stroke-dasharray="20 100" stroke-dashoffset="0.00"></path>
        </svg>
      </div>
      <!-- svg loader -->
    </div>
  </form>
</div>

2. Widok z załączonymi plikami

Dodawanie pliku

Przeciągnij i upuść pliki tutaj aby przesłać lub dodaj pliki ręcznie

Upuść kolejne pliki tutaj

Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt

<!-- uploader -->
<div class="module-file-upload module-file-upload--widget x-module-upload">
  <form class="file-upload-form" action="#">
    <div class="file-upload-state-box">
      <div class="file-upload-state file-upload-state--init">
        <h2>Dodawanie pliku</h2>
        <p>Przeciągnij i upuść pliki tutaj aby przesłać lub <span class="file-upload-trigger">dodaj pliki<input type="file" multiple></span> ręcznie</p>
      </div>
      <div class="file-upload-state file-upload-state--drop hide">
        <h2>Upuść kolejne pliki tutaj</h2>
      </div>
      <div class="file-upload-state file-upload-state--progress hide">
        <p>Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt</p>
      </div>
      <!-- svg loader -->
      <div class="svg-loader-animation hide">
        <svg class="svg-loader x-svg-loader" width="68px" height="68px" viewBox="0 0 68 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path stroke="#068eda" stroke-width="2.5" fill="none" d="M30,44 C30,36.268 36.269,30 44,30 C51.733,30 58,36.268 58,44 C58,51.733 51.733,58 44,58 C36.269,58 30,51.733 30,44 L30,44 Z" id="Stroke-3" sketch:type="MSShapeGroup" stroke-dasharray="20 100" stroke-dashoffset="0.00"></path>
        </svg>
      </div>
      <!-- svg loader -->
    </div>

  </form>
</div>
<!-- uploader -->

<div class="col-1 attachments-list-module">
  <h4>Załączniki</h4>
  <ul class="col-1--separate attachments-list--files">
    <li>
      <div class="attachment-info">
        <a class="attachment-file-name" href="#">KPiR_biuro_rachunkowe.pdf</a>
        <p class="grey">Dodano: <time>2010-10-20</time></p>
      </div>
      <div class="attachment-actions">
        <div class="attachment-preview-box">
          <a class="x-preview-trigger" href="#">Podgląd pliku</a>
          <div class="attachment-preview hide">
            <img src="images/app/content/attachments/dokument-podglad.jpg" alt="dokument-podglad" width="320" height="449" />
          </div>
        </div>
        <a class="attachment-delete" href="#">Usuń plik</a>
      </div>
    </li>
    <li>
      <div class="attachment-info">
        <a class="attachment-file-name" href="#">KPiR_biuro_rachunkowe_Kalkulator.pdf</a>
        <p class="grey">Dodano: <time>2010-10-20</time></p>
      </div>
      <div class="attachment-actions">
        <div class="attachment-preview-box">
          <a class="x-preview-trigger" href="#">Podgląd pliku</a>
          <div class="attachment-preview hide">
            <img src="images/app/content/attachments/dokument-podglad.jpg" alt="dokument-podglad" width="320" height="449" />
          </div>
        </div>
        <a class="attachment-delete" href="#">Usuń plik</a>
      </div>
    </li>
  </ul>
</div>

3. Status – plik przesłany

Plik został pozytywnie przesłany

<!-- uploader -->
<div class="module-file-upload x-module-upload">
  <form class="file-upload-form" action="#">
    <div class="file-upload-state-box">
      <div class="file-upload-state file-upload-state--ok">
        <p>Plik został pozytywnie przesłany</p>
      </div>
    </div>
  </form>
</div>

4. Status – błąd w przesyłaniu pliku

Błąd w przesyłaniu pliku

<!-- uploader -->
<div class="module-file-upload x-module-upload">
  <form class="file-upload-form" action="#">
    <div class="file-upload-state-box">
      <div class="file-upload-state file-upload-state--fail">
        <p>Błąd w przesyłaniu pliku</p>
      </div>
    </div>
  </form>
</div>

5. Widok listy ze statusami przysyłanych plików

Dodawanie kosztu

Przeciągnij i upuść pliki tutaj aby przesłać koszt do Twojej Księgowej lub dodaj pliki ręcznie

Upuść pliki tutaj

Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt

<!-- uploader -->
<div class="module-file-upload x-module-upload">
  <form class="file-upload-form" action="#">
    <div class="file-upload-state-box">
      <div class="file-upload-state file-upload-state--init">
        <h2>Dodawanie kosztu</h2>
        <p>Przeciągnij i upuść pliki tutaj aby przesłać koszt do Twojej Księgowej lub <span class="file-upload-trigger">dodaj pliki<input type="file" multiple></span> ręcznie</p>
      </div>
      <div class="file-upload-state file-upload-state--drop hide">
        <h2>Upuść pliki tutaj</h2>
        <!-- przy dodawaniu kolejnego pliku zmieniamy tekst na "Upuść kolejne pliki tutaj -->
      </div>
      <div class="file-upload-state file-upload-state--progress hide">
        <p>Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt</p>
      </div>
      <!-- svg loader -->
      <div class="svg-loader-animation hide">
        <svg class="svg-loader x-svg-loader" width="68px" height="68px" viewBox="0 0 68 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path stroke="#068eda" stroke-width="2.5" fill="none" d="M30,44 C30,36.268 36.269,30 44,30 C51.733,30 58,36.268 58,44 C58,51.733 51.733,58 44,58 C36.269,58 30,51.733 30,44 L30,44 Z" id="Stroke-3" stroke-dasharray="20 100" stroke-dashoffset="0.00"></path>
        </svg>
      </div>
      <!-- svg loader -->
    </div>
    <ul class="file-upload--list">
      <li class="file-upload--inprogress">
        <span class="upload-progress-bar" style="width: 20%;">20%</span>
        <a class="file-upload--file-name" href="#"><strong>Leroy_Merlin_4846_12_08_2014.pdf</strong> <span>(25KB)</span></a>
        <a href="#" class="file-upload-action file-upload--file-delete">Usuń plik</a>
      </li>
      <li class="file-upload--success">
        <span class="file-upload--file-status">Plik przesłano 2014-05-28, 08:55:48</span>
        <a class="file-upload--file-name" href="#"><strong>Leroy_Merlin_4846_12_08_2014.pdf</strong> <span>(25KB)</span></a>
        <a href="#" class="file-upload-action file-upload--file-delete">Usuń plik</a>
      </li>
      <li class="file-upload--fail">
        <span class="file-upload--file-status">Plik nie został przesłany, spróbuj ponownie</span>
        <a class="file-upload--file-name" href="#"><strong>Leroy_Merlin_4846_12_08_2014.pdf</strong> <span>(25KB)</span></a>
        <a href="#" class="file-upload-action file-upload--msg-delete">Zamknij</a>
      </li>
      <li>
        <span class="file-upload--file-status grey">Plik przesłano 2014-05-28, 08:55:48</span>
        <a class="file-upload--file-name" href="#"><strong>Leroy_Merlin_4846_12_08_2014.pdf</strong> <span>(25KB)</span></a>
        <a href="#" class="file-upload-action file-upload--file-delete">Usuń plik</a>
      </li>
      <li>
        <span class="file-upload--file-status grey">Plik przesłano 2014-05-28, 08:55:48</span>
        <a class="file-upload--file-name" href="#"><strong>Leroy_Merlin_4846_12_08_2014.pdf</strong> <span>(25KB)</span></a>
        <a href="#" class="file-upload-action file-upload--file-delete">Usuń plik</a>
      </li>
    </ul>
  </form>
</div>

6. Widok z dodatkową informacją.

Przeciągnij i upuść tutaj pliki graficzne, które chcesz dodać do szablonu faktury lub wybierz pliki z dysku

Upuść kolejne pliki tutaj

Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt

Akceptowalne formaty to: JPG, PNG, GIF, SVG. Maksymalny rozmiar wynosi 500kB. Całkowity rozmiar załączonych plików nie może przekroczyć 8MB.
<!-- uploader -->
<div class="module-file-upload module-file-upload--widget x-module-upload">
  <form class="file-upload-form" action="#">
    <div class="file-upload-state-box">
      <div class="file-upload-state file-upload-state--init">
        <p>Przeciągnij i upuść tutaj pliki graficzne, które chcesz dodać do szablonu faktury lub <span class="file-upload-trigger">wybierz pliki z dysku<input type="file" multiple></span></p>
      </div>
      <div class="file-upload-state file-upload-state--drop hide">
        <h2>Upuść kolejne pliki tutaj</h2>
      </div>
      <div class="file-upload-state file-upload-state--progress hide">
        <p>Przeciągnij i upuść pliki tutaj aby przesłać kolejny koszt</p>
      </div>
      <!-- svg loader -->
      <div class="svg-loader-animation hide">
        <svg class="svg-loader x-svg-loader" width="68px" height="68px" viewBox="0 0 68 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path stroke="#068eda" stroke-width="2.5" fill="none" d="M30,44 C30,36.268 36.269,30 44,30 C51.733,30 58,36.268 58,44 C58,51.733 51.733,58 44,58 C36.269,58 30,51.733 30,44 L30,44 Z" id="Stroke-3" sketch:type="MSShapeGroup" stroke-dasharray="20 100" stroke-dashoffset="0.00"></path>
        </svg>
      </div>
      <!-- svg loader -->
      <span class="file-upload-misc">
        Akceptowalne formaty to: JPG, PNG, GIF, SVG. Maksymalny rozmiar wynosi 500kB. Całkowity rozmiar załączonych plików nie może przekroczyć 8MB.
      </span>
    </div>
  </form>
</div>
<!-- uploader -->