JSFiddle - React, Tailwind, and code Playground

Fliplet - About App

by Hugo Carneiro

HTML

<script src="https://cdn.api.fliplet.com/sdk.js?packages=jquery,bootstrap&amp;auth_token=123"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.api.fliplet.com/assets/fliplet-core/1.0/fliplet-core.bundle.css">
<!-- SCREEN MOCKUP -->
<!-- DO NOT USE ----->
<div class="fl-viewport-header">
  <span class="nav-title">
    <span>Screen title</span>
  </span>
  <span class="nav-right" data-fl-toggle-menu=".fl-menu">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </span>
</div>
<div>
  <img src="https://drivenlocal.com/wp-content/uploads/2015/10/Material-design.jpg" />
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <h2>Aenean lacinia bibendum nulla sed consectetur.</h2>
      <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non
        magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      <br>
      <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
        commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat
        porttitor ligula, eget...

CSS

/***********************************
** DO NOT USE **********************
** JUST TO SET THE LOOK OF AN APP **
***********************************/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html,
body {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

.fl-viewport-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin: 0 auto;
  line-height: 43px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  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;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.fl-viewport-header .nav-title {
  display: block;
  margin: 0 18.5%;
  text-align: center;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fl-viewport-header .nav-left,
.fl-viewport-header .nav-right {
  position: absolute;
  top: 0;
  height: 43px;
  cursor: pointer;
  right: 0;
  width: 44px;
  font-size: 1.5em;
}

.btn-secondary {
  display: block;
  clear: both;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 24px;
  border: none;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  background-color: #c0c0c0;
  white-space: initial;
}

.btn-secondary:focus,
.btn-secondary:hover,
.btn:active:focus {
  outline: none;
}

@media (min-width:640px) {
  .btn-secondary {
    clear: none;
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

@media only screen and (max-width: 640px) {
  .fl-page-editable...

JavaScript

function hideUpdateNotesChars() {
  // Configure/customize these variables.
  var showChar = 110; // How many characters are shown by default
  var ellipsestext = "...";
  var moretext = "Read more";
  var lesstext = "Show less";


  $('.more').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
}

$('[data-fl-toggle-menu]').on('click', function() {
  var loginOverlay = new Fliplet.Utils.Overlay($('template[name="portal-login-overlay-template"]').html(), {
    showOnInit: true,
    showClose: true,
    closeAnywhere: true,
    beforeClose: function() {},
    afterClose: function() {},
    beforeOpen: function() {
      hideUpdateNotesChars();
    },
    afterOpen: function() {
      // Fix blurryness on older Android devices
      $(loginOverlay.overlay).css('-webkit-transform', 'translate3d(0px,0px,0px)');
    },
    classes: 'overlay-about-app',
    entranceAnim: 'fadeInDown',
    exitAnim: 'fadeOutUp',
    size: 'compact',
    uniqueId: 'about-app'
  });
});

$(document).on('click', '[data-fl-update-notes]', function() {
  var updatesOverlay = new Fliplet.Utils.Overlay($('template[name="update-notes-template"]').html(), {
    showOnInit: true,
    showClose: true,
    closeAnywhere: true,
    beforeClose: function() {},
    afterClose: function() {},
    beforeOpen: function() {
     ...