Upgrade bootstrap

Use agency theme from npm

This breaks the headers.

Thumbnails aren't scaled properly.

agency hasn't been checked on the official website

There are probably other issues.

Author: manthey

examples/common/index.pug

@@ -15,36 +15,28 @@ html(lang="en")
   body
     if !hideNavbar
       // Add a navbar
-      nav.navbar.navbar-default(role="navigation")
-        .container-fluid
-          .navbar-header
-            button.navbar-toggle(type="button", data-toggle="collapse", data-target="gj-navbar-collapse")
-              span.sr-only Toggle navigation
-              span.icon-bar
-              span.icon-bar
-              span.icon-bar
+      nav.navbar.navbar-dark.bg-primary(role="navigation")
             a.navbar-brand(href="https://github.com/OpenGeoscience/geojs", target="gj-homepage") GeoJS
 
-          .collapse.navbar-collapse#gj-navbar-collapse
             block headerButtons
-            ul.nav.navbar-nav.navbar-right
+            ul.nav.navbar-nav.ml-auto.navbar-right
               block screenShot
-                li
-                  a.gj-screenshot-link(tabindex=0)
+                li.nav-item
+                  a.nav-link.gj-screenshot-link(tabindex=0)
                     | Screenshot
-                li.gj-screenshot-waiting
-                  a ...
-                li.gj-screenshot-result
-                  a.gj-screenshot-download(download='screenshot.png')
+                li.nav-item.gj-screenshot-waiting
+                  a.nav-link ...
+                li.nav-item.gj-screenshot-result
+                  a.nav-link.gj-screenshot-download(download='screenshot.png')
                     img
               block showSource
                 if docHTML
-                  li
-                    a.gj-show-source-link(href=docHTML, target="gj-docco")
+                  li.nav-item
+                    a.nav-link.gj-show-source-link(href=docHTML, target="gj-docco")
                       | Source
               if !about.hidden
-                li
-                  a.gj-show-about-link(href="#", data-toggle="modal", data-target="#about-modal")
+                li.nav-item
+                  a.nav-link.gj-show-about-link(href="#", data-toggle="modal", data-target="#about-modal")
                     | About
 
       if ! about.hidden

examples/index.js

@@ -3,7 +3,7 @@ window.geo = require('../src/index');
 
 // bootstrap and themes
 require('bootstrap/dist/css/bootstrap.css');
-require('bootswatch/flatly/bootstrap.css');
+require('bootswatch/dist/flatly/bootstrap.css');
 require('bootstrap');
 
 // codemirror and plugins

examples/index.pug

@@ -2,7 +2,7 @@ extends ./common/index.pug
 
 mixin thumbnail(ex)
   .col-md-4
-    .thumbnail
+    .card.card-body
       a(href=ex.path + "/")
         img(src=ex.path + "/thumb.jpg", onerror="this.src='osm/thumb.jpg';")
         .caption
@@ -12,7 +12,7 @@ mixin thumbnail(ex)
               p= ex.about.text
 
 block prepend headerButtons
-  ul.nav.navbar-nav.navbar-right
+  ul.nav.navbar-nav.ml-auto
     li.dropdown
       a.dropdown-toggle(href="#", data-toggle="dropdown") Resources
         span.caret

examples/main.css

@@ -2,12 +2,12 @@ html, body {
   overflow: auto;
 }
 
-.thumbnail {
+.card.card-body {
   position: relative;
   overflow: hidden;
 }
 
-.thumbnail .caption .description{
+.card.card-body .caption .description{
   position: absolute;
   top: 0px;
   right: 0px;