首頁 探索 說明
登入
javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

simplified panel.

Yuin Chien 6 年之前
父節點
9d45a1ff37
當前提交
ff45f00bc4
共有 4 個文件被更改，包括 66 次插入 和 55 次删除
統一視圖 顯示文件統計
  1. 5 6
      docs/index.html
  2. 1 1
      docs/page.css
  3. 24 8
      examples/index.html
  4. 36 40
      files/main.css

+ 5 - 6
docs/index.html
查看文件 

@@ -10,24 +10,23 @@
 
 		<script src="../build/three.min.js" async defer></script>
 
 		<script src="../build/three.min.js" async defer></script>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<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="panel" class="collapsed">
 
 
 
 			<div id="header">
 
 			<div id="header">
 
-
 
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
 
 
-				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
-
 
 				<div id="sections">
 
 				<div id="sections">
 
-					<span class="selected">docs</span> <a href="../examples/">examples</a>
 
+					<span class="selected">docs</span>
 
+					<a href="../examples/">examples</a>
 
 				</div>
 
 				</div>
 
+
 
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
 			</div>
 
 			</div>
 
 
 
 			<div id="panelScrim"></div>
 
 			<div id="panelScrim"></div>
 
 
 
 			<div id="contentWrapper">
 
 			<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">
 
 				<select id="language">
 
 					<option value="en">en</option>
 
 					<option value="en">en</option>

+ 1 - 1
docs/page.css
查看文件 

@@ -3,7 +3,7 @@
 
 
 
 	--text-color: #444;
 
 	--text-color: #444;
 
 	--border-style: 1px solid #EEE;
 
 	--border-style: 1px solid #EEE;
 
-	--header-height: 80px;
 
+	--header-height: 56px;
 
 }
 
 }
 
 
 
 @font-face {
 
 @font-face {

+ 24 - 8
examples/index.html
查看文件 

@@ -31,23 +31,31 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="panel">
 
+		<div id="panel" class="collapsed">
 
 
 
 			<div id="header">
 
 			<div id="header">
 
-
 
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
 
 
-				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
-
 
 				<div id="sections">
 
 				<div id="sections">
 
-					<a href="../docs/">docs</a> <span class="selected">examples</span>
 
+					<a href="../docs/">docs</a>
 
+					<span class="selected">examples</span>
 
 				</div>
 
 				</div>
 
 
 
-				<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
 
-
 
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
 			</div>
 
 			</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>
 
 		</div>
 
 
 
@@ -77,6 +85,14 @@
 
 			panel.classList.toggle( 'collapsed' );
 
 			panel.classList.toggle( 'collapsed' );
 
 		} );
 
 		} );
 
 
 
+		var panelScrim = document.getElementById( 'panelScrim' );
 
+		panelScrim.onclick = function ( event ) {
 
+
 
+			event.preventDefault();
 
+			panel.classList.toggle( 'collapsed' );
 
+
 
+		};
 
+
 
 		// iOS iframe auto-resize workaround
 
 		// iOS iframe auto-resize workaround
 
 
 
 		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
 
 		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

+ 36 - 40
files/main.css
查看文件 

@@ -3,7 +3,7 @@
 
 
 
 	--text-color: #444;
 
 	--text-color: #444;
 
 	--border-style: 1px solid #EEE;
 
 	--border-style: 1px solid #EEE;
 
-	--header-height: 80px;
 
+	--header-height: 48px;
 
 }
 
 }
 
 
 
 @font-face {
 
 @font-face {
 
@@ -38,31 +38,17 @@ a {
 
 }
 
 }
 
 
 
 h1 {
 
 h1 {
 
-	margin-top: 0px; /* reset */
 
-	margin-left: 15px;
 
-	margin-bottom: 0px;
 
-	padding-top: 12px;
 
-
 
 	font-size: 18px;
 
 	font-size: 18px;
 
 	font-weight: 500;
 
 	font-weight: 500;
 
 }
 
 }
 
 
 
-h1 a {
 
-	color: var(--color-blue);
 
-}
 
-
 
 h2 {
 
 h2 {
 
 	padding: 8px 0;
 
 	padding: 8px 0;
 
 	margin: 6px 0 12px 0;
 
 	margin: 6px 0 12px 0;
 
-	position: sticky;
 
-	top: 0;
 
-	background: white;
 
-
 
 	font-size: 14px;
 
 	font-size: 14px;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
 
 
 	color: var(--color-blue);
 
 	color: var(--color-blue);
 
-  border-bottom: var(--border-style);
 
 }
 
 }
 
 
 
 h3 {
 
 h3 {
 
@@ -76,6 +62,21 @@ h3 {
 
 	color: #9E9E9E;
 
 	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 {
 
 #panel {
 
 	position: fixed;
 
 	position: fixed;
 
 	left: 0px;
 
 	left: 0px;
 
@@ -87,40 +88,40 @@ h3 {
 
 
 
 	display: flex;
 
 	display: flex;
 
 	flex-direction: column;
 
 	flex-direction: column;
 
+
 
+	transition: 0s 0s height;
 
 }
 
 }
 
 
 
 	#panel #expandButton {
 
 	#panel #expandButton {
 
-		position: absolute;
 
-		right: 14px;
 
-		top: 14px;
 
-		z-index: 1000;
 
+		margin-right: 14px;
 
+		margin-left: 4px;
 
 		display: none;
 
 		display: none;
 
 	}
 
 	}
 
 
 
 	#panel #sections {
 
 	#panel #sections {
 
 		font-weight: 500;
 
 		font-weight: 500;
 
-		height: 44px;
 
 		display: flex;
 
 		display: flex;
 
-		align-items: center;
 
+		justify-content: center;
 
 		z-index: 1000;
 
 		z-index: 1000;
 
 		position: relative;
 
 		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 * {
 
 		#panel #sections * {
 
 			padding: 0 16px;
 
 			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;
 
 			border-bottom: 1px solid black;
 
 		}
 
 		}
 
 		#panel #sections a {
 
 		#panel #sections a {
 
@@ -146,7 +147,7 @@ h3 {
 
 	#panel #language {
 
 	#panel #language {
 
     font-family: 'Roboto Mono', monospace;
 
     font-family: 'Roboto Mono', monospace;
 
 		position: absolute;
 
 		position: absolute;
 
-    top: 8px;
 
+    top: 7px;
 
     right: 8px;
 
     right: 8px;
 
     border: 0px;
 
     border: 0px;
 
     font-size: 14px;
 
     font-size: 14px;
 
@@ -195,11 +196,6 @@ h3 {
 
 			color: var(--color-blue);
 
 			color: var(--color-blue);
 
 		}
 
 		}
 
 
 
-		#panel #content .selected {
 
-	    text-decoration: line-through;
 
-		}
 
-
 
-
 
 		#panel #content .hidden {
 
 		#panel #content .hidden {
 
 			display: none !important;
 
 			display: none !important;
 
 		}
 
 		}
 
@@ -247,7 +243,7 @@ iframe {
 
 	}
 
 	}
 
 	#panel.collapsed #panelScrim {
 
 	#panel.collapsed #panelScrim {
 
 		opacity: 0;
 
 		opacity: 0;
 
-		pointer-events: auto;
 
+		pointer-events: none;
 
 	}
 
 	}
 
 
 
 	#panel #expandButton {
 
 	#panel #expandButton {