Skip to content

Commit 3562630

Browse files
tobiasahlintobiasahlin
committed
Cleanup sidebar menu
1 parent af1b752 commit 3562630

3 files changed

Lines changed: 43 additions & 111 deletions

File tree

‎layouts/default.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<div class="js-toggle-list sidebar-module expandable">
4444
<ul>
4545
<li class="js-topic">
46-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/">Overview</a></h3>
46+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn" arrow-btn></a><a href="/v3/">Overview</a></h3>
4747
<ul class="js-guides">
4848
<li><a href="/v3/libraries/">Libraries</a></li>
4949
<li><a href="/v3/media/">Media Types</a></li>
@@ -53,7 +53,7 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/">Overvie
5353
</ul>
5454
</li>
5555
<li class="js-topic">
56-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/guides/">Guides</a></h3>
56+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/guides/">Guides</a></h3>
5757
<ul class="js-guides">
5858
<li><a href="/guides/getting-started/">Getting Started</a></li>
5959
<li><a href="/guides/basics-of-authentication/">Basics of Authentication</a></li>
@@ -62,7 +62,7 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/guides/">Gui
6262
</ul>
6363
</li>
6464
<li class="js-topic">
65-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/activity/">Activity</a></h3>
65+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/activity/">Activity</a></h3>
6666
<ul class="js-guides">
6767
<li><a href="/v3/activity/events/">Events</a></li>
6868
<li><a href="/v3/activity/events/types/">Event Types</a></li>
@@ -73,13 +73,13 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/activity/
7373
</ul>
7474
</li>
7575
<li class="js-topic">
76-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/gists/">Gists</a></h3>
76+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/gists/">Gists</a></h3>
7777
<ul class="js-guides">
7878
<li><a href="/v3/gists/comments/">Comments</a></li>
7979
</ul>
8080
</li>
8181
<li class="js-topic">
82-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/git/">Git Data</a></h3>
82+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/git/">Git Data</a></h3>
8383
<ul class="js-guides">
8484
<li><a href="/v3/git/blobs/">Blobs</a></li>
8585
<li><a href="/v3/git/commits/">Commits</a></li>
@@ -89,7 +89,7 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/git/">Git
8989
</ul>
9090
</li>
9191
<li class="js-topic">
92-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/issues/">Issues</a></h3>
92+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/issues/">Issues</a></h3>
9393
<ul class="js-guides">
9494
<li><a href="/v3/issues/assignees/">Assignees</a></li>
9595
<li><a href="/v3/issues/comments/">Comments</a></li>
@@ -99,7 +99,7 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/issues/">
9999
</ul>
100100
</li>
101101
<li class="js-topic">
102-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/misc/">Miscellaneous</a></h3>
102+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/misc/">Miscellaneous</a></h3>
103103
<ul class="js-guides">
104104
<li><a href="/v3/emojis/">Emojis</a></li>
105105
<li><a href="/v3/gitignore/">Gitignore</a></li>
@@ -109,20 +109,20 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/misc/">Mi
109109
</ul>
110110
</li>
111111
<li class="js-topic">
112-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/orgs/">Orgs</a></h3>
112+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/orgs/">Orgs</a></h3>
113113
<ul class="js-guides">
114114
<li><a href="/v3/orgs/members/">Members</a></li>
115115
<li><a href="/v3/orgs/teams/">Teams</a></li>
116116
</ul>
117117
</li>
118118
<li class="js-topic">
119-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/pulls/">Pull Requests</a></h3>
119+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/pulls/">Pull Requests</a></h3>
120120
<ul class="js-guides">
121121
<li><a href="/v3/pulls/comments/">Review Comments</a></li>
122122
</ul>
123123
</li>
124124
<li class="js-topic">
125-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/repos/">Repositories</a></h3>
125+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/repos/">Repositories</a></h3>
126126
<ul class="js-guides">
127127
<li><a href="/v3/repos/collaborators/">Collaborators</a></li>
128128
<li><a href="/v3/repos/comments/">Comments</a></li>
@@ -139,7 +139,7 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/repos/">R
139139
</ul>
140140
</li>
141141
<li class="js-topic">
142-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/search/">Search</a></h3>
142+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/search/">Search</a></h3>
143143
<ul class="js-guides">
144144
<li><a href="/v3/search/#search-repositories">Repositories</a></li>
145145
<li><a href="/v3/search/#search-code">Code</a></li>
@@ -149,7 +149,7 @@ <h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/search/">
149149
</ul>
150150
</li>
151151
<li class="js-topic">
152-
<h3><a href="#" class="js-expand-btn collapsed">&nbsp;</a><a href="/v3/users/">Users</a></h3>
152+
<h3><a href="#" class="js-expand-btn collapsed arrow-btn"></a><a href="/v3/users/">Users</a></h3>
153153
<ul class="js-guides">
154154
<li><a href="/v3/users/emails/">Emails</a></li>
155155
<li><a href="/v3/users/followers/">Followers</a></li>

‎static/shared/css/documentation.css‎

Lines changed: 31 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -226,15 +226,13 @@ a img {
226226
Sidebar
227227
------------------------------------------------------------------------------*/
228228

229-
div.sidebar-shell {
229+
.sidebar-shell {
230230
position: relative;
231231
float: right;
232232
margin: 35px 0 0;
233233
}
234234

235-
div.sidebar-module {
236-
padding: 3px;
237-
background: #EEE;
235+
.sidebar-module {
238236
-moz-border-radius: 3px;
239237
-webkit-border-radius: 3px;
240238
border-radius: 3px;
@@ -244,14 +242,11 @@ div.sidebar-module {
244242
font-size: 12px;
245243
}
246244

247-
div.sidebar-module > ul {
248-
background: #fafafb;
249-
border: solid #CACACA;
250-
border-width: 1px 1px 0px 1px;
245+
.sidebar-module ul {
251246
margin: 0px;
252247
}
253248

254-
div.sidebar-module > p {
249+
.sidebar-module > p {
255250
background: #fafafb;
256251
border: solid #CACACA;
257252
border-width: 1px;
@@ -261,97 +256,61 @@ div.sidebar-module > p {
261256
line-height: 1.4em;
262257
}
263258

264-
div.sidebar-module li {
259+
.sidebar-module li {
265260
list-style-type: none;
266261
}
267262

268-
div.sidebar-module > ul > li {
269-
border-bottom: 1px solid #CACACA;
270-
text-decoration: none;
271-
}
272-
273-
div.sidebar-module > ul > li:hover {
274-
text-decoration: none;
275-
}
276-
277-
278-
div.sidebar-module > ul h3 {
263+
.sidebar-module ul h3 {
279264
margin: 0px;
280265
color: #666;
281-
text-shadow: 1px 1px 0px #fff;
282-
border-bottom: 1px solid #CACACA;
266+
border-bottom: 1px solid #eee;
283267
font-size: 14px;
284-
background-color: #e1e1e1;
285-
background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
286-
background-image: -ms-linear-gradient(top, #f1f1f1, #e1e1e1);
287-
background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1);
288-
background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
289-
background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
290-
background-image: linear-gradient(top, #f1f1f1, #e1e1e1);
291-
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e1e1e1');
292268
}
293269

294-
div.sidebar-module > ul li h3:hover,
295-
div.sidebar-module > ul h3.disable {
296-
background-color: #e1e1e1;
297-
background-image: -moz-linear-gradient(top, #e1e1e1, #d1d1d1);
298-
background-image: -ms-linear-gradient(top, #e1e1e1, #d1d1d1);
299-
background-image: -o-linear-gradient(top, #e1e1e1, #d1d1d1);
300-
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#d1d1d1));
301-
background-image: -webkit-linear-gradient(top, #e1e1e1, #d1d1d1);
302-
background-image: linear-gradient(top, #e1e1e1, #d1d1d1);
303-
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e1e1e1', EndColorStr='#d1d1d1');
304-
}
305-
306-
307-
div.sidebar-module > ul h3 a,
308-
div.sidebar-module > ul h3.disable span {
309-
padding: 8px 0px 8px 10px;
270+
div.sidebar-module h3 a,
271+
div.sidebar-module h3.disable span {
272+
padding-top: 8px;
273+
padding-bottom: 8px;
274+
padding-left: 10px;
310275
color: #666;
311276
display: block;
312277
text-decoration: none;
313278
}
314279

315-
div.sidebar-module > ul h3.disable span {
280+
div.sidebar-module h3.disable span {
316281
padding-left: 20px;
317282
background-image: url(../images/active-arrow.png);
318283
background-position: left center;
319284
background-repeat: no-repeat;
320285
cursor: default;
321286
}
322-
div.sidebar-module > ul h3:hover a {
287+
288+
.sidebar-module h3:hover a {
323289
text-decoration: none;
290+
color: #333;
324291
}
325292

326293
div.sidebar-module ul ul,
327294
div.sidebar-module .spacer {
328295
display: block;
329296
padding-bottom: 2px;
330-
background-color: #FAFAFB;
297+
/** TODO: Remove this entire module? **/
331298
}
332299

333300
div.sidebar-module ul ul li {
334-
border-top: 1px solid #fff;
335-
border-bottom: 1px solid #e9ecee;
301+
border-bottom: 1px solid #eee;
336302
font-weight: bold;
337303
color: #666;
338304
}
339305

340-
div.sidebar-module ul ul li:hover,
341-
div.sidebar-module li.disable {
342-
border-top: 1px solid #fafafb;
343-
border-bottom: 1px solid #e5e8ea;
344-
background-color: #f0f0f3;
345-
}
346-
347306
div.sidebar-module li.disable {
348307
background-image: url(../images/active-arrow.png);
349308
background-position: left center;
350309
background-repeat: no-repeat;
351310
}
352311

353-
div.sidebar-module ul ul li a,
354-
div.sidebar-module ul ul li span {
312+
.sidebar-module ul ul li a,
313+
.sidebar-module ul ul li span {
355314
padding: 6px 0px 6px 10px;
356315
display: block;
357316
text-decoration: none;
@@ -890,58 +849,31 @@ span.bash-output {
890849
/* Expandable List Module */
891850
/****************************/
892851

893-
div.expandable > ul h3 {
894-
display: table;
895-
width: 100%;
896-
}
897-
898-
div.expandable > ul h3 > a {
852+
div.expandable h3 a {
899853
display: table-cell;
900-
background-color: #e1e1e1;
901-
background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
902-
background-image: -ms-linear-gradient(top, #f1f1f1, #e1e1e1);
903-
background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1);
904-
background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
905-
background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
906-
background-image: linear-gradient(top, #f1f1f1, #e1e1e1);
907-
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e1e1e1');
908854
}
909855

910-
div.expandable > ul h3 > a:hover {
911-
background-color: #e1e1e1;
912-
background-image: -moz-linear-gradient(top, #e1e1e1, #d1d1d1);
913-
background-image: -ms-linear-gradient(top, #e1e1e1, #d1d1d1);
914-
background-image: -o-linear-gradient(top, #e1e1e1, #d1d1d1);
915-
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#d1d1d1));
916-
background-image: -webkit-linear-gradient(top, #e1e1e1, #d1d1d1);
917-
background-image: linear-gradient(top, #e1e1e1, #d1d1d1);
918-
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e1e1e1', EndColorStr='#d1d1d1');
919-
}
920-
921-
div.expandable > ul h3 > a.collapsed,
922-
div.expandable > ul h3 > a.expanded {
856+
.arrow-btn {
923857
background-image: url(/shared/images/expand-arrows.png);
924-
background-position: 0px -3px;
925-
background-repeat: no-repeat;
926-
width: 13px;
927-
border-right: 1px solid #cacaca;
858+
background-repeat: no-repeat;
859+
background-position: 0px -3px;
860+
width: 13px;
928861
padding: 8px 11px;
862+
background-color: #f7f7f7;
863+
display: table-cell;
864+
text-decoration: none;
929865
}
930866

931-
div.expandable > ul h3 > a.expanded {
867+
.arrow-btn.expanded {
932868
background-position: -38px -3px;
933869
}
934870

935-
div.expandable > ul h3 > a.collapsed:hover {
871+
.arrow-btn.collapsed:hover {
936872
background-image: url(/shared/images/expand-arrows.png);
937873
background-position: 0px -43px;
938-
background-repeat: no-repeat;
939-
width: 13px;
940-
border-right: 1px solid #cacaca;
941-
padding: 8px 11px;
942874
}
943875

944-
div.expandable > ul h3 > a.expanded:hover {
876+
.arrow-btn.expanded:hover {
945877
background-position: -38px -43px;
946878
}
947879

‎static/shared/images/expand-arrows.png‎

-865 Bytes
Loading

0 commit comments

Comments
 (0)