Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 ff45f00b 编写于 作者: Y Yuin Chien
浏览文件
操作

simplified panel.

上级 9d45a1ff
隐藏空白更改
内联 并排
Showing with 66 addition and 55 deletion
docs/index.html
浏览文件 @ ff45f00b
......@@ -10,24 +10,23 @@
<script src="../build/three.min.js" async defer></script>
</head>
<body>
<!-- <img src="../files/screenshot2.png" width="1280" style="opacity:.5;position:fixed;z-index:100000;pointer-events:none;"/> -->
<div id="panel" class="collapsed">
<div id="header">
<h1><a href="http://threejs.org">three.js</a></h1>
<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
<div id="sections">
<span class="selected">docs</span> <a href="../examples/">examples</a>
<span class="selected">docs</span>
<a href="../examples/">examples</a>
</div>
<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
</div>
<div id="panelScrim"></div>
<div id="contentWrapper">
<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
<select id="language">
<option value="en">en</option>
......
docs/page.css
浏览文件 @ ff45f00b
......@@ -3,7 +3,7 @@
--text-color: #444;
--border-style: 1px solid #EEE;
--header-height: 80px;
--header-height: 56px;
}
@font-face {
......
examples/index.html
浏览文件 @ ff45f00b
......@@ -31,23 +31,31 @@
</head>
<body>
<div id="panel">
<div id="panel" class="collapsed">
<div id="header">
<h1><a href="http://threejs.org">three.js</a></h1>
<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
<div id="sections">
<a href="../docs/">docs</a> <span class="selected">examples</span>
<a href="../docs/">docs</a>
<span class="selected">examples</span>
</div>
<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
</div>
<div id="content"></div>
<div id="panelScrim"></div>
<div id="contentWrapper">
<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
<select id="language">
<option value="en">en</option>
<option value="zh">zh</option>
</select>
<div id="content"></div>
</div>
</div>
......@@ -77,6 +85,14 @@
panel.classList.toggle( 'collapsed' );
} );
var panelScrim = document.getElementById( 'panelScrim' );
panelScrim.onclick = function ( event ) {
event.preventDefault();
panel.classList.toggle( 'collapsed' );
};
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
......
files/main.css
浏览文件 @ ff45f00b
......@@ -3,7 +3,7 @@
--text-color: #444;
--border-style: 1px solid #EEE;
--header-height: 80px;
--header-height: 48px;
}
@font-face {
......@@ -38,31 +38,17 @@ a {
}
h1 {
margin-top: 0px; /* reset */
margin-left: 15px;
margin-bottom: 0px;
padding-top: 12px;
font-size: 18px;
font-weight: 500;
}
h1 a {
color: var(--color-blue);
}
h2 {
padding: 8px 0;
margin: 6px 0 12px 0;
position: sticky;
top: 0;
background: white;
font-size: 14px;
font-weight: normal;
color: var(--color-blue);
border-bottom: var(--border-style);
}
h3 {
......@@ -76,6 +62,21 @@ h3 {
color: #9E9E9E;
}
h1 a {
color: var(--color-blue);
}
#header {
display: flex;
height: 48px;
border-bottom: var(--border-style);
align-items: center;
}
#header h1 {
margin-left: 15px;
flex: 1;
}
#panel {
position: fixed;
left: 0px;
......@@ -87,40 +88,40 @@ h3 {
display: flex;
flex-direction: column;
transition: 0s 0s height;
}
#panel #expandButton {
position: absolute;
right: 14px;
top: 14px;
z-index: 1000;
margin-right: 14px;
margin-left: 4px;
display: none;
}
#panel #sections {
font-weight: 500;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
position: relative;
height: 100%;
align-items: center;
}
#panel #sections:after {
position: absolute;
bottom: 0px;
content: "";
left: 0;
right: 0;
border-bottom: var(--border-style);
z-index: -1;
}
#panel #sections * {
padding: 0 16px;
height: 100%;
line-height: 44px;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#panel #sections .selected {
#panel #sections .selected:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
border-bottom: 1px solid black;
}
#panel #sections a {
......@@ -146,7 +147,7 @@ h3 {
#panel #language {
font-family: 'Roboto Mono', monospace;
position: absolute;
top: 8px;
top: 7px;
right: 8px;
border: 0px;
font-size: 14px;
......@@ -195,11 +196,6 @@ h3 {
color: var(--color-blue);
}
#panel #content .selected {
text-decoration: line-through;
}
#panel #content .hidden {
display: none !important;
}
......@@ -247,7 +243,7 @@ iframe {
}
#panel.collapsed #panelScrim {
opacity: 0;
pointer-events: auto;
pointer-events: none;
}
#panel #expandButton {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或