Skip to content

Commit

Permalink
Added browser support section in docs site
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuinchien @cdata
yuinchien authored and cdata committed Mar 15, 2019
1 parent d388016 commit 9303c6c
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 9 deletions.
130 changes: 124 additions & 6 deletions examples/styles/examples.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,123 @@ a {
text-decoration: none;
color: #ff5252;
}
b {
font-weight: 500;
}
table {
text-align: left;
border-spacing: 0;
display: table;
border-collapse: collapse;
width: 100%;
}
table.browser-support {
margin-bottom: 32px;
}
table.browser-support td:first-child,
table.browser-support th:first-child {
display: block;
line-height: 24px;
padding: 12px 2px 8px 0;
text-align:left;
flex:2;
min-width: 92px;
}
table.browser-support tr {
display: flex;
border-top: 1px solid rgba(0,0,0,.15);
}
table.browser-support tr:first-child {
border-top: none;
}
table.browser-support th,
table.browser-support td {
flex: 1;
font-weight: 400;
line-height: 0;
padding: 10px 0 10px 0;
text-align: center;
display: grid;
justify-content: center;
align-items: center;
}
table.browser-support th {
color: rgba(0,0,0,.54);
}
table.browser-support td {
color: #ff5252;
}
table.browser-support img {
width: 24px;
height: 24px;
}
.browser-support-desc {
max-width: 420px;
position: relative;
margin-bottom: 16px;
}
.browser-support-desc:before {
display: block;
width: 40px;
height: 2px;
background: rgba(0,0,0,.15);
margin: 40px 0 20px 0;
content: "";
}

.icon-desc {
padding: 8px 0;
width: 50%;
min-width: 240px;
float: left;
}
.icon-desc > * {
margin-right: 16px;
display: inline-block;
vertical-align: middle;
}
.size-24 {
width: 24px;
height: 24px;
}
.logo-chrome {
content: url("https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_48x48.png");
}
.logo-canary {
content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome-canary/chrome-canary_48x48.png");
}
.logo-safari {
content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png");
}
.logo-firefox {
content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png");
}
.logo-edge {
content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png");
}
.logo-ie {
content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png");
}
.icon-check {
opacity: .6;
content: url("https://www.gstatic.com/images/icons/material/system/2x/done_black_24dp.png");
}
.icon-warning {
opacity: .6;
/* content: url("https://www.gstatic.com/images/icons/material/system/2x/check_circle_outline_black_24dp.png"); */
content: url("https://www.gstatic.com/images/icons/material/system/2x/assignment_turned_in_black_24dp.png");
/* content: url("https://www.gstatic.com/images/icons/material/system/2x/error_outline_black_20dp.png"); */
/* content: url("https://www.gstatic.com/images/icons/material/system/2x/warning_black_24dp.png"); */
}
.icon-na {
opacity: .6;
content: url("https://www.gstatic.com/images/icons/material/system/2x/not_interested_black_24dp.png");
}
.icon-flag {
opacity: .5;
content: url("https://www.gstatic.com/images/icons/material/system/2x/flag_black_24dp.png");
}

h1, h2, h3, h4 {
font-weight: 400;
}
Expand Down Expand Up @@ -392,6 +509,12 @@ paper-button {
#list-example {
grid-template-columns: 1fr;
}
.content .wrapper {
margin: 0px 20px;
padding-top: 24px;
min-height: auto;
border-bottom: none;
}
}

@media only screen and (max-width: 800px) {
Expand Down Expand Up @@ -434,12 +557,7 @@ paper-button {
display: block;
content: "";
}
.content .wrapper {
margin: 0px 20px;
padding-top: 24px;
min-height: auto;
border-bottom: none;
}

.content h2 {
padding-left: 8px;
padding-right: 8px;
Expand Down
119 changes: 116 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ <h1 style="white-space:nowrap;"><span>&lt;</span>model-viewer<span>&gt;</span></
<h3>Easily display interactive 3D models on the web & in AR</h3>
</div>

<h3 class="grouping-title">EXAMPLES</h3>
<h3 class="grouping-title">Examples</h3>
<ul id="list-example">
<li>
<a href="examples/lighting-and-environment.html"><h4>Lighting &amp; Environment</h4></a>
Expand All @@ -138,7 +138,7 @@ <h3 class="grouping-title">EXAMPLES</h3>
</li>
</ul>

<h3 class="grouping-title">ATTRIBUTES</h3>
<h3 class="grouping-title">Attributes</h3>

<ul class="list-attribute">
<li>
Expand Down Expand Up @@ -229,7 +229,7 @@ <h4>unstable-webxr</h4>
<p style="color:rgba(0,0,0,.54);">Note: All attributes have a corresponding property in camel-case format. For example, the background-color attribute can also be configured using the backgroundColor property.</p>


<h3 class="grouping-title" style="margin-top: 40px;">EVENTS</h3>
<h3 class="grouping-title" style="margin-top: 40px;">Events</h3>

<ul class="list-attribute">
<li>
Expand All @@ -246,6 +246,119 @@ <h4>load</h4>
<h4>preload</h4>
<p>When preload is enabled this event is fired when preloading is done.</p>
</li>
</ul>

<h3 class="grouping-title" style="margin-top: 40px;">Browser Support</h3>

<div class="icon-desc"><img class="size-24 icon-check"><div>Natively supported</div></div>
<div class="icon-desc"><img class="size-24 icon-warning"><div>Available with polyfill</div></div>
<div class="icon-desc"><img class="size-24 icon-flag"><div>Behind a flag, unstable</div></div>
<div class="icon-desc"><img class="size-24 icon-na"><div>Not available</div></div>

<div style="clear:both"></div>

<p class="browser-support-desc">These browser features are <b>required</b> for <span class="attribute">&lt;model-viewer&gt;</span> to work correctly:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
<th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65" src="logo-firefox"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
</tr>
<tr>
<td>Custom Elements</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
</tr>
<tr>
<td>Shadow DOM</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
</tr>
</table>

<p class="browser-support-desc">These browser features are <b>optional</b> and are only used if available for performance optimization:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
<th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65" src="logo-firefox"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
</tr>
<tr>
<td>Resize Observer</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
</tr>
<tr>
<td>Intersection Observer</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
</tr>
</table>

<p class="browser-support-desc">These browser features are <b>optional</b> and are only needed if you wish to use the unstable-webxr feature:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
<th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65" src="logo-firefox"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
</tr>
<tr>
<td>Fullscreen API</td>
<td><img class="icon-check"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-check"></td>
<td><img class="icon-warning"></td>
<td><img class="icon-warning"></td>
</tr>
<tr>
<td>WebXR Device API</td>
<td><img class="icon-na"></td>
<td><img class="icon-flag"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
</tr>
<tr>
<td>WebXR HitTest API</td>
<td><img class="icon-na"></td>
<td><img class="icon-flag"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
<td><img class="icon-na"></td>
</tr>
</table>

</div>
</div>

Expand Down

0 comments on commit 9303c6c

Please sign in to comment.