Update the layout of examples page to a two column design;
MODIFY
_data/examples.yml
_data/examples.yml
- name: geoJSON
title: GeoJSON file reader
- description: Shows how to use the included geoJSON reader, and how to use the properties to adjust the style of the features. In this example, you can edit the json file while the features on the map update in response. You can also drop a new geoJSON file onto the text editor to load it.
+ description: Shows how to use geoJSON reader and use properties to adjust the style of the features. You can edit the json file while the features on the map update in response.
- name: legend
title: Feature legends
- name: reprojection
title: Reproject tiles
- description: This example shows how you can reproject tiles from one projection to another. The source tiles are in Web Mercator (EPSG:3857), but can be drawn in many different projections.
+ description: Shows how you can reproject tiles from one projection to another. The source tiles are in Web Mercator, but can be drawn in many different projections.
- name: sld
title: Adding styles to WMS raster layers
- name: tiles
title: Tile layer with controllable options
- description: This example provides controls for changing many options on tile layers. The code and query parameters allow even more options to be adjusted.
+ description: This example shows the options on tile layers. The code and query parameters allow even more options to be adjusted.
- name: transitions
title: Using animated transitions

MODIFY
_layouts/default.html
_layouts/default.html
<li class="{%if page.url contains "example"%}active{%endif%}">
<a href="/examples">Examples</a>
</li>
- <li>
- <a href="http://geojs.readthedocs.io/en/latest/">Docs</a>
- </li>
<li>
<a href="https://github.com/OpenGeoscience/geojs">Github</a>
</li>

MODIFY
css/main.scss
css/main.scss
@@ -89,10 +89,14 @@ footer{
.example-container {
// clear: both;
background-color: white;
- padding: 25px 0;
+ padding-top: 25px;
+ padding-bottom: 25px;
border-bottom: 1px solid #eee;
.thumbnail-container {
+ padding-right: 0;
+ width: 45.83333%;
+
a{
position: relative;
display: block;
@@ -120,6 +124,11 @@ footer{
}
}
+ .word-container {
+ width: 54.16666%;
+ padding-right: 5px;
+ }
+
h4.title{
font-size: 17px;
}

MODIFY
examples.html
examples.html
@@ -4,26 +4,31 @@ title: Examples
---
<div class="container">
<div class="row">
- <div class="col-md-8 col-md-offset-2">
+ <!-- <div class="col-md-10 col-md-offset-1"> -->
+ <div class="col-md-12">
<section>
<h2>Examples</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</section>
+ <div class="row">
{% for example in site.data.examples %}
- <div class="row example-container">
- <div class="col-sm-4 thumbnail-container">
+ <div class="col-md-6 example-container">
+ <div class="row">
+ <div class="col-xs-5 thumbnail-container">
<a href="{{"example"|relative_url}}/{{example.name}}">
<div class="thumbnail-hover">
</div>
<img src="{{"example"|relative_url}}/{{example.name}}/thumb.jpg">
</a>
</div>
- <div class="col-sm-8">
+ <div class="col-xs-7 word-container">
<a href="{{"example"|relative_url}}/{{example.name}}"><h4 class="title">{{example.title}}</h4></a>
<div class="description">{{example.description}}</div>
</div>
</div>
+ </div>
{% endfor %}
</div>
</div>
</div>
+</div>
\ No newline at end of file

MODIFY
index.html
index.html
@@ -64,7 +64,7 @@ title: Welcome
</div>
<div class="row">
<div class="col-md-6">
- <a href="{{ "tutorials" | relative_url }}"><h3><i class="fa fa-book"></i>Tutorials</h3></a>
+ <a href="http://geojs.readthedocs.io/en/latest/"><h3><i class="fa fa-book"></i>Documentation</h3></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">

Update the layout of examples page to a two column design;