JSFiddle - React, Tailwind, and code Playground

Agenda

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="fl-viewport-header">
  <span class="nav-left fl-menu-back">
    <i class="fa fa-chevron-left" aria-hidden="true"></i> <span class="btn-label">Back</span>
  </span>
  <span class="nav-title">
    <ul class="nav nav-tabs agenda-tabs" role="tablist">
    <li role="presentation" class="active"><a href="" role="tab" data-toggle="tab">Agenda</a></li>
    <li role="presentation"><a href="" role="tab" data-toggle="tab"><span class="icon fa fa-star"></span> My Agenda</a>
  </li>
  </ul>
  </span>
  <span class="nav-right fl-toggle-menu" data-target="#fl-app-menu"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="agenda">
    <div class="directory-wrapper">
      <div class="directory-list">
        <div class="directory-loading">
          <div class="directory-loading-screen"></div>
          <div class="directory-loading-body">
            <div class="loader-wrapper">
              <div class="loader"></div>
            </div>
            <p class="loading-text"></p>
          </div>
        </div>
        <form id="directory-search">
          <span class="fa fa-search"></span>
          <input id="search" type="search" placeholder="Search or Filter">
          <a href="#" class="btn btn-link" id="search-cancel">Cancel</a>
        </form>
        <div class="date-slider">
          <div class="controls">
            <div class="left-arrow"><i class="fa fa-angle-left"></i></div>
            <div class="right-arrow"><i class="fa fa-angle-right"></i></div>
          </div>
    ...

CSS

.lavalamp-object {
    background-color: #00BCD4;
    border-radius: 3px;
}
.fl-viewport-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin: 0 auto;
  line-height: 43px;
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid rgba(127, 127, 127, 0.1);
  font-weight: 300;
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #333;
  font-size: 1em;
}

.fl-viewport-header .nav-title {
  display: block;
  margin: 0 15%;
  text-align: center;
  padding: 0;
}

.fl-viewport-header .nav-left,
.fl-viewport-header .nav-right {
  position: absolute;
  top: 0;
  height: 43px;
  cursor: pointer;
}

.fl-viewport-header .nav-left {
  left: 0px;
  line-height: 44px;
}

.fl-viewport-header .nav-right {
  right: 0;
  width: 44px;
  font-size: 1.5em;
}

.nav-left .fa {
  width: 44px;
  height: 44px;
}

.fl-viewport-header .nav-left .btn-label {
  display: inline-block;
  padding-left: 22px;
  padding-right: 22px;
  text-indent: -9999px;
  width: 0;
}

.nav-tabs.agenda-tabs {
  margin-top: 4px;
  border: none;
  background: #FFFFFF;
  border: 1px solid #00BCD4;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.nav-tabs.agenda-tabs > li {
  line-height: 1em;
  margin-bottom: 0;
}

.nav-tabs.agenda-tabs > li > a {
  color: #00BCD4;
  margin-right: 0;
  line-height: 1.2em;
  padding: 10px;
  border: none;
  border-radius: 4px;
  text-shadow: none;
}

.nav-tabs.agenda-tabs > li > a:hover {
  background-color: transparent;
}

.nav-tabs.agenda-tabs > li.active > a,
.nav-tabs.agenda-tabs > li.active > a:focus,
.nav-tabs.agenda-tabs > li.active > a:hover {
  color: #fff;
  cursor: default;
  background-color: #00BCD4;
  border-radius: 4px;
  text-shadow: none;
  border: none;
}

@media screen and (min-width: 640px) {
  .fl-viewport-header {
    height: 55px;
    line-height: 54px;
    font-size: 1.2em;
  }
  .fl-viewport-header .nav-left,
  .fl-viewport-header...

JavaScript

/*$(function() {
  $('ul.agenda-tabs').lavalamp({
    duration: 250,
    setOnClick: true,
    enableHover: false
  });
});*/


// Arrow click to scroll
var speed = 100;

$(".left-arrow").on('click', function() {
  var now = $(this).parent().next(".date-scrollable").children(":visible"),
    last = $(this).parent().next(".date-scrollable").children(":last"),
    prev = now.prev();
  prev = prev.index() == -1 ? last : prev;
  now.fadeOut(speed, function() {
    prev.fadeIn(speed);
  });
});

$(".right-arrow").on('click', function() {
  var now = $(this).parent().next(".date-scrollable").children(':visible'),
    first = $(this).parent().next(".date-scrollable").children(':first'),
    next = now.next();
  next = next.index() == -1 ? first : next;
  now.fadeOut(speed, function() {
    next.fadeIn(speed);
  });
});

$(".date-scrollable li").on('click', function() {
  var first = $(this).parent().children(':first'),
    next = $(this).next();
  next = next.index() == -1 ? first : next;
  $(this).fadeOut(speed, function() {
    next.fadeIn(speed);
  });
});

$(document).on('click', '.save-to-agenda', function() {

	var entryID = $('.directory-details-content').data('source-entry-id');
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    $(this).find('.fa').removeClass('fa-star-o').addClass('fa-star');
    $(this).find('.save-to-agenda-text').text('Saved in My Agenda');
    
    $('.list-default li[data-source-entry-id="'+entryID+'"]').addClass('stared');
  } else {
    $(this).find('.fa').removeClass('fa-star').addClass('fa-star-o');
    $(this).find('.save-to-agenda-text').text('Save in My Agenda');
    
    $('.list-default li[data-source-entry-id="'+entryID+'"]').removeClass('stared');
  }

});

$(document).on('click', '.btn.feedback', function() {
  $('.feedback-form').addClass('show');
});

$(document).on('click', '.btn.no-feedback', function() {
  var txt;
  var entryID = $('.directory-details-content').data('source-entry-id');
  var alert =...