JSFiddle - React, Tailwind, and code Playground

Fliplet Photo Feed 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">
        <!-- Remove comment when more layouts are available
        <li class="active"> <a href="#photo-layout" data-toggle="tab" id="toggle-photo-layout">Photo feed layout</a>

        </li> -->
        <li class="active"> <a href="#photo-settings" data-toggle="tab" id="toggle-photo-settings">Photo feed settings</a>

        </li>
      </ul>
      <!-- End of Nav Tabs -->
      <!-- Tab Panes -->
      <!-- Remove this comment when more layouts are available
      <div class="tab-pane active" id="photo-layout">
        <div class="tab-content col-xs-9">
          <div class="form-horizontal">
            <div class="tab-pane-header">
              <h3>Choose a layout for your photo feed</h3>
              <p>You can change this at any time.</p>
            </div>
            <div class="tab-pane-content">
              <div class="form-group" id="photo-layout-styles">


                <div class="col-xs-6 layout-holder">
                  <input type="radio" name="photo_layout_style" id="photo_layout_full_width" value="full-width" class="hidden">
                  <label for="photo_layout_full_width">
                    <span class="help-block">Full width</span>
                    <div class="img-holder">
                      <div class="screen"></div>
                      <img class="img-responsive" src="http://placehold.it/260x200">
                    </div>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      -->
      
      <div class="tab-pane active" id="photo-settings">
        <div class="tab-content col-xs-9">
          <div class="form-horizontal">
            <div class="tab-pane-header">
              <h3>Configure your photo feed</h3>
              <p>&nbsp;</p>
     ...

CSS

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


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


/*       IMPORTS       */


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

@import url(http://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

// Changes tabs once a layout is selected
// To be used when more layouts are available
/* $('#photo-layout input[name="photo_layout_style"]').on('change', function() {
  $('#photo-layout').removeClass('active');
  $('#toggle-photo-layout').parents('li').removeClass('active');
  $('#photo-settings').addClass('active');
  $('#toggle-photo-settings').parents('li').addClass('active');

  $disabledTabs = $('.nav-stacked').find('.disabled');
  $disabledTabs.each(function() {
    $(this).removeClass('disabled');
  });

  $('input[name="photo_layout_style"]').removeClass('checked');
  $(this).addClass('checked');
}); */

// Show/Hide report to option on change
if ( $('#enable_report').is(':checked') ) {
    $('.sendEmailWrap').show();
}
$('#enable_report').on('change', function () {
    if( $(this).is(":checked") ) {
        $('.sendEmailWrap').fadeIn();
    } else {
        $('.sendEmailWrap').hide();
    }
});

// Show/Hide report to option on change
if ( $('#attach_form').is(':checked') ) {
    $('.attachFormWrap').show();
}
$('#attach_form').on('change', function () {
    if( $(this).is(":checked") ) {
        $('.attachFormWrap').fadeIn();
    } else {
        $('.attachFormWrap').hide();
    }
});

$('#form_chooser').on('change', function () {
	$('#field_chooser').fadeIn();
});