Yivi css

Yivi css

Source: src/components/qr-code.scss, line 1

5.1 QR code

Styling to apply to the QR code container. The QR is rendered as an inline SVG so it scales to any container size without scaling artifacts.

Example

<div class="yivi-web-qr-code">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33"><!-- ... --></svg>
</div>

Source: src/components/yivi-button.scss, line 1

5.2 Yivi button

A button to press to launch the disclosure flow in the Yivi app (locally on a mobile device)

<button class="yivi-web-button">
  Open Yivi-app
</button>
<a href="#" class="yivi-web-button">
  Open Yivi-app
</a>

Source: src/components/yivi-form.scss, line 1

5.3 Yivi 'login form'

A place to nicely show the different states of the Yivi disclosure flow.

Trigger helper:

<section class="yivi-web-form">
  <div class="yivi-web-header">
    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
    <div 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>
    </div>
  </div>
  <div class="yivi-web-content">
    <div class="yivi-web-centered">
      <button>Some action here</button>
      <p>With some text <a href="#">and stuff</a></p>
    </div>
  </div>
</section>
<section class="yivi-web-form">
  <div class="yivi-web-header">
    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
    <div 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>
    </div>
    <button class="yivi-web-close"></button>
  </div>
  <div class="yivi-web-content">
    <div class="yivi-web-centered">
      <button>Some action here</button>
      <p>With some text <a href="#">and stuff</a></p>
    </div>
  </div>
</section>

Source: src/components/yivi-minimal.scss, line 1

5.5 Yivi minimal mode

Styling for the yivi-web 'minimal' mode, which renders only the QR code and state animations without the form wrapper, header, or helper elements.

Example

<div class="yivi-web-minimal">
  <div class="yivi-web-centered">
    <div class="yivi-web-qr-code"></div>
  </div>
</div>

Source: src/components/yivi-pairing-form.scss, line 1

5.6 Yivi pairing form

A form to enter the pairing code in order to pair your Yivi app with the session.

Example

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

<form class="yivi-web-pairing-form">
  <p>Vul de koppelcode in die in je Yivi-app verschijnt.</>
  <div class="yivi-web-pairing-code">
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
  </div>
  <div class="yivi-web-pairing-loading-animation" style="visibility: hidden">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
  <input type="submit" style="display: none" />
  <script type="application/javascript">
    let form = document.querySelector('.yivi-web-pairing-form');
    let inputFields = form.querySelectorAll('.yivi-web-pairing-code input');
    inputFields.forEach(field => {
      field.onkeydown = (e) => {
        e.target.prevValue = e.target.value;
        if (e.key != 'Enter') e.target.value = '';
      };
      field.onkeyup = (e) => {
        let prevField = e.target.previousElementSibling;
        if (prevField && e.key == 'Backspace' && e.target.value === e.target.prevValue) {
          prevField.value = '';
          prevField.focus();
        }
      };
      field.oninput = (e) => {
        let nextField = e.target.nextElementSibling;
        if (!nextField || !e.target.checkValidity()) {
          e.target.form.querySelector('input[type=submit]').click();
        } else {
          nextField.focus();
        }
      };
      field.onfocus = (e) => {
        if (!e.target.value) {
          e.preventDefault();
          e.target.form.querySelector('input:invalid').focus();
        }
      };
    });
    inputFields[0].parentElement.onclick = (e) => {
      if (e.target.tagName !== 'INPUT') {
        let firstInvalidField = form.querySelector('input:invalid');
        if (firstInvalidField) firstInvalidField.focus();
      }
    };
    form.onsubmit = (e) => {
      e.preventDefault();
      let code = Array.prototype.map.call(inputFields, f => {
        f.disabled = true;
        return f.value;
      }).join('');
      e.target.querySelector('.yivi-web-pairing-loading-animation').style.visibility = 'visible';
      setTimeout(() => {
        e.target.reset();
        inputFields.forEach(f => f.disabled = false);
        inputFields[0].focus();
        e.target.querySelector('p').innerHTML = `De ingevoerde koppelcode ${code} komt niet overeen met de code in jouw Yivi-app. Probeer het opnieuw.`;
        e.target.querySelector('.yivi-web-pairing-loading-animation').style.visibility = 'hidden';
      }, 500);
    };
  </script>
</form>