JSFiddle - React, Tailwind, and code Playground

Photo Stream - Proto

by Hugo Carneiro

HTML

<script src="http://lab.cubiq.org/iscroll5/build/iscroll-probe.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.0/animate.min.css">
<div class="loading-message-holder">
  <div class="loading-message">We’re loading the feed for the first time. This will take just a couple of minutes.</div>
</div>

<div id="wrapper">
  <div class="add-photo animated">
    <span class="glyphicon glyphicon-camera"></span>
  </div>
  <div class="offline-warning animated">
    <p>Your device is offline</p>
  </div>
  <div class="stream-wrapper">
    <div class="btn btn-primary" id="pull-to-refresh">
      <span class="pull-text">Refresh</span> <span class="glyphicon glyphicon-refresh"></span>
    </div>
    <div class="image-wrapper">
      <div class="image-container">
        <img src="http://lorempixel.com/720/1080/">
      </div>
      <div class="info-wrapper">
        <div class="clearfix">
          <div class="pull-left">
            <p><strong>Hugo Carneiro</strong> <small>2 seconds ago</small></p>
          </div>
          <div class="pull-right">
            <p class="btn btn-link">Report photo</p>
          </div>
        </div>

        <p><i>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit.</i></p>
      </div>
    </div>
    <div class="image-wrapper">
      <div class="image-container">
        <img src="http://lorempixel.com/1024/768/">
      </div>
      <div class="info-wrapper">
        <div class="clearfix">
          <div class="pull-left">
            <p><strong>Hugo Carneiro</strong> <small>2 seconds ago</small></p>
          </div>
          <div class="pull-right">
            <p class="btn btn-link">Report photo</p>
          </div>
        </div>

        <p><i>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit.</i></p>
      </div>
    </div>
    <div class="image-wrapper">
      <div...

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 16px;
  font-family: helvetica, arial;
}

.loading-message-holder {
	display: block;
	position: absolute;
  left: 0;
  right: 0;
  top: 45%;
}

.loading-message-holder.loaded {
	display: none;
}

.loading-message-holder .loading-message {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

#wrapper {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
}

#wrapper.ready {
  display: block;
}

.offline-warning {
  display: none;
  position: fixed;
  width: 100%;
  background-color: #428bca;
  color: #FFF;
  z-index: 2;
  text-align: center;
  padding: 6px 0 0 0;
}

.add-photo {
  background-color: #428bca;
  border-radius: 50%;
  border: 2px solid #FFF;
  width: 50px;
  height: 50px;
  line-height: 51px;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 2;
  bottom: 25px;
  right: 25px;
  font-size: 28px;
  color: #FFF;
}

#scroller {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.stream-wrapper {
  text-align: center;
  padding: 16px;
  position: relative;
}

.stream-wrapper .btn {
  margin-bottom: 16px;
}

#pull-to-refresh {
  height: 40px;
  line-height: 26px;
  width: 100%;
  color: #428bca;
  background-color: #FFF;
  border-color: #428bca;
}

#pull-to-refresh .pull-text {
  display: inline-block;
}

.image-wrapper {
  margin-bottom: 20px;
}

.image-container {
  position: relative;
  width: 100%;
  max-height: 640px;
  overflow: hidden;
}

.image-container img {
  position: relative;
  max-width: 100%;
  max-height: inherit;
}

canvas {
  width: 100%;
  height: 350px;
  border: none;
}

.info-wrapper {
  margin-top: 16px;
  text-align: left;
}

.info-wrapper .btn {
  margin-bottom: 0;
  padding: 0 0 0 16px;
}

#pull-to-refresh.refreshing .glyphicon-refresh {
  margin-left: 5px;
  -moz-animation:rotateThis 1.5s...

JavaScript

setTimeout(firstLoad, 2000);

function firstLoad() {
	$('.loading-message-holder').addClass('loaded');
	$('#wrapper').addClass('ready');
  
  $('#pull-to-refresh').on('click', function() {
  	$(this).addClass('refreshing').html('Refreshing <span class="glyphicon glyphicon-refresh"></span>');
  });
  
  setTimeout(blink, 2000);
  setTimeout(offlineMessage, 5000);
}

function blink() {
  $('.add-photo').addClass('rubberBand');
}

function offlineMessage() {
	$('.offline-warning').addClass('show slideInDown');
  setTimeout(function() {
  	$('.offline-warning').removeClass('slideInDown').addClass('slideOutUp');
  }, 10000);
}