JSFiddle - React, Tailwind, and code Playground

Fliplet Portal Layout Plugin Overlay

by Hugo Carneiro

HTML

<div id="widget-content">
  <div class="container" id="widget-form-container">
    <div class="row row-content">
      <!-- Nav Tabs -->
      <ul class="nav nav-stacked col-xs-3 nav-pills">
        <li class="active"> <a href="#portal-settings" data-toggle="tab" id="toggle-portal-settings">Portal settings</a>

        </li>
      </ul>
      <!-- End of Nav Tabs -->
      <!-- Tab Panes -->
      <div class="tab-pane active" id="portal-settings">
        <div class="tab-content col-xs-9">
          <div class="form-horizontal">
            <div class="tab-pane-header">
              <h3>Configure your portal layout</h3>
              <p>&nbsp;</p>
            </div>
            <div class="tab-pane-content">

              <div class="form-group">
                <label class="col-xs-4 control-label">Show apps from one specific account</label>
                <div class="col-xs-8">
                  <div class="radio">
                    <label class="signin-yes" for="default_signin_yes">
                      <input type="radio" name="default-signin" id="default_signin_yes" value="yes" checked><strong>Yes</strong> - Users will be signed in automatically with a Fliplet account. Users will not be able to sign out or sign in with another account.</label>
                  </div>
                  <div class="show-options">
                    <button type="button" class="btn btn-primary" id="choose-account">Choose Fliplet account</button>
                    <span class="account-not-verified"> Verify login details <span class="glyphicon glyphicon-exclamation-sign"></span></span>
                  </div>
                  <div class="radio">
                    <label for="default_signin_no">
                      <input type="radio" name="default-signin" id="default_signin_no" value="no"><strong>No</strong> - User will need to sign in using their own Fliplet account.</label>
                  </div>
                </div>
              </div>

              <div...

CSS

/*************************
 *
 *	Document    : Fliplet Widget Styles
 *	Created on  : Jun 23, 2011, 5:44:22 PM
 *	Author      : Weboo
 *	Description : Fliplet Widget Styles
 *
 ************************/


/***********************/


/*       IMPORTS       */


/***********************/

@import url(https://fonts.googleapis.com/css?family=Dosis:200,400,700|Open+Sans:300italic,400italic,700italic,400,300,700&subset=latin,latin-ext);
html,
body {
  min-height: 100%;
  word-wrap: break-word;
}

* {
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------------------------------------------------------- 
01 Padding-less columns -------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .col-xs-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .col-sm-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .col-md-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  .col-lg-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Section: Legacy consistency */

.btn {
  vertical-align: middle;
  height: 2.6979166667em;
  line-height: 2.6979166667em;
  padding: 0 0.833333em;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border-width: 1px;
}

.btn-default {
  color: #333;
  text-decoration: none;
  background: #f1f1f1;
  background: -moz-linear-gradient(top, #fafafa 0%,...

JavaScript

// Checks if option is checked to Show/Hide option
if ($('input[type=radio][value=yes]').is(':checked')) {
  $('.show-options').show();
}
// Show/Hide option on change
$('input[type=radio][name=default-signin]').on('change', function() {
  console.log('HERE');
  if ($(this).val() === "yes") {
    $('.show-options').fadeIn();
  } else {
    $('.show-options').hide();
  }
});
// Show overlay with account details
$('#choose-account').on('click', function() {
  $('#myModal').modal({
    show: true,
    backdrop: 'static'
  });

  $('.modal-backdrop').appendTo('#widget-form-container');
});
// Click verify account
$('.verify-account').on('click', function() {
  // Adds 'verified' label
  if ($('.account-verified').length <= 0) {
    if ($('.account-not-verified').length) {
      $('.account-not-verified').remove();
    }

    $('.show-options').append('<span class="account-verified"> Verified <span class="glyphicon glyphicon-ok"></span></span>');
  }

  $('#myModal').modal('hide');
});