Skip to content

Commit

Permalink
More small updates. Remove all the modal stuff.
Browse files Browse the repository at this point in the history
  • Loading branch information
@metasyn
metasyn authored and Xander Johnson committed Feb 20, 2018
1 parent 3115f4a commit affab75
Show file tree
Hide file tree
Showing 4 changed files with 564 additions and 130 deletions.
131 changes: 36 additions & 95 deletions src/css/stylish.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,39 @@ body {
}

.button-container {
margin: 10px auto;
width: 90%;
margin: 5%;
}

.button {
background-color: #4CAF50; /* Green */
display: block;
border: none;
width: 100%;
border-radius: 3px;
background-color: #4CAF50; /* Green */
color: white;
padding: 15px 32px;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-bottom: 5%;
}

#hide-filter-button {
background-color: black;
}

.hidden {
display: none !important;
}

#date-selector-container {
font-size: 16px;
display: grid;
justify-content: center;
grid-template-rows: repeat(5, 25px);
grid-template-columns: 25% 25%;
margin-left: 5%;
margin-bottom: 5%;
grid-template-rows: repeat(5, auto);
grid-template-columns: auto auto;
grid-auto-flow: column;
grid-auto-columns: 50% 50%;
}
Expand Down Expand Up @@ -124,90 +133,6 @@ body {
}


/* Modal stuff */

.modal {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
.close-filter-modal {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

.close-filter-modal:hover,
.close-filter-modal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 5px ;
background-color: #5cb85c;
color: white;
height: 35px;
font-size: 20px;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#filterModal .buttons {
display: flex;
justify-content: space-evenly;
padding: 20px;
text-align: center;
}

#filterModal .buttons a {
margin: 20px;
}


/* Media */

@media only screen and (max-device-width: 580px) {
Expand Down Expand Up @@ -249,8 +174,24 @@ body {
font-size: 64px;
}

#filterModal .buttons {
display: flex;
flex-direction: column;
}
}

/* Checkbox larger */

@supports (zoom:2) {
input[type=checkbox]{
zoom: 1.5;
}
}
@supports not (zoom:2) {
input[type=checkbox]{
transform: scale(1.5);
margin: 15px;
}
}
label{
/* fix vertical align issues */
display: inline-block;
vertical-align: top;
margin-top: 10px;
}
40 changes: 14 additions & 26 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,40 +31,28 @@

<div class='button-container'>
<a href='#' id='filter-button' class='button overlay-item'>Filter shows</a>
<a href='#' id='hide-filter-button' class='hidden button overlay-item'>Hide filters</a>
</div>


<div id='feature-listing' class='listing'>
<div id="filters" class="hidden">
<div class="button-container">
<a href='#' id='filter-all' class='button'>All Shows</a>
<a href='#' id='filter-today' class='button'>Today</a>
<a href='#' id='filter-tomorrow' class='button'>Tomorrow</a>
</div>
<div>
<div id='date-selector-container'>
</div>
</div>
</div>


<div id="filterModal" class="hidden modal">
<!-- Modal content -->

<div id='feature-listing' class='listing'>
</div>
</div>

<div class="modal-content">
<div class="modal-header">
<span class="close-filter-modal">&#215;</span>
<h1>Filter shows by date</h1>
</div>


<div class="modal-body">
<div class="buttons">
<a href='#' id='filter-all' class='button'>All Shows</a>
<a href='#' id='filter-today' class='button'>Today</a>
<a href='#' id='filter-tomorrow' class='button'>Tomorrow</a>
</div>
<div>
<div id='date-selector-container'>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js' type="text/javascript">
</script>
</body>
Expand Down
34 changes: 25 additions & 9 deletions src/js/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,14 @@ class Application extends Component {
this.toggleCheckbox = this.toggleCheckbox.bind(this);
this.state = {
dates: [],
filtered: {
date: [],
onscreen: [],
searched: [],
}
};

this.allShows = [];
this.onscreenShows = [];

this.popup = new mapboxgl.Popup({
Expand All @@ -51,6 +57,7 @@ class Application extends Component {
parsed.then((data) => {
// Set the selected dates
this.setState({ dates: data.dates });
this.allShows = data.geojson.features;

// Add the dates
const dateEl = document.getElementById('date-selector-container');
Expand All @@ -63,11 +70,15 @@ class Application extends Component {

// Modals
$('#filter-button').on('click', () => {
$('#filterModal').toggleClass('hidden');
$('#filter-button').toggleClass('hidden');
$('#hide-filter-button').toggleClass('hidden');
$('#filters').toggleClass('hidden');
});

$('.close-filter-modal').on('click', () => {
$('#filterModal').toggleClass('hidden');
$('#hide-filter-button').on('click', () => {
$('#filter-button').toggleClass('hidden');
$('#hide-filter-button').toggleClass('hidden');
$('#filters').toggleClass('hidden');
});

// Mobile only
Expand All @@ -91,7 +102,7 @@ class Application extends Component {
const checkedDatesList = _.map(checkedDates, 'date');

// Filter
const filtered = this.onscreenShows.filter(feature =>
this.state.filtered.date = this.allShows.filter(feature =>
_.includes(checkedDatesList, feature.properties.date));

// Set filter for points
Expand All @@ -100,10 +111,10 @@ class Application extends Component {
// Update source, for clusters
this.map.getSource('shows').setData({
type: 'FeatureCollection',
features: filtered,
features: this.state.filtered.date,
});

this.renderListings(this.map, filtered);
this.renderListings(this.map, this.state.filtered.date);
}
}

Expand Down Expand Up @@ -143,7 +154,7 @@ class Application extends Component {
type: 'circle',
source: 'shows',
paint: {
'circle-color': '#11b4da',
'circle-color': '#4CAF50',
'circle-radius': 10,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
Expand Down Expand Up @@ -183,7 +194,7 @@ class Application extends Component {

// Store the current features in sn `onscreenShows` variable to
// later use for filtering on `keyup`.
this.onscreenShows = uniqueFeatures;
this.state.filtered.onscreen = uniqueFeatures;
}
};

Expand Down Expand Up @@ -212,7 +223,7 @@ class Application extends Component {
}

// Filter visible features that don't match the input value.
const filtered = this.onscreenShows.filter((feature) => {
const filtered = this.state.filtered.onscreen.filter((feature) => {
const selected = _.includes(getCheckedDatesList(), feature.properties.date);
const match = (x) => {
const prop = Util.normalize(feature.properties[x]);
Expand All @@ -234,6 +245,8 @@ class Application extends Component {
// Set the filter to populate features into the layer.
const filteredShows = filtered.map(feature => feature.properties.sid);
map.setFilter('shows', ['in', 'sid'].concat(filteredShows));

this.state.filtered.searched = filtered;
});

// Call this function on initialization
Expand Down Expand Up @@ -330,13 +343,15 @@ class Application extends Component {
const prop = feature.properties;
const item = document.createElement('p');
item.textContent = prop.showString;

const venue = `<h1>${prop.venue}</h1><br/>`;
item.addEventListener('mouseover', () => {
// Highlight corresponding feature on the map
this.popup.setLngLat(feature.geometry.coordinates)
.setHTML(venue + prop.showHTML)
.addTo(map);
});

this.listingEl.appendChild(item);
});

Expand All @@ -346,6 +361,7 @@ class Application extends Component {
const empty = document.createElement('p');
const text = this.filterEl.value === '' ? 'Drag the map to populate results' : 'No shows match criteria.';
empty.textContent = text;

this.listingEl.appendChild(empty);

// Hide the filter input
Expand Down
Loading

0 comments on commit affab75

Please sign in to comment.