Skip to content

Commit cf04c59

Browse files
mrdoobmrdoob
committed
Examples: Mobile friendly.
1 parent 059fa94 commit cf04c59

File tree

2 files changed

+182
-80
lines changed

2 files changed

+182
-80
lines changed

‎docs/index.html‎

Lines changed: 61 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,28 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>three.js - documentation</title>
5+
<title>three.js / documentation</title>
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>
8+
89
@font-face {
910
font-family: 'inconsolata';
1011
src: url('files/inconsolata.woff') format('woff');
1112
font-weight: normal;
1213
font-style: normal;
1314
}
1415

15-
*{ box-sizing: border-box;}
16+
*{
17+
box-sizing: border-box;
18+
}
1619

1720
html {
1821
height: 100%;
1922
}
2023

2124
body {
2225
background-color: #ffffff;
23-
margin: 0;
24-
padding: 0 0 0 260px;
26+
margin: 0px;
2527
height: 100%;
2628
color: #555;
2729
font-family: 'inconsolata';
@@ -35,7 +37,7 @@
3537
text-decoration: none;
3638
}
3739

38-
#panel {
40+
#panel {
3941
position: fixed;
4042
left: 0px;
4143
width: 260px;
@@ -77,8 +79,10 @@
7779
}
7880

7981
#viewer {
82+
position: absolute;
8083
border: 0px;
81-
width: 100%;
84+
left: 260px;
85+
width: calc(100% - 260px);
8286
height: 100%;
8387
overflow: auto;
8488
}
@@ -90,6 +94,7 @@
9094
.filterBlock p {
9195
margin: 0;
9296
}
97+
9398
#filterInput {
9499
width: 100%;
95100
padding: 5px;
@@ -98,11 +103,13 @@
98103
outline: none;
99104
border: 1px solid #dedede;
100105
}
106+
101107
#filterInput:focus{
102108
border: 1px solid #2194CE;
103109
}
110+
104111
#clearFilterButton {
105-
position: absolute;
112+
position: absolute;
106113
right: 6px;
107114
top: 50%;
108115
margin-top: -8px;
@@ -115,39 +122,47 @@
115122
padding-top: 7px;
116123
opacity: .5;
117124
}
118-
#clearFilterButton:hover{
125+
126+
#clearFilterButton:hover {
119127
opacity: 1;
120128
}
121-
.filtered{
129+
130+
.filtered {
122131
display: none;
123132
}
124-
#panel li b{
133+
134+
#panel li b {
125135
font-weight: bold;
126136
}
127-
#expandButton{
137+
138+
/* mobile */
139+
140+
#expandButton {
128141
display: none;
129142
position: absolute;
130143
right: 20px;
131144
top: 12px;
132145
width: 32px;
133146
height: 32px;
134-
background-color: #2194CE;
135-
}
136-
#expandButton span{
137-
height: 3px;
138-
background-color: white;
139-
width: 16px;
140-
position: absolute;
141-
left: 8px;
142-
top: 8px;
143-
}
144-
#expandButton span:nth-child(1) {
145-
top: 14px;
146-
}
147-
#expandButton span:nth-child(2) {
148-
top: 20px;
149-
width: 12px;
150147
}
148+
149+
#expandButton span {
150+
height: 2px;
151+
background-color: #2194CE;
152+
width: 16px;
153+
position: absolute;
154+
left: 8px;
155+
top: 10px;
156+
}
157+
158+
#expandButton span:nth-child(1) {
159+
top: 16px;
160+
}
161+
162+
#expandButton span:nth-child(2) {
163+
top: 22px;
164+
}
165+
151166
@media all and ( max-width: 640px ) {
152167
#panel{
153168
position: absolute;
@@ -160,32 +175,31 @@
160175
overflow: hidden;
161176
border-bottom: 1px solid #dedede;
162177
}
178+
#panel h1{
179+
margin-top: 20px;
180+
margin-bottom: 20px;
181+
}
163182
#content{
164183
overflow: auto;
165184
position: absolute;
166185
left: 0;
167-
top: 120px;
186+
top: 90px;
168187
right: 0;
169188
bottom: 0;
170189
}
171190
#viewer{
172191
position: absolute;
173192
left: 0;
174-
top: 48px;
193+
top: 56px;
194+
width: 100%;
195+
height: calc(100% - 56px);
175196
}
176197
#expandButton{
177198
display: block;
178199
}
179200
#panel.collapsed{
180201
height: 56px;
181202
}
182-
#panel h1{
183-
margin-top: 20px;
184-
margin-bottom: 20px;
185-
}
186-
#content{
187-
top: 90px;
188-
}
189203
}
190204
</style>
191205
</head>
@@ -205,16 +219,17 @@
205219
</script>
206220

207221
<div id="panel" class="collapsed">
222+
<h1><a href="http://threejs.org">three.js</a> / docs</h1>
208223
<a id="expandButton" href="#" >
209-
<span></span><span></span><span></span>
224+
<span></span>
225+
<span></span>
226+
<span></span>
210227
</a>
211-
<h1><a href="http://threejs.org">three.js</a> / docs</h1>
212228
<div class="filterBlock" >
213229
<input type="text" id="filterInput" placeholder="Type to filter"/>
214230
<a href="#" id="clearFilterButton" >x</a>
215231
</div>
216-
<div id="content" >
217-
</div>
232+
<div id="content"></div>
218233
</div>
219234
<iframe id="viewer"></iframe>
220235

@@ -223,23 +238,15 @@ <h1><a href="http://threejs.org">three.js</a> / docs</h1>
223238
var panel = document.getElementById( 'panel' );
224239
var viewer = document.getElementById( 'viewer' );
225240

226-
var clearFilterButton = document.getElementById( 'clearFilterButton' );
227-
var filterInput = document.getElementById( 'filterInput' );
228-
//filterInput.focus();
229-
230-
panel.addEventListener( 'click', function( e ) {
231-
//filterInput.focus();
232-
e.preventDefault();
233-
} );
234-
235-
document.getElementById( 'expandButton' ).addEventListener( 'click', function( e ) {
241+
var expandButton = document.getElementById( 'expandButton' );
242+
expandButton.addEventListener( 'click', function ( event ) {
236243
panel.classList.toggle( 'collapsed' );
237-
if( !panel.classList.contains( 'collapsed' ) ) {
238-
//filterInput.focus();
239-
}
240-
e.preventDefault();
244+
event.preventDefault();
241245
} );
242246

247+
var filterInput = document.getElementById( 'filterInput' );
248+
var clearFilterButton = document.getElementById( 'clearFilterButton' );
249+
243250
var DELIMITER = '/';
244251
var MEMBER_DELIMITER = '.';
245252
var nameCategoryMap = {};

0 commit comments

Comments
 (0)