Skip to content

Commit

Permalink
finish styles and prepare for beta release
Browse files Browse the repository at this point in the history
  • Loading branch information
@mAzurkovic
mAzurkovic committed Jan 3, 2018
1 parent 2e38371 commit 2666568
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 32 deletions.
27 changes: 26 additions & 1 deletion public/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
margin: 0 auto;
}

#text {
font-size: 16px;
}

#title {
font-weight: bold;
font-size: 20px;
Expand All @@ -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;
}
4 changes: 3 additions & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
59 changes: 34 additions & 25 deletions views/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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);
}
}
Expand All @@ -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
Expand Down
29 changes: 24 additions & 5 deletions views/layout.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@

<body>

<div class="navbar-fixed">
<nav class="deep-purple darken-1">
<div class="nav-container">
<div class="nav-wrapper">
Expand All @@ -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>
Expand All @@ -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}}}
Expand Down

0 comments on commit 2666568

Please sign in to comment.