spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
241 lines (231 loc) • 13.3 kB
HTML
<!--
Copyright 2018 LG Electronics Inc. All rights reserved.
- Author: Jihye Hong (jh.hong@lge.com)
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Demo</title>
<link rel="stylesheet" href="blog-style.css">
<script src="blog-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<div class="blog">
<!-- Side bar Section start -->
<div id="sidebar" class="col-sm-3" style="display: block; --spatial-navigation-contain: contain;">
<div class="text-center">
<img src="images/profile.png" alt="profile" style="width: 60%; height: 60%;">
<br>
<span class="text-title"><strong>Spatial Navigation Blog</strong></span>
</div>
<div class="text-menu" style="height: 80%; vertical-align: top;">
<div class="my-5 mr-4 ml-4">
<div class="my-4"><a href="#" class="menulink" onclick="swapTabContents(event, 'feed');"> Feed</a></div>
<div class="my-4"><a href="#" class="menulink" onclick="swapTabContents(event, 'sample');"> Sample</a></div>
</div>
</div>
</div>
<!-- Side bar Section end -->
<!-- Feed Section starts -->
<div id="feed" class="col-sm-9 tabcontent" style="display: block; --spatial-navigation-contain: contain;">
<div class="my-5">
<div class="gridrow mx-5">
<!-- 1st column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabindex="0" class="card-img-top" src="images/feed/1.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/2.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/9.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!-- 1st column ends -->
<!-- 2st column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/3.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/4.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/5.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/10.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!-- 2st column ends -->
<!-- 3rd column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/6.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/7.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/8.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/11.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!-- 3rd column ends -->
<!-- 4th column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/12.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/13.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/14.jpg" style="width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!-- 4th column ends -->
</div>
</div>
</div>
<!-- Feed Section end -->
<!-- Sample Section start -->
<div id="sample" class="col-sm-9 tabcontent" style="display: none; --spatial-navigation-contain: contain;">
<iframe class="sampleFrame" src="../index.html" tabindex="0" frameborder="0" style="overflow-y: scroll;"></iframe>
</div>
<!-- Sample Section end -->
</div>
</body>
</html>