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

Commit fd368d2

Browse files
mlynchmlynch
committed
Style
1 parent 4e93f60 commit fd368d2

File tree

3 files changed

+85
-16
lines changed

3 files changed

+85
-16
lines changed

‎lab/index.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta charset="utf-8">
66
<link rel="icon" type="image/png" href="/ionic-lab/static/img/favicon.png" />
77
<link rel="stylesheet" href="/ionic-lab/static/css/style.css" />
8+
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
89
</head>
910
<body>
1011
<div id="app">
@@ -15,6 +16,7 @@
1516
</div>
1617

1718
<div id="header-right">
19+
<a href="/" target="_blank" id="open-fullscreen">Open fullscreen <i class="icon ion-share"></i></a>
1820
<div class="dropdown">
1921
<button class="dropdown-toggle" type="button">Platforms <span class="dropdown-caret"></span></button>
2022
<ul class="dropdown-menu">
@@ -25,8 +27,18 @@
2527
</div>
2628
</div>
2729
</div>
28-
<preview>
29-
</preview>
30+
<div id="main">
31+
<div id="sidebar">
32+
<ul id="menu">
33+
<li><a href="https://ionicframework.com/docs/components">Components</a></li>
34+
<li><a href="https://ionicframework.com/docs/api">API Reference</a></li>
35+
<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>
37+
</ul>
38+
</div>
39+
<preview>
40+
</preview>
41+
</div>
3042
<div id="footer">
3143
<div id="footer-left">
3244
<span id="app-info"></span>
@@ -87,6 +99,7 @@ <h2><div class="phone-icon"></div> <a href="/?ionicplatform=windows" target="_bl
8799
</div>
88100
</div>
89101
</template>
102+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
90103
<script src="/ionic-lab/static/js/lab.js"></script>
91104
<script>
92105
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

‎lab/static/css/style.css‎

Lines changed: 57 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ html, body {
1111
}
1212

1313
body {
14-
background-color: #f8f9fb;
14+
background-color: #242A31;
1515
font-family: 'AvenirNextLTPro-Regular', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
1616
padding: 0;
1717
margin: 0;
@@ -102,9 +102,28 @@ h2 a {
102102
#header {
103103
width: 100%;
104104
height: 50px;
105-
background-color: white;
105+
background-color: #151A21;
106106
box-shadow: 0px 1px 3px rgba(0,0,0, 0.15);
107107
}
108+
#header a {
109+
color: #858D9B;
110+
font-family: 'AvenirNextLTPro-Medium', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
111+
font-size: 13px;
112+
text-decoration: none;
113+
display: inline-block;
114+
font-weight: bold;
115+
}
116+
#header .icon {
117+
display: inline-block;
118+
font-size: 22px;
119+
vertical-align: middle;
120+
margin-bottom: 3px;
121+
margin-left: 3px;
122+
}
123+
#header .dropdown {
124+
display: inline-block;
125+
}
126+
108127
#header-left {
109128
float: left;
110129
line-height: 50px;
@@ -120,7 +139,7 @@ h2 a {
120139
#footer {
121140
width: 100%;
122141
border-top: 1px solid rgba(0,0,0,0.06);
123-
background-color: #f8f9fb;
142+
background-color: #151A21;
124143
}
125144
#footer-left {
126145
float: left;
@@ -156,9 +175,23 @@ h2 a {
156175
#logo img {
157176
max-width: 100%;
158177
}
178+
179+
preview {
180+
flex: 1;
181+
width: 100%;
182+
display: flex;
183+
vertical-align: middle;
184+
overflow: auto;
185+
text-align: center;
186+
justify-content: center;
187+
align-items: center;
188+
flex-wrap: wrap;
189+
flex-direction: row;
190+
}
191+
159192
.phone {
160193
display: inline-block;
161-
margin: 20px 20px 0 20px;
194+
margin: -80px 20px 0 20px;
162195
vertical-align: middle;
163196
}
164197
.phone h2 {
@@ -279,19 +312,29 @@ h2 a {
279312
position: absolute;
280313
}
281314

282-
preview {
283-
flex: 1;
284-
width: 100%;
285-
display: block;
286-
vertical-align: middle;
287-
overflow: auto;
288-
text-align: center;
289-
justify-content: center;
290-
align-items: center;
291-
flex-wrap: wrap;
315+
#main {
316+
display: flex;
292317
flex-direction: row;
318+
flex: 1;
319+
}
320+
321+
#sidebar {
322+
width: 300px;
323+
background-color: #141A21;
293324
}
294325

326+
#menu {
327+
padding: 0;
328+
margin: 0;
329+
}
330+
#menu li {
331+
list-style: none;
332+
margin: 15px;
333+
}
334+
#menu li a {
335+
color: #a2a9b4;
336+
text-decoration: none;
337+
}
295338

296339
@media screen and (max-height: 800px) {
297340
#header {

‎lab/static/js/lab.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1+
2+
13
var $ = document.querySelector.bind(document);
24

35
var API_ROOT = '/ionic-lab/api/v1';
46

7+
function loadSearchIndex() {
8+
var index = 'http://ionicframework.com/docs/data/index.json';
9+
fetch(index, {
10+
}).then((r) => {
11+
return r.json();
12+
}).then(json => {
13+
console.log('Loaded search index', json);
14+
})
15+
}
16+
517
function tryShowViewPopup() {
618
var view = window.localStorage.getItem('ionic_viewpop');
719

@@ -106,6 +118,7 @@ function loadCordova() {
106118
req.send(null);
107119
}
108120

121+
loadSearchIndex();
109122
showLastDevices();
110123
loadCordova();
111124
bindToggles();

0 commit comments

Comments
 (0)