Skip to content
This repository was archived by the owner on May 1, 2020. It is now read-only.

Commit 3dd5286

Browse files
mlynchmlynch
committed
More more more
1 parent fd368d2 commit 3dd5286

File tree

4 files changed

+146
-7
lines changed

4 files changed

+146
-7
lines changed

‎lab/index.html‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
<div id="app">
1212
<div id="header">
1313
<div id="header-left">
14+
<a href="#" id="menu-toggle">
15+
<i class="icon ion-navicon-round"></i>
16+
</a>
1417
<a target="_blank" href="http://ionicframework.com/" id="logo">
1518
</a>
1619
</div>
@@ -29,12 +32,29 @@
2932
</div>
3033
<div id="main">
3134
<div id="sidebar">
35+
<div class="title">Quick reference</div>
36+
<div class="close"><i class="icon ion-close-circled"></i></div>
3237
<ul id="menu">
33-
<li><a href="https://ionicframework.com/docs/components">Components</a></li>
38+
<li><a>Components</a>
39+
<ul id="components-menu">
40+
<li><a data-href="#overview">Overview</a></li>
41+
<li><a data-href="#action-sheets">Action Sheets</a></li>
42+
<li><a data-href="#alert">Alerts</a></li>
43+
</ul>
44+
</li>
3445
<li><a href="https://ionicframework.com/docs/api">API Reference</a></li>
3546
<li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
36-
<li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
47+
<li><a href="https://ionicframework.com/docs/">All Documentation</a></li>
3748
</ul>
49+
<div id="view-ad" class="ad">
50+
<img class="logo" src="/ionic-lab/static/img/view-logo.jpg" style="height: 64px"/>
51+
<div class="ad-content">
52+
Test and share your app live on iOS and Android
53+
with the Ionic View app!
54+
<br>
55+
<a href="http://view.ionic.io">Download View</a>
56+
</div>
57+
</div>
3858
</div>
3959
<preview>
4060
</preview>

‎lab/static/css/style.css‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ h2 a {
5959
}
6060
.dropdown:hover .dropdown-toggle {
6161
/* increase the hit box when hovering */
62-
padding-left: 100px;
62+
/*padding-left: 100px;*/
6363
}
6464
.dropdown:hover .dropdown-menu {
6565
display: block;
@@ -128,6 +128,9 @@ h2 a {
128128
float: left;
129129
line-height: 50px;
130130
}
131+
#header-left #menu-toggle {
132+
margin-left: 13px;
133+
}
131134
#header a:hover {
132135
opacity: 1;
133136
}
@@ -319,21 +322,85 @@ preview {
319322
}
320323

321324
#sidebar {
322-
width: 300px;
325+
position: relative;
326+
z-index: 1;
323327
background-color: #141A21;
328+
height: 100%;
329+
width: 300px;
330+
box-sizing: border-box;
331+
padding: 15px;
332+
overflow: auto;
333+
}
334+
335+
#sidebar.hidden {
336+
display: none;
337+
}
338+
#sidebar .close {
339+
cursor: pointer;
340+
position: absolute;
341+
top: 15px;
342+
right: 15px;
343+
color: #a2a9b4;
344+
font-size: 24px;
345+
}
346+
#sidebar .title {
347+
font-size: 20px;
348+
margin-top: 5px;
349+
color: white;
324350
}
325351

326352
#menu {
327353
padding: 0;
328354
margin: 0;
355+
-webkit-touch-callout: none; /* iOS Safari */
356+
-webkit-user-select: none; /* Safari */
357+
-khtml-user-select: none; /* Konqueror HTML */
358+
-moz-user-select: none; /* Firefox */
359+
-ms-user-select: none; /* Internet Explorer/Edge */
360+
user-select: none; /* Non-prefixed version, currently
361+
supported by Chrome and Opera */
329362
}
330363
#menu li {
331364
list-style: none;
332-
margin: 15px;
365+
margin: 15px 0;
333366
}
334367
#menu li a {
335368
color: #a2a9b4;
336369
text-decoration: none;
370+
cursor: pointer;
371+
}
372+
#menu > li > ul {
373+
display: none;
374+
padding: 0;
375+
margin: 0;
376+
}
377+
#menu > li > ul li {
378+
padding-left: 15px;
379+
}
380+
#menu > li.expanded > ul {
381+
display: block;
382+
}
383+
384+
.ad {
385+
background-color: #232A31;
386+
cursor: pointer;
387+
border-radius: 2px;
388+
border: 1px solid #3f4650;
389+
font-size: 13px;
390+
color: white;
391+
padding: 10px;
392+
display: flex;
393+
margin-top: 55px;
394+
}
395+
.ad .logo {
396+
display: block;
397+
margin-right: 15px;
398+
}
399+
.ad .content {
400+
flex: 1;
401+
}
402+
.ad a {
403+
color: #308EFD;
337404
}
338405

339406
@media screen and (max-height: 800px) {

‎lab/static/img/view-logo.jpg‎

4.76 KB
Loading

‎lab/static/js/lab.js‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,57 @@ function loadSearchIndex() {
1414
})
1515
}
1616

17+
function buildMenu() {
18+
buildComponentsMenu();
19+
const sidebar = $('#sidebar');
20+
const topLevels = sidebar.querySelectorAll('#menu > li > a');
21+
Array.prototype.map.call(topLevels, a => {
22+
if(!a.href) {
23+
a.addEventListener('click', e => {
24+
if(a.parentNode.classList.contains('expanded')) {
25+
a.parentNode.classList.remove('expanded');
26+
} else {
27+
a.parentNode.classList.add('expanded');
28+
}
29+
e.preventDefault();
30+
});
31+
}
32+
})
33+
34+
$('#view-ad').addEventListener('click', (e) => {
35+
var win = window.open('http://view.ionic.io/', '_blank');
36+
win.focus();
37+
})
38+
39+
const s = $('#sidebar');
40+
41+
const toggleMenu = e => {
42+
if(s.classList.contains('hidden')) {
43+
s.classList.remove('hidden');
44+
} else {
45+
s.classList.add('hidden');
46+
}
47+
}
48+
49+
$('#menu-toggle').addEventListener('click', toggleMenu);
50+
$('#sidebar .close').addEventListener('click', toggleMenu);
51+
}
52+
53+
function buildComponentsMenu() {
54+
var items = [{"href":"http://ionicframework.com/docs/components/#overview","title":"Overview"},{"href":"http://ionicframework.com/docs/components/#action-sheets","title":"Action Sheets"},{"href":"http://ionicframework.com/docs/components/#alert","title":"Alerts"},{"href":"http://ionicframework.com/docs/components/#badges","title":"Badges"},{"href":"http://ionicframework.com/docs/components/#buttons","title":"Buttons"},{"href":"http://ionicframework.com/docs/components/#cards","title":"Cards"},{"href":"http://ionicframework.com/docs/components/#checkbox","title":"Checkbox"},{"href":"http://ionicframework.com/docs/components/#datetime","title":"DateTime"},{"href":"http://ionicframework.com/docs/components/#fabs","title":"FABs"},{"href":"http://ionicframework.com/docs/components/#gestures","title":"Gestures"},{"href":"http://ionicframework.com/docs/components/#grid","title":"Grid"},{"href":"http://ionicframework.com/docs/components/#icons","title":"Icons"},{"href":"http://ionicframework.com/docs/components/#inputs","title":"Inputs"},{"href":"http://ionicframework.com/docs/components/#lists","title":"Lists"},{"href":"http://ionicframework.com/docs/components/#loading","title":"Loading"},{"href":"http://ionicframework.com/docs/components/#menus","title":"Menus"},{"href":"http://ionicframework.com/docs/components/#modals","title":"Modals"},{"href":"http://ionicframework.com/docs/components/#navigation","title":"Navigation"},{"href":"http://ionicframework.com/docs/components/#popovers","title":"Popover"},{"href":"http://ionicframework.com/docs/components/#radio","title":"Radio"},{"href":"http://ionicframework.com/docs/components/#range","title":"Range"},{"href":"http://ionicframework.com/docs/components/#searchbar","title":"Searchbar"},{"href":"http://ionicframework.com/docs/components/#segment","title":"Segment"},{"href":"http://ionicframework.com/docs/components/#select","title":"Select"},{"href":"http://ionicframework.com/docs/components/#slides","title":"Slides"},{"href":"http://ionicframework.com/docs/components/#tabs","title":"Tabs"},{"href":"http://ionicframework.com/docs/components/#toast","title":"Toast"},{"href":"http://ionicframework.com/docs/components/#toggle","title":"Toggle"},{"href":"http://ionicframework.com/docs/components/#toolbar","title":"Toolbar"}];
55+
56+
const componentsMenu = $('#components-menu');
57+
items.map(i => {
58+
const l = document.createElement('li')
59+
const a = document.createElement('a')
60+
a.href = i.href
61+
a.target = "_blank";
62+
a.innerText = i.title
63+
l.appendChild(a)
64+
componentsMenu.appendChild(l)
65+
})
66+
}
67+
1768
function tryShowViewPopup() {
1869
var view = window.localStorage.getItem('ionic_viewpop');
1970

@@ -118,8 +169,9 @@ function loadCordova() {
118169
req.send(null);
119170
}
120171

121-
loadSearchIndex();
172+
//loadSearchIndex();
173+
buildMenu();
122174
showLastDevices();
123175
loadCordova();
124176
bindToggles();
125-
tryShowViewPopup();
177+
//tryShowViewPopup();

0 commit comments

Comments
 (0)