Skip to content

Instantly share code, notes, and snippets.

@nha

nha/amp_lightbox_list_scrollable.html

Created January 8, 2018 17:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nha/fbe13b8e04e26cb41bdadc237571cc74 to your computer and use it in GitHub Desktop.
Save nha/fbe13b8e04e26cb41bdadc237571cc74 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
amp_lightbox_list_scrollable.html
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<link rel="canonical" href="https://ampbyexample.com/components/amp-list/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.list-overflow {
width: 160px;
margin-left: auto;
}
.lightbox amp-list {
padding-top: 100px;
background:red;
font-size: 20px;
}
.ampTabContainer {
display: flex;
flex-wrap: wrap;
}
.tabButton[selected] {
outline: none;
background: #ccc;
}
.tabButton {
list-style: none;
flex-grow: 1;
text-align: center;
cursor: pointer;
}
.tabContent {
display: none;
width: 100%;
order: 1; /* must be greater than the order of the tab buttons to flex to the next line */
border: 1px solid #ccc;
}
.tabButton[selected]+.tabContent {
display: block;
}
/* For example below (not required) */
.itemCustom {
border: 1px solid #000;
height: 280px;
width: 380px;
margin: 10px;
text-align: center;
padding-top: 140px;
}
amp-selector {
padding: 1rem;
margin: 1rem;
}
</style>
</head>
<body>
<!-- this one (amp-list inside amp-selector inside lightbox)-->
<!-- from https://ampbyexample.com/advanced/tab_panels_with_amp-selector/ -->
<button on="tap:my-lightbox3">Open lightbox 3</button>
<!-- issue here -->
<!-- scrollable="true" makes the amp list fail to load -->
<amp-lightbox id="my-lightbox3" layout="nodisplay" scrollable="true">
<div class="lightbox">
<amp-selector role="tablist"
layout="container"
class="ampTabContainer">
<div role="tab"
class="tabButton"
selected
option="a">Tab one</div>
<div role="tabpanel"
class="tabContent">Tab one content...
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampbyexample.com/json/examples.json" class="m1">
<template type="amp-mustache" id="amp-template-id">
<div><a href="{{url}}">LIGHTBOX - {{title}}</a></div>
</template>
</amp-list>
</div>
<div role="tab"
class="tabButton"
option="b">Tab two</div>
<div role="tabpanel"
class="tabContent">Tab two content... </div>
<div role="tab"
class="tabButton"
option="c">Tab three</div>
<div role="tabpanel"
class="tabContent">Tab three content... </div>
</amp-selector>
</div>
</amp-lightbox>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment