Preact test for mobile device beta v1

index.html

<div id="root"></div>

preact-test-for-mobile-device-beta-v1.markdown

Preact test for mobile device beta v1

A Pen by james quinn on CodePen.

License.

script.babel

const { h, Component, render } = preact; /** @jsx h */

class App extends Component {
	  constructor() {
    super()
    this.state = {
      isMobile: false
    }
  }


	  componentDidMount() {
    if(
          navigator.userAgent.match(/Android/i) ||
          navigator.userAgent.match(/webOS/i) ||
          navigator.userAgent.match(/iPhone/i) ||
          navigator.userAgent.match(/iPad/i) ||
          navigator.userAgent.match(/iPod/i) ||
          navigator.userAgent.match(/BlackBerry/i) ||
          navigator.userAgent.match(/Windows Phone/i)
        ) {
      this.setState({ isMobile: true});
    } 
		}

	
	renderContent() {
		if(this.state.isMobile) {
			return <img class="lazyload" data-src="http://5stepmarketing.com/web/wp-content/uploads/2017/08/gym-owner.jpg" alt=""/>
		} else {
			return <video  src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop playsinline muted poster="http://5stepmarketing.com/web/wp-content/uploads/2017/08/gym-owner.jpg"></video>
		}
		
	}
	    render() {
				
        return (
					<main>
					<header>
					<div class="video-header">
					{this.renderContent()}
						</div>
					<div class="viewport-header">
          <svg viewBox="0 0 32 32">
            <title>arrow</title>
            <path fill="inherit" d="M16 32c8.859 0 16-7.141 16-16s-7.141-16-16-16-16 7.141-16 16 7.141 16 16 16z"></path>
            <path fill="#100" d="M23.955 13.921c-0.271-0.271-0.723-0.362-0.994-0.090l-6.96 5.785-6.96-5.785c-0.271-0.271-0.723-0.271-0.994 0.090-0.271 0.271-0.181 0.723 0.090 0.994l7.412 6.147c0.090 0.090 0.271 0.181 0.452 0.181s0.362-0.090 0.452-0.181l7.412-6.147c0.362-0.271 0.362-0.723 0.090-0.994z"></path>
          </svg>
        </div>
						<div class="cta-header">
							hello
						</div>
					</header>
						<h2>Lazysizes</h2>
						<p>lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.</p>

<p>It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.</p>
						</main>
				) 
    }
}

render(<App />, document.querySelector("#root"));

scripts

<script src="https://unpkg.com/preact/dist/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.1/lazysizes.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/preact-css-transition-group.js"></script>

style.less

:root {
   --fullGrid: 1 / 1 / -1 / -1;
   --video-header__video__z-index: 1;
   --viewport-header__z-index:2;
	 --cta-header__z-index:3;
}

body {
  font-size: 14px;
  line-height: 1.7rem;
  background-color: black;
  color: white;
  /* This is a font-stack that tries to use the system-default sans-serifs first */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Head Banner */

header {
  /* Create grid spanning viewport width & height */
  display: grid;
  grid-template-rows: 100vh;
}

.video-header,
.video-header video,
.video-header img {
  /* Create grid spanning viewport width & height */
  display: grid;
  grid-area: var(--fullGrid);
	grid-template-rows: 100vh;
}

.video-header video,
.video-header img{
  width: 100%;
  height: 100%;
  object-fit: cover;
	object-position: centre;
  z-index: var(--video-header__video__z-index);
}

.viewport-header {
	display: grid;
  grid-area: var(--fullGrid);
	grid-template-rows: calc( 100vh - 2.5rem);
	justify-items: center;
	align-items: end;
	z-index: var(--viewport-header__z-index);
}

.viewport-header svg {
  width: 2.75rem;
  height: 2.75rem;
	fill:currentColor;
}

.cta-header {
	display: grid;
  grid-area: var(--fullGrid);
	grid-template-rows:100vh;
	justify-items: center;
	align-items: center;
	z-index: var(--cta-header__z-index);
}


/* fade image in after load */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

page partial re-engineered