Skip to content

Commit f32e2f3

Browse files
WasabiFanWasabiFan
committed
Make grids on projects and tutorial home pages flow correctly
Now uses explicit rows so that items in each row are ligned up.
1 parent 0d6b5c0 commit f32e2f3

2 files changed

Lines changed: 45 additions & 29 deletions

File tree

‎docs/tutorials/index.html‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,35 @@
44

55
{% assign tutorials=site.pages | where: "category", "tutorials" | sort: "subject" | group_by: "subject" %}
66

7+
{% assign col = 0 %}
78
<div class="row">
89
{% for group in tutorials %}
910
{% if group.name != "" %}
10-
<div class="col-lg-6">
11-
<div class="panel panel-default rounded-panel">
12-
<div class="panel-heading">{{ group.name }}</div>
13-
<div class="panel-body">
14-
<ul>
15-
{% assign items = group.items | sort: "title" %}
16-
{% for item in items %}
17-
<li>
18-
<a href="{{ item.url }}">{{ item.title }}</a>
19-
{% if item.subtitle %}
20-
({{ item.subtitle }})
21-
{% endif %}
22-
</li>
23-
{% endfor %}
24-
</ul>
11+
{% if col == 2 %}
12+
</div>
13+
<div class="row">
14+
{% assign col = 0 %}
15+
{% endif %}
16+
{% assign col = col | plus: 1 %}
17+
18+
<div class="col-lg-6">
19+
<div class="panel panel-default rounded-panel">
20+
<div class="panel-heading">{{ group.name }}</div>
21+
<div class="panel-body">
22+
<ul>
23+
{% assign items = group.items | sort: "title" %}
24+
{% for item in items %}
25+
<li>
26+
<a href="{{ item.url }}">{{ item.title }}</a>
27+
{% if item.subtitle %}
28+
({{ item.subtitle }})
29+
{% endif %}
30+
</li>
31+
{% endfor %}
32+
</ul>
33+
</div>
2534
</div>
2635
</div>
27-
</div>
2836
{% endif %}
2937
{% endfor %}
3038
</div>

‎projects/index.html‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,33 @@
1515
</div>
1616

1717
<div class="row">
18+
{% assign col = 0 %}
1819
{% for post in site.posts %}
1920
{% if post.categories contains "projects" %}
2021
{% unless post.id == '/projects/2014/03/21/Example-Project' %}
22+
{% if col == 3 %}
23+
</div>
24+
<div class="row">
25+
{% assign col = 0 %}
26+
{% endif %}
27+
{% assign col = col | plus: 1 %}
28+
2129
{% assign num_words = 60 %}
22-
<div class="col-sm-6 col-md-4">
23-
<div class="thumbnail">
24-
{% if post.youtube_video_id %}
25-
{% assign num_words = 35 %}
26-
<a href="{{ post.url }}">
27-
<img src="http://img.youtube.com/vi/{{post.youtube_video_id}}/mqdefault.jpg" alt="project thumbnail image" />
28-
</a>
29-
{% endif %}
30-
<div class="caption">
31-
<h3>{{ post.title }}</h3>
32-
<p>{{ post.excerpt | strip_html | truncatewords: num_words }}</p>
33-
<p><a class="btn btn-primary" href="{{ post.url }}">Learn more</a></p>
30+
<div class="col-sm-6 col-md-4">
31+
<div class="thumbnail">
32+
{% if post.youtube_video_id %}
33+
{% assign num_words = 35 %}
34+
<a href="{{ post.url }}">
35+
<img src="http://img.youtube.com/vi/{{post.youtube_video_id}}/mqdefault.jpg" alt="project thumbnail image" />
36+
</a>
37+
{% endif %}
38+
<div class="caption">
39+
<h3>{{ post.title }}</h3>
40+
<p>{{ post.excerpt | strip_html | truncatewords: num_words }}</p>
41+
<p><a class="btn btn-primary" href="{{ post.url }}">Learn more</a></p>
42+
</div>
3443
</div>
3544
</div>
36-
</div>
3745
{% endunless %}
3846
{% endif %}
3947
{% endfor %}

0 commit comments

Comments
 (0)