Yivi css

Yivi css

Source: src/examples/happy-path.scss, line 1

1.1.1 Happy path

This is what the entire flow should look like if everything works as intended.

Desktop flow

Weight: 0

Desktop pairing flow

Weight: 1

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Eén moment alsjeblieft

Vul de koppelcode in die in jouw Yivi-app verschijnt.

Annuleer

Volg de instructies in de Yivi app

Gelukt!

Mobile flow

Weight: 2

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Eén moment alsjeblieft

Toon QR code

Gelukt!

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Eén moment alsjeblieft

Volg de instructies in de Yivi app

Gelukt!

<section class="yivi-web-center-child" style="** Parent styles ** width: 100%; height: 700px; border: 2px solid red;">
  <section class="yivi-web-form">
    <header class="yivi-web-header">
      <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
      <section class="yivi-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
      </section>
    </header>
    <section class="yivi-web-content" data-animate>
      <section class="yivi-web-centered" data-duration="2000">
        <div class="yivi-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
      <section class="yivi-web-centered" data-duration="5000">
        <img class="yivi-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX *\/8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
      </section>
      <section class="yivi-web-centered" data-duration="5000">
        <div class="yivi-web-waiting-for-user-animation"></div>
        <p>Volg de instructies in de Yivi app</p>
      </section>
      <section class="yivi-web-centered" data-duration="2000">
        <div class="yivi-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>

Source: src/examples/helpers.scss, line 1

1.2 Helpers

The Yivi form has a notification area for non-state errors that occur outside the disclosure flow. We call these "helpers", and they're supposed to give the user hints about known issues or point to specific resources to help the user along.

You can trigger these helpers to show in each and every example on this page.

Trigger helper:

<section class="yivi-web-form">
  <header class="yivi-web-header yivi-web-show-helper">
    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
    <section class="yivi-web-helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
    </section>
  </header>
  <section class="yivi-web-content">
  </section>
</section>

Source: src/examples/states.scss, line 1

1.3.1 States

These examples show the different states that the disclosure flow can move through.

State 1: Uninitialised

Weight: 0

State 2: Loading

Weight: 1

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Eén moment alsjeblieft

State 3a: Showing QR code (desktop)

Weight: 2

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

State 3b: Showing Yivi button (mobile)

Weight: 3

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Toon QR code

State 4: Pairing

Weight: 4

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Vul de koppelcode in die in je Yivi-app verschijnt.

State 5: Code scanned, continue on phone

Weight: 5

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Volg de instructies in de Yivi app

State 6: Disclosure cancelled

Weight: 6

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen

Opnieuw proberen

State 7: Disclosure timed out

Weight: 7

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Sorry! We hebben te lang
niks van je gehoord

Opnieuw proberen

State 8: Disclosure errored

Weight: 8

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Sorry! Er is een fout opgetreden

Opnieuw proberen

State 9: Browser is not supported

Weight: 9

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Het spijt ons, maar je browser voldoet niet aan de minimale eisen

State 10: Success

Weight: 10

Markup:

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Gelukt!

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

Eén moment alsjeblieft

<section class="yivi-web-center-child" style="** Parent styles ** width: 100%; height: 700px; border: 2px solid red;">
  <section class="yivi-web-form">
    <header class="yivi-web-header">
      <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
      <section class="yivi-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
      </section>
    </header>
    <section class="yivi-web-content">
      <section class="yivi-web-centered">
        <div class="yivi-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
    </section>
  </section>
</section>