JSFiddle - React, Tailwind, and code Playground

Networking settings UI

by Hugo Carneiro

HTML

<div class="viewport-content scroll">
  <div class="content-main container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-8 col-md-offset-2">
        <div class="content-wrapper">
          <div class="state present" data-state="network-preferences">
            <h3>Networking preferences</h3>
            <p>Would you like to be contacted by other attendees for networking?</p>
            <div class="radio">
              <input type="radio" name="network-method" id="method1" value="yes">
              <label for="method1" class="radio-option">Yes, via [email protected]</label>
            </div>
            <div class="radio">
              <input type="radio" name="network-method" id="method2" value="change-method">
              <label for="method2" class="radio-option">Yes, via text message</label>
            </div>
            <div class="radio">
              <input type="radio" name="network-method" id="method3" value="no">
              <label for="method3" class="radio-option">No, I don't want to be contacted</label>
            </div>
          </div>
          <div class="state future" data-state="verify-code-new">
            <h3>Networking preferences</h3>
            <p>Enter the authentication code that was sent to <span id="method-chosen">07932077290</span>.</p>
            <div class="input-wrapper">
              <input type="text" id="" class="form-control" placeholder="Enter pin code" />
              <span class="glyphicon glyphicon-chevron-left back networking"></span>
            </div>
            <p class="text-danger">You entered the wrong code. Try again.</p>
            <button class="buttonControl ui-button link-button-primary authenticate-new">Authenticate</button>
          </div>
          <div class="state future" data-state="all-done">
            <h3>All done</h3>
            <p>You can now continue to the app.</p>
            <button class="buttonControl ui-button link-button-primary">Continue</button>
  ...

CSS

body {
  background: #e8e8e8;
}

.viewport-content {
  padding-top: 44px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.scroll {
  overflow: auto !important;
}

.content-main {
  padding-top: 70px;
}

.ui-button,
.link-button-primary {
  display: block;
  clear: both;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border: none;
  border-radius: 0px;
  text-align: center;
}

.ui-button,
.link-button-primary {
  clear: none;
  display: inline-block;
  width: auto;
  max-width: 100%;
}

.link-button-primary {
  color: #FFF;
  background-color: #fdb720;
}

.link-text,
.ui-button.link-text {
  text-decoration: underline;
  display: inline;
  width: auto;
  font-size: 1em;
  line-height: inherit;
  padding: 0;
  text-align: inherit;
  border: inherit;
  border-radius: inherit;
  background: none;
}

.link-text {
  color: #FF671B;
}

.content-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.content-wrapper .state {
  position: absolute;
  width: 100%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.content-wrapper .state.past {
  -webkit-transform: translate3d(-105%, 0, 0);
  transform: translate3d(-105%, 0, 0);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.content-wrapper .state.present {
  opacity: 1;
  pointer-events: all;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.content-wrapper .state.future {
  -webkit-transform: translate3d(105%, 0, 0);
  transform: translate3d(105%, 0, 0);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.state p {
  margin: 30px 0 20px 0;
}

.state p + p {
  margin: -10px 0 20px 0;
}

.state .radio {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.state .radio + .radio {
  margin-top: 15px;
}

.state .radio label {
  height: 55px;
  width: 100%;
  padding:...

JavaScript

function calculateElHeight(el) {

  var elementHeight = el.outerHeight();
  el.parents('.content-wrapper').css('height', elementHeight);

  if (el.hasClass('start')) {
    $('.state[data-state=method]').removeClass('start').addClass('present');
  }

}

function onlineCheck() {
  if (offline) {
    $('#offline-notification').addClass('show');
  } else {
    if ($('#offline-notification').hasClass('show')) {
      $('#offline-notification').removeClass('show');
    }
  }
}
var offline = true;

$('body').prepend('<div id="offline-notification">Your device is offline</div>');
calculateElHeight($('.state[data-state=network-preferences]'));
onlineCheck();

setTimeout(function() {
  offline = false;
  onlineCheck();
}, 5000);

$('.back.networking').on('click', function() {
  $('input[name=network-method]:checked').prop("checked", false);
  $('.state.present').removeClass('present').addClass('future');
  calculateElHeight($('.state[data-state=network-preferences]'));
  $('.state[data-state=network-preferences]').removeClass('past').addClass('present');
  $('.state.past').removeClass('past').addClass('future');
});

$('.have-code').on('click', function() {
  if ($('.state[data-state=verify-new]').hasClass('present')) {
    $('.state.present').removeClass('present').addClass('past');
    calculateElHeight($('.state[data-state=verify-code-new]'));
    $('.state[data-state=verify-code-new]').removeClass('future').addClass('present');
  } else if ($('.state[data-state=verify-email]').hasClass('present') || $('.state[data-state=verify-number]').hasClass('present')) {
    $('.state.present').removeClass('present').addClass('past');
    calculateElHeight($('.state[data-state=verify-code]'));
    $('.state[data-state=verify-code]').removeClass('future').addClass('present');
  }
});

$('.authenticate-new').on('click', function() {
  //TODO: VERIFY THAT THE CODE IS THE SAME
  $('.state.present').removeClass('present').addClass('past');
 ...