Skip to content

Commit

Permalink
Responsive columns
Browse files Browse the repository at this point in the history 
Added a col-responsive class so table columns can hide themselves on
tiny screns. Also pointed some services to different endpoints.
  • Loading branch information
@tobinbradley
tobinbradley committed Oct 27, 2015
1 parent 85418f6 commit 0e809d0
Show file tree
Hide file tree
Showing 10 changed files with 127 additions and 133 deletions.
8 changes: 8 additions & 0 deletions app/css/reports.css
View file
@@ -1,6 +1,14 @@
.report-container {
padding: 32px;
}
@media (max-width: 500px) {
.report-container {
padding: 15px;
}
.col-responsive {
display: none;
}
}

/*tables*/
.report-container table {
Expand Down
4 changes: 2 additions & 2 deletions app/index.html
View file
Expand Up @@ -60,11 +60,11 @@
</header>
<nav class="navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link active" data-type="property" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-home" role="presentation"></i>Property</a>
<a class="mdl-navigation__link" data-type="schools" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-school" role="presentation"></i>Schools</a>
<a class="mdl-navigation__link" data-type="trash" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-trash" role="presentation"></i>Trash and Recycling</a>
<a class="mdl-navigation__link" data-type="schools" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-school" role="presentation"></i>Schools</a>
<a class="mdl-navigation__link" data-type="voting" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-check" role="presentation"></i>Voting</a>
<a class="mdl-navigation__link" data-type="environment" data-layers="postgis:view_regulated_floodplains,postgis:water_quality_buffers" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-droplet" role="presentation"></i>Environment</a>
<a class="mdl-navigation__link" data-type="impervious" data-layers="impervious_surface" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-rain-1" role="presentation"></i>Impervious Surface</a>
<a class="mdl-navigation__link" data-type="voting" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-check" role="presentation"></i>Voting</a>
<a class="mdl-navigation__link" data-type="parks" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-tree-2" role="presentation"></i>Parks</a>
<a class="mdl-navigation__link" data-type="libraries" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-library" role="presentation"></i>Libraries</a>
<div class="mdl-layout-spacer"></div>
Expand Down
8 changes: 4 additions & 4 deletions app/js/modules/environment.js
View file
Expand Up @@ -183,14 +183,14 @@ var WaterQualityComponent = React.createClass({
</div>
);
}
}
}

return (
return (
<div>
{returnVal}
</div>
);
}
}
});


Expand Down Expand Up @@ -237,7 +237,7 @@ var SoilComponent = React.createClass({
{returnVal}
</div>
);
}
}
});


Expand Down
10 changes: 5 additions & 5 deletions app/js/modules/impervious.js
View file
Expand Up @@ -19,13 +19,13 @@ var ImperviousInfo = React.createClass({
},
getImpervious: function(pid) {
var args = {
'table': 'impervious_surface_area',
'fields': 'sum(sum_of_area) as area, subtheme',
'parameters': `commonpid='${pid}' group by subtheme`,
'order': 'subtheme'
'columns': 'sum(sum_of_area) as area, subtheme',
'filter': `commonpid='${pid}'`,
'sort': 'subtheme',
'group': 'subtheme'
};
httpplease = httpplease.use(jsonresponse);
httpplease.get('http://maps.co.mecklenburg.nc.us/rest/v4/ws_geo_attributequery.php' + objectToURI(args),
httpplease.get('http://maps.co.mecklenburg.nc.us/api/query/v1/impervious_surface_area' + objectToURI(args),
function(err, res) {
this.setState({ theImpervious: res.body });
}.bind(this)
Expand Down
10 changes: 3 additions & 7 deletions app/js/modules/library.js
View file
Expand Up @@ -20,16 +20,12 @@ var LibraryInfo = React.createClass({
},
getLibraries: function(lat, lng) {
var args = {
'x': lng,
'y': lat,
'srid': 4326,
'table': 'libraries',
'geometryfield': 'the_geom',
'fields': 'name, address, city, st_x(st_transform(the_geom, 4326)) as lng, st_y(st_transform(the_geom, 4326)) as lat',
'geom_column': 'the_geom',
'columns': 'name, address, city, st_x(st_transform(the_geom, 4326)) as lng, st_y(st_transform(the_geom, 4326)) as lat',
'limit': '6'
};
httpplease = httpplease.use(jsonresponse);
httpplease.get('http://maps.co.mecklenburg.nc.us/rest/v2/ws_geo_nearest.php' + objectToURI(args),
httpplease.get(`http://maps.co.mecklenburg.nc.us/api/nearest/v1/libraries/${lng},${lat}/4326` + objectToURI(args),
function(err, res) {
this.setState({ theLibraries: res.body });
}.bind(this)
Expand Down
9 changes: 2 additions & 7 deletions app/js/modules/parks.js
View file
Expand Up @@ -20,16 +20,11 @@ var ParkInfo = React.createClass({
},
getParks: function(lat, lng) {
var args = {
'x': lng,
'y': lat,
'srid': 4326,
'table': 'parks_all',
'geometryfield': 'geom',
'fields': 'name, address, city, st_x(st_transform(geom, 4326)) as lng, st_y(st_transform(geom, 4326)) as lat',
'columns': 'name, address, city, st_x(st_transform(geom, 4326)) as lng, st_y(st_transform(geom, 4326)) as lat',
'limit': '6'
};
httpplease = httpplease.use(jsonresponse);
httpplease.get('http://maps.co.mecklenburg.nc.us/rest/v2/ws_geo_nearest.php' + objectToURI(args),
httpplease.get(`http://maps.co.mecklenburg.nc.us/api/nearest/v1/parks_all/${lng},${lat}/4326` + objectToURI(args),
function(err, res) {
this.setState({ theParks: res.body });
}.bind(this)
Expand Down
36 changes: 18 additions & 18 deletions app/js/modules/property.js
View file
Expand Up @@ -197,8 +197,8 @@ var AppraisalClass = React.createClass({
<tr>
<th className="mdl-data-table__cell--non-numeric">Year</th>
<th>Building</th>
<th>Land</th>
<th>Extra</th>
<th className="col-responsive">Land</th>
<th className="col-responsive">Extra</th>
<th>Total</th>
</tr>
</thead>
Expand All @@ -213,10 +213,10 @@ var AppraisalClass = React.createClass({
<td>
{this.money(object.building_value)}
</td>
<td>
<td className="col-responsive">
{this.money(object.land_value)}
</td>
<td>
<td className="col-responsive">
{this.money(object.extra_features_value)}
</td>
<td>
Expand Down Expand Up @@ -254,8 +254,8 @@ var SalesClass = React.createClass({
<tr>
<th className="mdl-data-table__cell--non-numeric">Date</th>
<th>Price</th>
<th className="mdl-data-table__cell--non-numeric">Deed Book</th>
<th className="mdl-data-table__cell--non-numeric">Legal Reference</th>
<th className="mdl-data-table__cell--non-numeric col-responsive">Deed Book</th>
<th className="mdl-data-table__cell--non-numeric col-responsive">Legal Reference</th>
</tr>
</thead>
<tbody>
Expand All @@ -269,10 +269,10 @@ var SalesClass = React.createClass({
<td>
{this.money(Number(object.sale_price).toFixed(0))}
</td>
<td className="mdl-data-table__cell--non-numeric">
<td className="mdl-data-table__cell--non-numeric col-responsive">
{object.deed_book}
</td>
<td className="mdl-data-table__cell--non-numeric">
<td className="mdl-data-table__cell--non-numeric col-responsive">
{object.legal_reference}
</td>
</tr>
Expand Down Expand Up @@ -301,7 +301,7 @@ var LandUseClass = React.createClass({
<tr>
<th className="mdl-data-table__cell--non-numeric">Use</th>
<th>Units</th>
<th className="mdl-data-table__cell--non-numeric">Neighborhood</th>
<th className="mdl-data-table__cell--non-numeric col-responsive">Neighborhood</th>
</tr>
</thead>
<tbody>
Expand All @@ -315,7 +315,7 @@ var LandUseClass = React.createClass({
<td>
{Number(object.units).toFixed(0)}
</td>
<td className="mdl-data-table__cell--non-numeric">
<td className="mdl-data-table__cell--non-numeric col-responsive">
{object.neighborhood}
</td>
</tr>
Expand Down Expand Up @@ -351,10 +351,10 @@ var BuildingsClass = React.createClass({
<tr>
<th className="mdl-data-table__cell--non-numeric">Structure</th>
<th>Year Built</th>
<th className="mdl-data-table__cell--non-numeric">Exterior</th>
<th className="mdl-data-table__cell--non-numeric col-responsive">Exterior</th>
<th className="mdl-data-table__cell--non-numeric">Area</th>
<th>Beds</th>
<th>Baths</th>
<th className="col-responsive">Beds</th>
<th className="col-responsive">Baths</th>
</tr>
</thead>
<tbody>
Expand All @@ -368,16 +368,16 @@ var BuildingsClass = React.createClass({
<td>
{object.year_built}
</td>
<td className="mdl-data-table__cell--non-numeric">
<td className="mdl-data-table__cell--non-numeric col-responsive">
{object.exterior_wall_description}
</td>
<td>
{this.commafy(object.total_square_feet)} ft<sup>2</sup>
</td>
<td>
<td className="col-responsive">
{object.bedrooms}
</td>
<td>
<td className="col-responsive">
{Number(object.full_baths) + Number(object.three_quarter_baths) + Number(object.half_baths)}
</td>
</tr>
Expand Down Expand Up @@ -414,7 +414,7 @@ var PermitsClass = React.createClass({
<tr>
<th className="mdl-data-table__cell--non-numeric">Year</th>
<th className="mdl-data-table__cell--non-numeric">Project</th>
<th>Area</th>
<th className="col-responsive">Area</th>
<th>Cost</th>
</tr>
</thead>
Expand All @@ -429,7 +429,7 @@ var PermitsClass = React.createClass({
<td className="mdl-data-table__cell--non-numeric">
{object.project_name}
</td>
<td>
<td className="col-responsive">
{this.commafy(object.square_footage)} ft<sup>2</sup>
</td>
<td>
Expand Down
5 changes: 2 additions & 3 deletions app/js/modules/search.js
View file
Expand Up @@ -22,11 +22,10 @@ var SearchTemplate = React.createClass({
this.timer = this.setTimeout( function() {
if (query.trim().length >= 3) {
var args = {
'searchtypes': 'address,park,library,school,pid,business',
'query': query
'tables': 'address,park,library,school,pid,business'
};
httpplease = httpplease.use(jsonresponse);
httpplease.get('http://maps.co.mecklenburg.nc.us/rest/v5/ws_geo_ubersearch.php' + objectToURI(args),
httpplease.get(`http://maps.co.mecklenburg.nc.us:80/api/search/v1/${query}` + objectToURI(args),
function(err, data) {
this.setState({ searchData: data.body });
}.bind(this)
Expand Down
12 changes: 4 additions & 8 deletions app/js/modules/trash.js
View file
Expand Up @@ -23,15 +23,11 @@ var TrashInfo = React.createClass({
},
getTrash: function(lat, lng) {
var args = {
'x': lng,
'y': lat,
'srid': 4326,
'table': 'solid_waste',
'geometryfield': 'the_geom',
'fields': 'jurisdiction, day, week, type'
'geom_column': 'the_geom',
'columns': 'jurisdiction, day, week, type'
};
httpplease = httpplease.use(jsonresponse);
httpplease.get('http://maps.co.mecklenburg.nc.us/rest/v3/ws_geo_pointoverlay.php' + objectToURI(args),
httpplease.get(`http://maps.co.mecklenburg.nc.us:80/api/intersect_point/v1/solid_waste/${lng},${lat}/4326` + objectToURI(args),
function(err, res) {
this.setState({ theTrash: res.body });
}.bind(this)
Expand Down Expand Up @@ -145,7 +141,7 @@ var TrashInfo = React.createClass({
<i className="icon icon-recycle" role="presentation"></i>
<h2>Your RECYCLING day is</h2>
<h1>{recycling[0].day.toUpperCase()} {this.recyclingWeek(recycling[0].week)}</h1>
<h4>Recycling pickup is every other week.</h4>
<h4>Recycling pickup is every other week ({recycling[0].week})</h4>
</div>
</div>
</div>
Expand Down

0 comments on commit 0e809d0

Please sign in to comment.