JSFiddle - React, Tailwind, and code Playground

Fliplet Directory 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> <a href="#" data-toggle="tab" id="toggle-rss-layout">Change data source</a>

        </li>
        <li class="active"> <a href="#rss-settings" data-toggle="tab" id="toggle-rss-settings">Browse options</a>

        </li>
        <li> <a href="#" data-toggle="tab" id="toggle-rss-settings">Detail options</a>

        </li>
      </ul>
      <!-- End of Nav Tabs -->
      <!-- Tab Panes -->
      <div class="tab-pane active" id="rss-settings">
        <div class="tab-content col-xs-9">
          <div class="form-horizontal">
            <div class="tab-pane-header">
              <h3>Configure how users can browse your data</h3>
              <p class="lead">Your data will be displayed in a list. You can set up how it's displayed and configure how users can search/filter your data.</p>
            </div>
            <div class="tab-pane-content">
              <div class="form-horizontal">

                <div class="form-group">
                  <div class="col-xs-4 control-label">
                    <label for="directory-browse-label">How do you want your title displayed in the main list?</label>
                  </div>
                  <div class="col-xs-8">
                    <input type="text" class="form-control" id="directory-browse-label" placeholder="Enter field names">
                    <p class="help-block">Use <code>{{*}}</code> to wrap around a field name, e.g. <code id="sample-label">{{Name}}, {{Company}}</code>.</p>
                  </div>
                </div>
                
                
                <!-- NEW IMAGE OPTION -->
                <div class="form-group">
                  <label for="show_image_thumb" class="col-xs-4 control-label">Show image in the main list?</label>
                  <div class="col-xs-8">
            ...

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

if ($('#show_subtitle').is(':checked')) {
  $('.show-subtitle').show();
}

$('#show_subtitle').on('change', function() {
  if ($(this).is(":checked")) {
    $('.show-subtitle').fadeIn();
  } else {
    $('.show-subtitle').hide();
  }
});

if ($('#show_tags').is(':checked')) {
  $('.show-tags').show();
}

$('#show_tags').on('change', function() {
  if ($(this).is(":checked")) {
    $('.show-tags').fadeIn();
  } else {
    $('.show-tags').hide();
  }
});

if ($('#show_image_thumb').is(':checked')) {
  $('.show-image-thumb').show();
}

$('#show_image_thumb').on('change', function() {
  if ($(this).is(":checked")) {
    $('.show-image-thumb').fadeIn();
  } else {
    $('.show-image-thumb').hide();
  }
});