WIP update

metasyn · Feb 12, 2018 · 5008037 · 5008037
1 parent 7cd3648
commit 5008037
Show file tree

Hide file tree

Showing 10 changed files with 568 additions and 125 deletions.
diff --git a/src/css/mapboxgl-spiderifier.css b/src/css/mapboxgl-spiderifier.css
@@ -0,0 +1,61 @@
+.spidered-marker {
+  width: 1px;
+  height: 1px;
+  overflow: display;
+  will-change: transform;
+}
+
+.spidered-marker:hover { cursor: pointer }
+
+.spidered-marker .icon-div {
+  position: relative;
+  z-index: 1;
+}
+
+.spidered-marker .line-div {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  background-color: #343434;
+  opacity: 0.45;
+  transform-origin: bottom;
+  z-index: 0;
+  height: 0;
+}
+
+.spidered-marker:hover .line-div { opacity: 1 }
+
+/* Animations specific styles */
+
+.spidered-marker.animate {
+  -webkit-transition: margin 0.15s linear;
+  -moz-transition: margin 0.15s linear;
+  -ms-transition: margin 0.15s linear;
+  -o-transition: margin 0.15s linear;
+  transition: margin 0.15s linear;
+}
+
+.spidered-marker.initial,
+.spidered-marker.exit {
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+  height: 0;
+}
+
+.spidered-marker.animate .line-div {
+  -webkit-transition: all 0.15s linear;
+  -moz-transition: all 0.15s linear;
+  -ms-transition: all 0.15s linear;
+  -o-transition: all 0.15s linear;
+  transition: all 0.15s linear;
+
+  -webkit-transition-delay: inherit;
+  -moz-transition-delay: inherit;
+  -ms-transition-delay: inherit;
+  -o-transition-delay: inherit;
+  transition-delay: inherit;
+}
+
+.spidered-marker.animate.initial .line-div,
+.spidered-marker.animate.exit .line-div { height: 0 !important }
diff --git a/src/css/stylish.css b/src/css/stylish.css
@@ -4,114 +4,169 @@ body {
 }
 
 #map {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
+  position:absolute;
+  left:25%;
+  top:0;
+  bottom:0;
+  width: 75%;
 }
 
-#panel {
-  overflow: auto;
-  position: absolute;
-  bottom: 30px;
-  border-radius: 3px;
-  max-height: 250px;
-  overflow: auto;
-  width: 100%;
+.button-container {
+  margin: 10px auto;
+  width: 90%;
 }
 
-#panel-rel {
-  position: relative;
+.button {
+  background-color: #4CAF50; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
 }
 
-pre.ui-coordinates {
-  background: rgba(0,0,0,0.5);
-  padding: 5px 10px 0px 5px;
-  position: relative;
-  color: #fff;
-  font-size: 14px;
-  line-height: 18px;
-  border-radius: 3px;
-  max-height: 100px;
-  overflow: auto;
-  width: 100%;
-  margin: 2px;
+.hidden {
+  display: none !important;
 }
 
-button {
-  background-color: #FFF;
-  font-size: 14px;
-  margin: 0px auto 10px auto 
+#date-selector-container {
+  display: grid;
+  grid-template-rows: repeat(5, 25px);
+  grid-template-columns: 50% 50%;
+  grid-auto-flow: columns;
+  grid-auto-columns: 50% 50%;
+  margin-left: 50px;
 }
 
-#date-selector-container {
-  background: rgba(0,0,0,0.5);
-  position: relative;
-  color: #fff;
-  font-size: 14px;
-  line-height: 18px;
-  width: 100%;
-  padding: 5px 10px 10px 5px;
+
+/* Mapbox GL Stuff */
+
+.mapboxgl-popup {
+  max-width: 400px;
+  max-height: 400px;
+}
+
+.mapboxgl-popup-content {
+  font-family: 'Open Sans', sans-serif;
+  overflow: scroll;
 }
 
+.mapboxgl-popup-content h1 {
+  font-size: 20px;
+}
 
-#q{
-  font-size: 40px;
-  color: white;
-  z-index: 6;
-  position: fixed;
-  top: 5px;
-  right: 25px;
+.mapboxgl-popup-content h2 {
+  font-size: 16px;
 }
 
-#modal-template{
-  display: none;
+.mapboxgl-popup-content h2 {
+  font-size: 14px;
+}
+
+.map-overlay {
+  position: absolute;
+  width: 25%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  background-color: #fff;
+  max-height: 100%;
+  overflow: hidden;
 }
 
+#feature-listing p:nth-child(odd) {
+  background-color: #f2f2f2;
+}
 
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none;   /* Chrome/Safari/Opera */
-  -khtml-user-select: none;    /* Konqueror */
-  -moz-user-select: none;      /* Firefox */
-  -ms-user-select: none;       /* IE/Edge */
-  user-select: none;           /* non-prefixed version, currently
-                                  not supported by any browser */
+.map-overlay fieldset {
+  display: none;
+  background: #ddd;
+  border: none;
+  padding: 10px;
+  margin: 0;
 }
 
-.vex-overlay {
-  height: 150vh;
+.map-overlay .overlay-item {
+  display: block;
+  border: none;
+  width: 100%;
+  border-radius: 3px;
+  padding: 10px;
+  margin: 0;
 }
 
+.map-overlay .listing {
+  overflow: auto;
+  max-height: 100%;
+}
 
-.vex-content p {
-  font-size: 14px;
-  line-height: 1.25em;
+.map-overlay .listing > * {
+  display: block;
+  padding: 5px 10px;
+  margin: 0;
 }
 
-.vex-content pre {
-  font-size: 14px;
-  line-height: 1em;
-  }
+.map-overlay .listing a {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color: #404;
+  text-decoration: none;
+}
 
-.vex-content h1 {
-  font-size: 32px;
+.map-overlay .listing a:last-child {
+  border: none;
 }
 
-/* Mapbox GL Stuff */
+.map-overlay .listing a:hover {
+  background: #f0f0f0;
+}
 
-.marker {
-  background-image: url('../img/marker.png');
-  background-size: contain;
-  width: 30px;
-  height: 77px;
-  cursor: pointer;
+#see-list-button {
+  display: none;
 }
 
-.mapboxgl-popup {
-  max-width: 200px;
+.map-overlay .closebtn {
+  display: none
 }
 
-.mapboxgl-popup-content {
-  font-family: 'Open Sans', sans-serif;
+
+/* Media */
+
+@media only screen and (max-device-width: 480px) {
+
+  .mapboxgl-control-container {
+    display: none;
+  }
+
+  #see-list-button {
+    position: absolute;
+    display: block;
+    left: 0px;
+    bottom: 0px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .map-overlay {
+    position: absolute;
+    width: 100%;
+    height: 0%;
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    background-color: #fff;
+    overflow: hidden;
+    transition: 0.5s;
+  }
+
+  .map-overlay .closebtn {
+    position: absolute;
+    display: block;
+    left: 0px;
+    bottom: 25px;
+    width: 100%;
+    text-align: center;
+    font-size: 64px;
+  }
+
 }
diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,49 @@
 <!DOCTYPE html>
+
 <html lang='en'>
 <head>
-  <title></title>
+  <title>
+  </title>
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
-  <link href='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css' rel='stylesheet'>
+  <link href='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css' rel='stylesheet' type="text/css">
 </head>
+
 <body>
-  <div id='app'></div>
-  <div id='panel'>
-    <div id='coordinates' class='ui-coordinates'>
-    <div id='date-selector-container'>
-      <form id='date-selector'></form>
+  <div id='app'>
+  </div>
+
+
+  <div id='see-list-button'>
+    <div class='button-container'>
+      <a href='#' id='open-list' class='button overlay-item'>See List</a>
+    </div>
+  </div>
+
+
+  <div class='map-overlay'>
+    <a href="javascript:void(0)" class="closebtn">&#215;</a>
+
+    <fieldset>
+      <input class='overlay-item' id='feature-filter' type='text' placeholder='Search results'>
+    </fieldset>
+
+
+    <div class='button-container'>
+      <a href='#' id='filter-button' class='button overlay-item'>Filter by date</a>
+    </div>
+
+
+    <div>
+      <div class='hidden filters' id='date-selector-container'>
+      </div>
+    </div>
+
+
+    <div id='feature-listing' class='listing'>
     </div>
   </div>
-  <script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js'></script>
+  <script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js' type="text/javascript">
+</script>
 </body>
 </html>
diff --git a/src/js/app.jsx b/src/js/app.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 
+import $ from 'jquery';
+
 import Parser from './components/Parser';
 import Dates from './components/dates/Dates';
 import ShowMap from './components/Map';
@@ -23,7 +25,21 @@ class Application extends Component {
       // Add the shows
       const mapEl = document.getElementById('app');
       render(<ShowMap geojson={data.geojson} />, mapEl);
-      console.log(data.geojson)
+
+      // Add listeners
+      $('#filter-button').on('click', () => {
+        $('.filters').toggleClass('hidden');
+      });
+
+      $('#see-list-button').on('click', () => {
+        $('.map-overlay').css('height', '100%');
+        $('#see-list-button').toggleClass('hidden');
+      });
+
+      $('.closebtn').on('click', () => {
+        $('.map-overlay').css('height', 0);
+        $('#see-list-button').toggleClass('hidden');
+      });
     });
   }