Merge pull request #23 from devopsdays/matt-poc

Matt poc

content/events/2015-chicago/welcome.md

@@ -6,6 +6,7 @@ title = "welcome"
 City = "Chicago"
 Year = "2015"
 type = "event"
+aliases = ["/events/2015-chicago"]
 +++
 
 <h2>Tuesday, August 25th and Wednesday, August 26th</h2>

themes/devopsdays/layouts/index.html

@@ -1,5 +1,21 @@
 {{ partial "header.html" . }}
+<div class = "container-fluid">
+  <div class = "row">
+    <div class="col-md-8">
+      <h1>Upcoming DevOpsDays Events</h1>
+      <!--map-->
+      <div id="map_wrapper">
+          <div id="map_canvas" class="mapping"></div>
+      </div>
+      <!-- end map -->
+      {{ partial "maps" . }}
 
-This is the homepage. Edit this and stuff.
+    </div>
+    <div class = "col-md-3">
+      <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/search?q=devopsdays%20OR%20devopsday%20OR%20%23devopsday%20OR%20%23devopsdays" data-widget-id="667543157886816256">Tweets about devopsdays OR devopsday OR #devopsday OR #devopsdays</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+    </div>
+  </div>
+</div>
 
 {{ partial "footer.html" . }}

themes/devopsdays/layouts/partials/header.html

@@ -46,3 +46,4 @@
 <div class="container">
 
       <div class="row row-offcanvas row-offcanvas-right">
+        <img src = "/img/devopsdays-banner.png" class = "image-responsive">

themes/devopsdays/layouts/partials/maps.html

@@ -0,0 +1,76 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script type="text/javascript">
+jQuery(function($) {
+    // Asynchronously Load the map API
+    var script = document.createElement('script');
+    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
+    document.body.appendChild(script);
+});
+
+function initialize() {
+    var map;
+    var bounds = new google.maps.LatLngBounds();
+    var mapOptions = {
+        mapTypeId: 'roadmap'
+    };
+
+    // Display a map on the page
+    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
+    map.setTilt(45);
+
+    // Multiple Markers
+    var markers = [
+        ['Kiel', 54.34208,10.121949],
+        ['Seattle', 47.609895, -122.330259],
+        ['Minneapolis', 44.9726428,-93.2752562],
+        ['Ohio', 39.9833, -82.9833],
+        ['Warsaw', 52.1800879, 20.9788363],
+        ['Washington D.C.', 38.8011545,-77.0659376],
+
+
+    ];
+
+    // Info Window Content
+    var infoWindowContent = [
+        ['<div class="info_content">' +
+        '<h3>London Eye</h3>' +
+        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
+        ['<div class="info_content">' +
+        '<h3>Palace of Westminster</h3>' +
+        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
+        '</div>']
+    ];
+
+    // Display multiple markers on a map
+    var infoWindow = new google.maps.InfoWindow(), marker, i;
+
+    // Loop through our array of markers & place each one on the map
+    for( i = 0; i < markers.length; i++ ) {
+        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
+        bounds.extend(position);
+        marker = new google.maps.Marker({
+            position: position,
+            map: map,
+            title: markers[i][0]
+        });
+
+        // Allow each marker to have an info window
+        google.maps.event.addListener(marker, 'click', (function(marker, i) {
+            return function() {
+                infoWindow.setContent(infoWindowContent[i][0]);
+                infoWindow.open(map, marker);
+            }
+        })(marker, i));
+
+        // Automatically center the map fitting all markers on the screen
+        map.fitBounds(bounds);
+    }
+
+    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
+    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
+        this.setZoom(14);
+        google.maps.event.removeListener(boundsListener);
+    });
+
+}
+</script>

themes/devopsdays/static/css/style.css

@@ -62,6 +62,11 @@
     margin-right: auto;
 }
 
-.youtube-video {
-  margin-bottom: 15px;
+#map_wrapper {
+    height: 400px;
+}
+
+#map_canvas {
+    width: 100%;
+    height: 100%;
 }