Skip to content

Commit 5f41005

Browse files
jueyangjueyang
committedFeb 1, 2013
finish search function based on post titles (one json for each languge), layout changes
1 parent 2b9c2eb commit 5f41005

18 files changed

+276
-219
lines changed
 

‎_includes/post.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
"title" : "{{ post.title }}",
3-
"category" : "{{ post.category }}",
4-
"href" : "{{ post.url }}"
2+
"label" : "{{ post.title }}",
3+
"url" : "{{ post.url }}"
54
}

‎_layouts/contribute.html

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
---
22
layout: default
33
---
4-
<div class='cell12 contribute'>
5-
<div class='marginL marginR cell4 pad1 contribute-intro'>
6-
<h4>{{ page.contributetitle }}</h4>
7-
<p>{{ content }}</p>
8-
</div>
9-
<div class='cell3 pad1 contribute-links'>
10-
<h4>{{page.startwith}}</h4>
11-
<ul>
12-
<li><a href='#'>{{page.startA}}</a></li>
13-
<li><a href='#'>{{page.startB}}</a></li>
14-
<li><a href='#'>{{page.startC}}</a></li>
15-
<li><a href='#'>{{page.startD}}</a></li>
16-
</div>
17-
</div>
4+
<div class='cell4 pad1 contribute-intro marginL'>
5+
<h4>{{ page.contributetitle }}</h4>
6+
<p>{{ content }}</p>
7+
</div>
8+
<div class='cell6 pad1 contribute-links marginL'>
9+
<!-- <h4>{{page.startwith}}</h4> -->
10+
<ul>
11+
<li><a href='#'>{{page.startA}}</a></li>
12+
<li><a href='#'>{{page.startB}}</a></li>
13+
<li><a href='#'>{{page.startC}}</a></li>
14+
<li><a href='#'>{{page.startD}}</a></li>
15+
</div>

‎_layouts/default.html

+21-33
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,28 @@
2828
<a lang='es'>Spanish</a>
2929
</small>
3030
</div>
31-
<div id='header' class='cell12'>
32-
<div class='marginL marginR cell5 pad0 cf'>
33-
<span><a href='{{site.baseurl}}/{{page.lang}}' class="logo logo-learn"></a></span>
34-
<span class='tagline'>{{site.translations.[page.lang].tagline}}</span>
31+
<div id='header' class='{% unless page.fronttitle %} withborder {% endunless %} cell12'>
32+
<div id='limiter' class='marginL cell9 pad1'>
33+
<div class='cell4'>
34+
<span><a href='{{site.baseurl}}/{{page.lang}}' class="logo logo-learn"></a></span>
35+
<span class='tagline'>{{site.translations.[page.lang].tagline}}</span>
36+
</div>
37+
<div class='cell4'>
38+
<ul class='ourguides cell3'>
39+
{% for post in site.posts %}
40+
{% if {{post.lang}} == {{page.lang}} and {{post.cover}} %}
41+
<li>
42+
<div class='title'><a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a></div>
43+
</li>
44+
{% endif %}
45+
{% endfor %}
46+
</li>
47+
</ul>
48+
</div>
49+
<div class='cell4'>
50+
<a class='banner cell3' href='{{site.baseurl}}/{{page.lang}}/contribute'>{{site.translations.[page.lang].contribute}}</a>
51+
</div>
3552
</div>
36-
<div class='cell3 pad0 cf'>
37-
<h4 class='ourguides cell3'>{{site.translations.[page.lang].ourguides}}</h4>
38-
<ul class='all-guides cell2'>
39-
{% for post in site.posts %}
40-
{% if {{post.lang}} == {{page.lang}} and {{post.cover}} %}
41-
<li class='guide'>
42-
<div class='title'><a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a></div>
43-
</li>
44-
{% endif %}
45-
{% endfor %}
46-
</ul>
47-
</div>
48-
<a class='banner'></a>
4953
</div>
5054
<div id='content' class='cf'>
5155
{{ content }}
@@ -67,20 +71,4 @@ <h4 class='ourguides cell3'>{{site.translations.[page.lang].ourguides}}</h4>
6771
</small>
6872
</div>
6973
</body>
70-
<script>
71-
// the contribute banner will pop up with its respective language
72-
$('.banner').hover(
73-
function() {
74-
$(this).attr("href","{{site.baseurl}}/{{page.lang}}/contribute");
75-
$(this).append($("<span class='banner-link'>{{site.translations.[page.lang].contribute}}</span>"));
76-
setTimeout(function(){
77-
$(".banner-link").css("display","block")
78-
},300)
79-
},
80-
function() {
81-
$(this).attr("href","");
82-
$(this).find("span").remove()
83-
}
84-
);
85-
</script>
8674
</html>

‎_layouts/doc.html

+19-4
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,21 @@
33
---
44
<div class='cell12'>
55
<div class='doc-nav marginL cell2 pad1 cf'>
6-
<ul>
6+
<ul>
77

88
{% for post in site.categories.[page.category] %}
99
{% if {{post.lang}} == {{page.lang}} %}
10-
{% unless {{post.hidden }}%}
1110
<li class='doc rounded'>
1211
<a class='title {% if {{post.cover}} %}cover{% endif %} {% if page.url == post.url %}active{% endif %}' href="{{site.baseurl}}{{ post.url }}">
1312
<span>{{ post.title }}</span>
1413
</a>
1514
</li>
16-
{% endunless %}
1715
{% endif %}
1816
{% endfor %}
1917

2018
</ul>
2119
</div>
22-
<div class='doc cell6 pad1 cf'>
20+
<div class='doc-main doc cell6 pad1'>
2321
{% if {{page.cover}} %}
2422
<h1>Overview</h1>
2523
{% endif %}
@@ -85,4 +83,21 @@ <h1>Overview</h1>
8583
original.parent().append(fullimage).append(close);
8684
}
8785
});
86+
87+
// make doc-nav sticky
88+
// TODO make the fixed element not conflict with footer
89+
{% unless {{page.cover}} %} // excluding cover pages
90+
var nav = $('.doc-nav'),
91+
navTop = nav.offset().top;
92+
93+
$(window).scroll(function(e){
94+
var windowTop = $(this).scrollTop();
95+
if (windowTop >= navTop) {
96+
nav.addClass('fixed');
97+
} else {
98+
nav.removeClass('fixed');
99+
}
100+
});
101+
{% endunless %}
102+
88103
</script>

‎_layouts/front.html

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
---
22
layout: default
33
---
4-
<div id='moo' class='cell12'>
5-
<div id='divider' class='marginL cell9 pad1'>
6-
<div class='cell4'>
7-
<a class='moo1' href='{{site.baseurl}}/{{page.lang}}/beginner'>
4+
<div id='front-links' class='cell12'>
5+
<div id='limiter' class='marginL cell9 pad1'>
6+
<div class='link1 cell4'>
7+
<a href='{{site.baseurl}}/{{page.lang}}/beginner'>
88
<span>{{ page.begspan }}</span>
99
{{ page.beg }}
1010
</a>
1111
</div>
12-
<div class='cell4'>
13-
<a class='moo2' href='{{site.baseurl}}/{{page.lang}}/intermediate'>
12+
<div class='link2 cell4'>
13+
<a href='{{site.baseurl}}/{{page.lang}}/intermediate'>
1414
<span>{{ page.interspan }}</span>
1515
{{ page.inter }}
1616
</a>
1717
</div>
18-
<div class='cell4'>
19-
<a class='moo3' href='{{site.baseurl}}/{{page.lang}}/advanced'>
18+
<div class='link3 cell4'>
19+
<a href='{{site.baseurl}}/{{page.lang}}/advanced'>
2020
<span> {{ page.advspan }}</span>
2121
{{ page.adv }}
2222
</a>
@@ -63,13 +63,14 @@ <h4>{{page.faq}}</h4>
6363
});
6464

6565
$.getJSON("{{site.baseurl}}/{{page.lang}}.json",function(data){
66+
console.log(data);
6667
var destination;
6768
$( "#search-field" ).autocomplete({
6869
autoFocus: true, // highlight the first search result in dropdown
6970
delay: 0,
7071
source: data,
7172
select: function(event, ui) {
72-
destination = '{{site.baseurl}}/' + ui.item.url;
73+
destination = '{{site.baseurl}}' + ui.item.url;
7374
window.location = destination;
7475
}
7576
});

‎_posts/en/0100-01-01-404.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
title: 404 - page not found
44
permalink: /en/404.html
55
lang: en
6+
nosearch: true
67
---
78
<div class='pad1 notfound rounded'>
89
<span></span>

‎_posts/en/0100-01-01-advanced.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ permalink: /en/advanced
44
lang: en
55
title: Advanced
66
category: advanced
7-
cover: yes
7+
cover: true
8+
nosearch: true
89
---
910

1011
Quisque ut consequat ante. Vestibulum mi arcu, posuere at malesuada et, sollicitudin sed enim. In aliquet eros nec lorem porttitor vel tristique ante egestas. Etiam condimentum dignissim neque, ut tincidunt dolor luctus eu. Nam in turpis sit amet est malesuada dignissim id non massa. Suspendisse tristique venenatis magna, ac consequat eros hendrerit et. Suspendisse potenti.

‎_posts/en/0100-01-01-contribute.md

+1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ startA: "Send us feedback"
99
startB: "Create a translation"
1010
startC: "Improve Language"
1111
startD: "Fork and improve site"
12+
nosearch: true
1213
---
1314
This guide is created and maintained by the [OpenStreetMap](http://www.openstreetmap.org/) and [Humanitarian OpenStreetMap](http://www.openstreetmap.org/) community. You can help us improve this guide by simply sending your feedback or by contributing directly to it via [Github](http://github.com/hotosm/learnosm).

‎_posts/en/0100-01-01-index.md

+1
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ faqB: "What is LearnOSM?"
1818
faqC: "How can I get started to map?"
1919
faqD: "Do I need any special gear to map?"
2020
faqE: "Where can I find additional help?"
21+
nosearch: true
2122
---

‎_posts/en/0100-01-01-inprogress.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
layout: default
3+
nosearch: true
4+
---

‎_posts/en/0100-01-01-status.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
permalink: /en/status
44
lang: en
55
title: Translation Status
6+
nosearch: true
67
---
78

89
## Translation Status - All Languages

‎_posts/en/0100-02-01-intermediate.md

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ lang: en
55
title: Intermediate
66
category: intermediate
77
cover: yes
8+
nosearch: true
89
---
910

1011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit scelerisque mauris, non varius nisi consequat nec. Proin gravida, ligula id convallis dictum, nunc erat sodales eros, in rhoncus urna risus et elit. Proin sit amet ante at magna eleifend vulputate a eget eros. Donec imperdiet venenatis dui ac auctor. Nunc libero justo, pharetra sed varius ac, tincidunt id dui. Ut consectetur, mi quis elementum sollicitudin, dolor nisl tempor mauris, nec condimentum quam neque ac tortor. Quisque id elementum libero.

‎_posts/en/0100-03-01-beginner.md

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ lang: en
55
title: Beginner
66
category: beginner
77
cover: yes
8+
nosearch: true
89
---
910
In this chapter we will learn step by step how to navigate the
1011
OpenStreetMap website, view and print maps, and sign up for a user

‎en.json

+11-16
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1+
---
2+
---
13
[
2-
{
3-
"label":"Adding Your First Points",
4-
"url":"en/beginner/walking-papers/#adding-your-first-points"
5-
},
6-
{
7-
"label":"Add Bing Imagery",
8-
"url":"en/beginner/start-josm/#add-bing-imagery"
9-
},
10-
{
11-
"label":"Add presets",
12-
"url":"en/beginner/start-josm/#add-presets"
13-
},
14-
{
15-
"label":"Add Walking Papers Plugin",
16-
"url":"en/beginner/start-josm/#add-walking-papers-plugin"
17-
}
4+
{% for post in site.posts %}
5+
{% if {{post.lang}} == 'en' %}
6+
{% unless post.nosearch %}
7+
{% include post.json %},
8+
{% endunless %}
9+
{% endif %}
10+
{% endfor %}
11+
{"label":"",
12+
"url":""}
1813
]

‎images/sprites/sprite.png

796 Bytes
Loading

‎images/sprites/sprite.svg

+97-33
Loading

‎search.json

-8
This file was deleted.

‎style.css

+92-98
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
.cell10 { float:left; width:83.3333%; }
1515
.cell11 { float:left; width:91.6666%; }
1616
.cell12 { float:left; width:100.0000%; }
17+
.right {float:right;}
1718

1819
.marginL { margin-left: 08.3333%; }
19-
.marginR {margin-right:118px;}
20-
21-
.pad0 {padding:40px 20px 20px 20px;}
20+
.marginR { margin-right:08.3333%; }
21+
.pad0 {padding:40px;}
2222
.pad1 {padding:20px;}
2323

2424
/* clearfix */
@@ -197,7 +197,6 @@ body {
197197
}
198198
#footer {
199199
width:100%;
200-
height:180px;
201200
position:absolute;
202201
bottom:0;
203202
left:0;
@@ -210,42 +209,59 @@ body {
210209
text-decoration: none;
211210
cursor: default;
212211
}
213-
214212
#header {
215-
border: none;
216-
background: #fff url(./images/sprites/dot.png) repeat-x bottom;
217-
}
213+
padding-top:20px;
214+
text-transform:uppercase;
215+
font-weight:700;
216+
font-size:12px;
218217

219-
.ourguides {
220-
margin-right:20px;
221218
}
219+
#header.withborder {
220+
padding-bottom:20px;
221+
background: #fff url(./images/sprites/dot.png) repeat-x bottom;
222+
}
223+
#header .ourguides {padding-left:25.0000%;}
224+
#header .ourguides:before {
225+
content: '';
226+
width: 60px;
227+
height: 60px;
228+
position:absolute;
229+
margin:10px 0 0 -70px;
230+
background: transparent url(./images/sprites/sprite.png) -196px -12px;
231+
}
222232

223-
#moo {
224-
padding-top:20px;
225-
}
226-
#moo a{
227-
display:block;
228-
padding:20px;
229-
border:5px solid white;
230-
border-radius:10px;
231-
text-transform:capitalize;
232-
text-align:left;
233-
transition: all 200ms linear;
234-
-moz-transition: all 200ms linear;
235-
-webkit-transition: all 200ms linear;
236-
-o-transition: all 200ms linear;
237-
}
238-
#moo a span {
239-
display:block;
240-
font-weight:700;
233+
#header .banner {color: #79bc5f; padding-left:25.0000%;}
234+
#header .banner:before {
235+
content: '';
236+
width: 60px;
237+
height: 60px;
238+
position:absolute;
239+
margin:10px 0 0 -70px;
240+
background: transparent url(./images/sprites/sprite.png) -265px -88px;
241241
}
242-
#moo a:hover {color:#101010;}
243-
.moo1 {background:#98d584;margin:0 32px 0 -4px;}
244-
.moo2 {background:#ffd429;margin:0 18px;}
245-
.moo3 {background:#7abeff;margin:0 -4px 0 32px;}
246-
.moo1:hover {background:#a8d59a;}
247-
.moo2:hover {background:#f0ca42;}
248-
.moo3:hover {background:#90c4f5;}
242+
243+
#front-links a{
244+
/* margin:0 60px 0 -30px;*/
245+
display:block;
246+
padding:20px;
247+
border-radius:5px;
248+
text-transform:capitalize;
249+
transition: all 200ms linear;
250+
-moz-transition: all 200ms linear;
251+
-webkit-transition: all 200ms linear;marginR
252+
-o-transition: all 200ms linear;
253+
}
254+
#front-links a span {
255+
display:block;
256+
font-weight:700;
257+
}
258+
#front-links a:hover {color:#101010;}
259+
#front-links .link1 a {background:#98d584;margin-right:30px;}
260+
#front-links .link2 a {background:#ffd429;margin-right:30px;}
261+
#front-links .link3 a {background:#7abeff;}
262+
#front-links .link1 a:hover {background:#a8d59a;}
263+
#front-links .link2 a:hover {background:#f0ca42;}
264+
#front-links .link3 a:hover {background:#90c4f5;}
249265

250266
.logo {
251267
display:block;
@@ -257,6 +273,7 @@ body {
257273
.logo-learn {
258274
width:170px;
259275
height:42px;
276+
margin-bottom:8px;
260277
background-position:0px -44px;
261278
}
262279
.logo-hot {
@@ -273,35 +290,6 @@ body {
273290
background-position:-76px 0;
274291
}
275292

276-
/* contribute banner */
277-
.banner {
278-
position:absolute;
279-
width:45px;
280-
height:80px;
281-
top:58px;
282-
right:0;
283-
background: url(./images/sprites/sprite.png) -188px 0px;
284-
transition: all 200ms ease-in;
285-
-moz-transition: all 200ms ease-in;
286-
-webkit-transition: all 200ms ease-in;
287-
-o-transition: all 200ms ease-in;
288-
}
289-
290-
.banner:hover {
291-
width:170px;
292-
}
293-
294-
.banner-link {
295-
color: #79bc5f;
296-
text-transform:uppercase;
297-
font-weight:700;
298-
font-size:12px;
299-
width:120px;
300-
padding:20px 0px 20px 50px;
301-
line-height:22px;
302-
display:none;
303-
}
304-
305293
/* footer */
306294
.contact li {margin-bottom:20px;}
307295
.email:before,.twitter:before,.translation:before,
@@ -325,24 +313,23 @@ body {
325313
height:32px;
326314
border:4px solid #f0f0f0;
327315
}
328-
input {
316+
.searchbox input {
329317
border:none;
330318
padding:4px 0px 4px 20px;
331319
font-size:16px;
332320
font-family:'Source Sans Pro',sans-serif;
333321
}
334-
.default-value {
335-
color:#ccc !important;
336-
font-style: italic;
337-
}
338-
.logo-search{
322+
.logo-search {
339323
float:left;
340-
background-position: -152px -79px;
341324
margin-left:3px;
342325
width: 30px;
343326
height: 30px;
327+
background-position:-152px -79px;
328+
}
329+
input.default-value {
330+
color:#ccc !important;
331+
font-style: italic;
344332
}
345-
346333
/* overriding default jquery ui css for autocomplete */
347334
.ui-corner-all {
348335
-moz-border-radius: 0px !important;
@@ -388,30 +375,36 @@ body {
388375

389376
/* doc nav */
390377
.doc-nav {
391-
margin-right:92px;
378+
position:absolute;
379+
}
380+
.doc-nav.fixed {
381+
position:fixed;
382+
top:10px;
383+
}
384+
.doc-nav ul li:first-child a{
385+
-webkit-border-top-left-radius: 5px;
386+
-webkit-border-top-right-radius:5px;
387+
-moz-border-radius-topleft: 5px;
388+
-moz-border-radius-topright: 5px;
389+
border-top-left-radius: 5px;
390+
border-top-right-radius: 5px;
391+
}
392+
.doc-nav ul li:last-child a{
393+
-webkit-border-bottom-right-radius: 5px;
394+
-webkit-border-bottom-left-radius: 5px;
395+
-moz-border-radius-bottomright: 5px;
396+
-moz-border-radius-bottomleft: 5px;
397+
border-bottom-right-radius: 5px;
398+
border-bottom-left-radius: 5px;
399+
}
400+
.doc-main {
401+
margin-left:33.3333%;
402+
min-height:540px;
392403
}
393-
.doc-nav ul li:first-child a{
394-
-webkit-border-top-left-radius: 5px;
395-
-webkit-border-top-right-radius:5px;
396-
-moz-border-radius-topleft: 5px;
397-
-moz-border-radius-topright: 5px;
398-
border-top-left-radius: 5px;
399-
border-top-right-radius: 5px;
400-
}
401-
.doc-nav ul li:last-child a{
402-
-webkit-border-bottom-right-radius: 5px;
403-
-webkit-border-bottom-left-radius: 5px;
404-
-moz-border-radius-bottomright: 5px;
405-
-moz-border-radius-bottomleft: 5px;
406-
border-bottom-right-radius: 5px;
407-
border-bottom-left-radius: 5px;
408-
}
409404
.doc .title{
410405
display:block;
411-
padding:12px;
412-
background:#f6f6f6;
413-
font-size:12px;
414-
font-weight:700;
406+
padding:10px;
407+
background:#f0f0f0;
415408
}
416409
.doc .title.active {
417410
background:#79bc5f;
@@ -424,15 +417,16 @@ body {
424417
.doc .title.cover,
425418
.doc .title.cover:hover,
426419
.doc .title.cover.active {
427-
font-size:14px;
428-
font-weight:400;
420+
font-size:12px;
421+
text-transform:uppercase;
422+
font-weight:700;
429423
text-align:center;
430424
background: #fff;
431425
padding:8px;
432426
color:#404040;
433-
border-top: 4px solid #f6f6f6;
434-
border-left: 4px solid #f6f6f6;
435-
border-right: 4px solid #f6f6f6;
427+
border-top: 4px solid #f0f0f0;
428+
border-left: 4px solid #f0f0f0;
429+
border-right: 4px solid #f0f0f0;
436430
}
437431
.doc .cover span:before {
438432
content:'';

0 commit comments

Comments
 (0)
Please sign in to comment.