Skip to content

Commit b13a302

Browse files
WhitespaceWhitespace
committed
Merge pull request #3 from hkrishna/ui_revamp
UI Revamp
2 parents 4bd0e1d + d1a6732 commit b13a302

File tree

3 files changed

+166
-44
lines changed

3 files changed

+166
-44
lines changed

‎_layouts/default.html

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{% else %}
99
<title>tutorials.github.com</title>
1010
{% endif %}
11-
11+
1212
<link rel="stylesheet" href="/stylesheets/styles.css">
1313
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
1414
<script src="/javascripts/scale.fix.js"></script>
@@ -34,21 +34,35 @@
3434
<body>
3535
<div class="wrapper">
3636
<header>
37-
<h1><a href="http://tutorials.github.com">tutorials.github.com</a></h1>
38-
<p>Decentralized polyglot tutorials</p>
39-
<nav id="sidebar"></nav>
40-
<ul id="download">
41-
<li><a href="https://github.com/tutorials/tutorials.github.com/zipball/master">Download <strong>ZIP File</strong></a></li>
42-
<li><a href="https://github.com/tutorials/tutorials.github.com/tarball/master">Download <strong>TAR Ball</strong></a></li>
43-
<li><a href="https://github.com/tutorials/tutorials.github.com">Fork On <strong>GitHub</strong></a></li>
44-
</ul>
37+
<div id="static_inner">
38+
<h1><a href="/">tutorials.github.com</a></h1>
39+
<p>Decentralized polyglot tutorials</p>
40+
<nav id="sidebar"></nav>
41+
</div>
4542
</header>
4643
<section id="main">
4744
{{ content }}
4845
</section>
4946
<footer>
50-
<p>This project is maintained by <a href="https://github.com/Whitespace">Whitespace</a></p>
51-
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
47+
<div class="less_footroom"><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></div>
48+
49+
<div class="social line_bottom">
50+
<!-- AddThis Button BEGIN -->
51+
<div class="addthis_toolbox addthis_default_style ">
52+
<a class="addthis_button_facebook_like ftg" fb:like:layout="button_count"></a>
53+
<a class="addthis_button_tweet ftg"></a>
54+
<a class="addthis_button_google_plusone ftg" g:plusone:size="medium"></a>
55+
</div>
56+
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
57+
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fe63cf9228607aa"></script>
58+
<!-- AddThis Button END -->
59+
</div>
60+
<div class="less_footroom"><small>This project is maintained by <a href="https://github.com/Whitespace">Whitespace</a></small></div>
61+
<div class="social_follow">
62+
<a href="https://twitter.com/githubtutorials" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @githubtutorials</a>
63+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
64+
</div>
65+
<a href="https://github.com/tutorials/tutorials.github.com" class="ribbon"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
5266
</footer>
5367
</div>
5468
<!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->

‎javascripts/sidebar.js

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,30 @@ $(function() {
99

1010
// Render license/source information
1111
_(tutorials).each(function(tutorial){
12-
t = $(tutorial)
13-
d = t.data()
14-
attribution = ""
15-
if(d.authorGithub) {
16-
attribution += '<li>Author: <a href="http://github.com/' + d.authorGithub + '">' + d.authorGithub + '</a></li>'
17-
} else if(d.author) {
18-
attribution += "<li>Author: " + d.author + "</li>"
12+
t = $(tutorial);
13+
d = t.data();
14+
var meta = d.authorGithub || d.author || d.source || d.license;
15+
if(meta) {
16+
var attribution = "";
17+
if(d.authorGithub) {
18+
attribution += '<span>by <a href="http://github.com/' + d.authorGithub + '">' + d.authorGithub + '</a></span>';
19+
} else if(d.author) {
20+
attribution += "<span>by " + d.author + "</span>"
21+
}
22+
if(d.source) {
23+
if (d.authorGithub || d.author) {
24+
attribution += '<span>|</span>';
25+
}
26+
attribution += '<span><a href="' + d.source + '">Original Source</a></span>';
27+
}
28+
if(d.license) {
29+
if (d.authorGithub || d.author || d.source) {
30+
attribution += '<span>|</span>';
31+
}
32+
attribution += '<span><a href="' + d.license + '">License</a></span>';
33+
}
34+
t.prepend("<p class='about'>" + attribution + "</p>");
1935
}
20-
if(d.source) {
21-
attribution += '<li><a href="' + d.source + '">Original Source</a></li>'
22-
}
23-
if(d.license) {
24-
attribution += '<li><a href="' + d.license + '">License</a></li>'
25-
}
26-
if(attribution) { t.prepend("<ul>" + attribution + "</ul>")}
2736
});
2837

2938
dict = _.chain(tutorials)
@@ -45,6 +54,28 @@ $(function() {
4554
// Draw the sidebar
4655
redraw();
4756

57+
//Fix sidebar
58+
function sidebar_fix() {
59+
var header_height = $('header').height(),
60+
footer_height = $('footer').height(),
61+
window_height = $(window).height(),
62+
$nav_sidebar = $('nav#sidebar'),
63+
sidebar_height= $nav_sidebar.height(),
64+
difference = window_height - (header_height + footer_height);
65+
if (difference>0) {
66+
$nav_sidebar.height(sidebar_height+difference);
67+
}
68+
}
69+
sidebar_fix();
70+
$(window).resize(function() { console.log('scroll'); sidebar_fix() });
71+
72+
// title fix
73+
var $section = $('section#main'),
74+
$title = $section.find('h1'),
75+
title_height = $title.height(),
76+
set_padding = title_height + 20;
77+
$section.css('paddingTop',set_padding);
78+
4879
// Hide tutorials if the user clicks on a facet
4980
$("nav li").live("click", function(e) {
5081
target = $(this).data();

‎stylesheets/styles.css

Lines changed: 96 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
22

33
body {
4-
padding:50px;
54
font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
65
color:#777;
76
font-weight:300;
7+
margin:0px;
8+
padding:0px;
89
}
910

1011
h1, h2, h3, h4, h5, h6 {
@@ -65,7 +66,7 @@ code, pre {
6566

6667
pre {
6768
padding:8px 15px;
68-
background: #f8f8f8;
69+
background: #f8f8f8;
6970
border-radius:5px;
7071
border:1px solid #e5e5e5;
7172
overflow-x: auto;
@@ -96,24 +97,31 @@ img {
9697
}
9798

9899
header {
99-
width:270px;
100+
width:250px;
100101
float:left;
102+
position:fixed;
103+
z-index:2;
104+
background:#fff;
105+
-moz-box-shadow: 0px 5px 10px #FFF;
106+
-webkit-box-shadow: 0px 5px 10px #FFF;
107+
box-shadow: 0px 5px 10px #FFF;
108+
padding-top:10px;
101109
}
102110

103111
#download {
104112
list-style:none;
105113
height:40px;
106-
114+
107115
padding:0;
108-
116+
109117
background: #eee;
110118
background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
111119
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
112120
background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
113121
background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
114122
background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
115123
background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
116-
124+
117125
border-radius:5px;
118126
border:1px solid #d2d2d2;
119127
box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
@@ -158,14 +166,81 @@ strong {
158166
color:#222;
159167
}
160168

169+
#sidebar{
170+
overflow-y: scroll;
171+
height: 400px;
172+
}
173+
161174
#sidebar ul h3 {
162175
margin: 0;
163176
}
164177

178+
#sidebar ul, #main div.tutorial ul {
179+
list-style:none;
180+
margin-left:0;
181+
padding:0;
182+
}
183+
184+
#sidebar ul li{
185+
cursor:pointer;
186+
color:#39C;
187+
}
188+
189+
#sidebar ul li:hover{
190+
cursor:pointer;
191+
color:#2c85b1;
192+
text-decoration:none;
193+
}
194+
195+
.headroom{
196+
margin: 20px 0 0 0;
197+
}
198+
199+
.less_headroom{
200+
margin: 10px 0 0 0;
201+
}
202+
203+
.footroom{
204+
margin: 0 0 20px;
205+
}
206+
207+
.less_footroom{
208+
margin: 0 0 10px;
209+
}
210+
211+
.line_bottom{
212+
border-bottom: 1px dotted #ccc;
213+
margin-bottom:10px;
214+
}
215+
216+
div.social a.ftg{
217+
width:79px;
218+
}
219+
220+
div.tutorial p.about span{
221+
margin-right:5px;
222+
}
223+
165224
section#main {
166-
width:560px;
225+
width:580px;
167226
float:right;
168-
padding-bottom:50px;
227+
padding:50px 0;
228+
}
229+
230+
section#main h1{
231+
position:fixed;
232+
top:0px;
233+
z-index:1;
234+
width: 580px;
235+
padding: 10px 0;
236+
-moz-box-shadow: 0px 5px 10px #FFF;
237+
-webkit-box-shadow: 0px 5px 10px #FFF;
238+
box-shadow: 0px 5px 10px #FFF;
239+
background:#FFF;
240+
}
241+
242+
a.ribbon img.fork {
243+
position: fixed; top: 0; left: 0; border: 0;
169244
}
170245

171246
small {
@@ -180,39 +255,41 @@ hr {
180255
}
181256

182257
footer {
183-
width:270px;
258+
width:250px;
184259
float:left;
185-
bottom:50px;
260+
bottom:10px;
261+
position:fixed;
262+
z-index:1;
186263
}
187264

188265
@media print, screen and (max-width: 960px) {
189-
266+
190267
div.wrapper {
191268
width:auto;
192269
margin:0;
193270
}
194-
271+
195272
header, section#main, footer {
196273
float:none;
197274
position:static;
198275
width:auto;
199276
}
200-
277+
201278
header {
202279
padding-right:320px;
203280
}
204-
281+
205282
section#main {
206283
border:1px solid #e5e5e5;
207284
border-width:1px 0;
208285
padding:20px 0;
209286
margin:0 0 20px;
210287
}
211-
288+
212289
header a small {
213290
display:inline;
214291
}
215-
292+
216293
#download {
217294
position:absolute;
218295
right:50px;
@@ -224,11 +301,11 @@ footer {
224301
body {
225302
word-wrap:break-word;
226303
}
227-
304+
228305
header {
229306
padding:0;
230307
}
231-
308+
232309
#download, header p.view {
233310
position:static;
234311
}
@@ -238,7 +315,7 @@ footer {
238315
body {
239316
padding:15px;
240317
}
241-
318+
242319
#download {
243320
display:none;
244321
}

0 commit comments

Comments
 (0)