finish styles and prepare for beta release

Author: mAzurkovic

public/stylesheets/style.css

@@ -10,6 +10,10 @@
   margin: 0 auto;
 }
 
+#text {
+  font-size: 16px;
+}
+
 #title {
   font-weight: bold;
   font-size: 20px;
@@ -21,11 +25,32 @@
 
 .vote-button {
   font-size: 18px;
-  border-radius: 45%;
+  border-radius: 50%;
   border-style: none;
+  color: white;
+  width: 30px;
+  height: 30px;
 }
 
 .modal { height: 500px !important ; }  /* increase the height and width as you desire */
 .select-dropdown{
     overflow-y: auto !important;
 }
+
+.up {
+  background-color: #66bb6a;
+}
+
+.up:hover {
+  background-color: #1b5e20;
+  transition: all 0.75s ease 0s;
+}
+
+.down {
+  background-color: #42a5f5;
+}
+
+.down:hover {
+  background-color: #0d47a1;
+  transition: all 0.75s ease 0s;
+}

readme.md

@@ -19,5 +19,7 @@ This project uses MongoDB, and uses mongoose to interface with it. Make sure you
 #### Regarding the Google Maps API
 Remember to add your API key to the `index.hbs` file.
 
-### TODO
+### TODO before release
 * Add a filtering system to filter spots (i.e. only show places with outlets or places good for freestyle)
+* Style infoboxes
+* Make sidenav collapsible for mobile clients

views/index.hbs

@@ -1,7 +1,6 @@
 <div id="map"></div>
-
 <div class="fixed-action-btn horizontal">
-  <a class="btn-floating btn-large waves-effect waves-light red modal-trigger" href="#modal1">
+  <a class="btn-floating btn-large waves-effect waves-light yellow darken-2 modal-trigger pulse" href="#modal1">
      <i class="material-icons">add</i>
    </a>
 </div>
@@ -45,26 +44,34 @@
                      </select>
             <label>What kind of flying is best here...</label>
           </div>
-          Has an outlet?
-          <p>
-            <input name="yes" type="radio" id="test1" />
-            <label for="test1">Yes</label>
-          </p>
-          <p>
-            <input name="no" type="radio" id="test2" />
-            <label for="test2">No</label>
-          </p>
 
+
+          <div class="row">
+            <p class="col s2">Has an outlet? </p>
+            <p class="col s1">
+              <input name="yes" type="radio" id="test1" />
+              <label for="test1">Yes</label>
+            </p>
+            <p class="col s1">
+              <input name="no" type="radio" id="test2" />
+              <label for="test2">No</label>
+            </p>
+          </div>
+
+        </div>
+
+        <div class="row">
+          <div class="col s12">
+            <button class="btn-large waves-effect waves-light center-align" type="submit" name="action" onclick="Materialize.toast('Spot added, refresh to view it!', 4000)" style="background-color:#fbc02d;">Add Spot
+              <i class="material-icons right">send</i>
+            </button>
+          </div>
         </div>
-        <button class="btn waves-effect waves-light" type="submit" name="action">Add Spot
-                      <i class="material-icons right">send</i>
-                    </button>
 
       </form>
     </div>
   </div>
 </div>
-
 <!-- Modal Structure -->
   <div id="modalAbout" class="modal">
     <div class="modal-content">
@@ -123,8 +130,10 @@ function initMap() {
 
   for (var i = 0; i < spots.length; i++) { // loop through all the locations and render a marker
     var outlet = "No";
+    var date = (spots[i].date).toString().substring(0, 10);
     if (spots[i].isOutlet) { outlet = "Yes"; }
-    addMarker(spots[i].coords, spots[i].address, spots[i]._id, spots[i].points, spots[i].type, spots[i].goodFor, outlet);
+
+    addMarker(spots[i].coords, spots[i].address, spots[i]._id, spots[i].points, spots[i].type, spots[i].goodFor, outlet, date);
   }
 
 }
@@ -147,17 +156,17 @@ function placeMarkerAndPanTo(latLng, map) {
 }
 
 // adds a marker as well as an info box containing the rating of the spot
-function addMarker(coords, address, id, points, type, goodFor, hasOutlet) {
+function addMarker(coords, address, id, points, type, goodFor, hasOutlet, date) {
   var upvote = "/upvote/" + id;
   // string that is used to render the html in the info box
-  var contentString2 = '<div id="content" class="info"><div class="row"><div class="col s12" id="title"><br>' + address + '</div></div><div class="row"><div>'+
-'<form action="/upvote/'+ id +'" method="POST">'+
-'<input class="vote-button" type="submit" name="upvote" value="↑"/></form>'+ points +
-'<form action="/downvote/'+ id +'" method="POST">'+
-'<input class="vote-button" type="submit" name="downvote" value="↓"/>'+
-'</form></div><div>'+
-'<ul><li>This spot is good for <b>' + goodFor + '</b> and is a <b>' + type + '</b>.</li><li> <div>Are you able to charge packs here: <b>' + hasOutlet +
-'</b></li></ul></div></div></div></div>';
+  var contentString2 = '<div id="content" class="info"><div class="row"><div class="col s1.5"><br>' +
+  '<form action="/upvote/'+ id +'" method="POST">'+
+  '<input class="vote-button up" type="submit" name="upvote" value="↑"/></form><b style="padding-left: 10px;">'+ points +
+  '</b><form action="/downvote/'+ id +'" method="POST">'+
+  '<input class="vote-button down" type="submit" name="downvote" value="↓"/>'+
+  '</form></div>' + '<div class="col s10.5" id="text"><br><b>' + address + '</b><ul><li>This spot is good for <b>' + goodFor + '</b> and is a <b>' + type + '</b>.</li><li> <div>Are you able to charge packs here: <b>' + hasOutlet +
+  '</b></li></ul></div></div><div class="divider"></div></div></div></div>'+
+  '</div><br></div><div class="right-align"> Spot added on ' + date + '</div></div>' ;
 
   var infowindow = new google.maps.InfoWindow({
     content: contentString2

views/layout.hbs

@@ -15,6 +15,7 @@
 
 <body>
 
+<div class="navbar-fixed">
 <nav class="deep-purple darken-1">
   <div class="nav-container">
     <div class="nav-wrapper">
@@ -24,34 +25,43 @@
         <li><a href="badges.html">Filter spots</a></li>
         <li><a href="collapsible.html">About</a></li>
       </ul> -->
+      <div class="row">
+        <div class="col s2">
+        </div>
+        <div class="col s8">
+
+        </div>
+      </div>
     </div>
   </div>
 </nav>
+</div>
 
 <ul id="slide-out" class="side-nav fixed">
   <nav class="deep-purple darken-1">
     <div class="nav-container">
       <div class="nav-wrapper">
-        <a href="/" class="brand-logo" style="padding-left: 30px;">BandoMap</a>
+        <a href="/" class="brand-logo" style="padding-left: 30px;"><i class="material-icons">map</i> BandoMap</a>
       </div>
     </div>
   </nav>
+
+
   <br>
-   <li><a class="modal-trigger" href="#modal1"><i class="material-icons">add</i>Add a spot</a></li>
-   <li><a href="#!"><i class="material-icons">search</i>Search location</a></li>
+   <!--<li><a href="#!"><i class="material-icons">search</i>Search location</a></li>-->
   <li><div class="divider"></div></li>
   <li><a class="subheader">Filter Spots</a></li>
 
   <div class="container">
-    <select class='select' id="type" onchange="filterMarkersStyle(this.value);">
+    <select class='select' id="type" onchange="filterMarkersStyle(this.value); Materialize.toast('Filtered!', 2000);">
         <option value="">Flying style</option>
         <option value="Freestyle">Freestyle</option>
         <option value="Racing">Racing</option>
         <option value="Longrange">Long range</option>
         <option value="Everything">Everything</option>
     </select>
 
-    <select id="type" onchange="filterMarkersType(this.value);">
+    <select id="type" onchange="filterMarkersType(this.value); Materialize.toast('Filtered!', 2000);">
         <option value="">Spot type</option>
         <option value="Field">Field</option>
         <option value="Park">Park</option>
@@ -66,7 +76,16 @@
 
    <li><div class="divider"></div></li>
    <li><a class="subheader">More</a></li>
+   <li><a class="modal-trigger" href="#modal1"><i class="material-icons">add</i>Add a spot</a></li>
+
    <li><a class="modal-trigger" href="#modalAbout"><i class="material-icons">info</i>About</a></li>
+
+   <div class="card-panel green lighten-4 green-text text-darken-4"><b>Tip!</b> Use control or command + scroll to zoom in and out.</div>
+
+      <div class="card-panel blue lighten-4 blue-text text-darken-4"><b>Welcome!</b> BandoMap is currently in Beta. Visit the <a href="https://github.com/mAzurkovic/BandoMap">
+      GitHub repo</a> to contribute to the project.</div>
+
+
  </ul>
 
 {{{body}}}