Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stubbing out results view #58

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions lib/client/components/NavHeader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
'use strict';
import React from 'react';

export default class NavHeader extends React.Component {

render() {
return (
<header>
<a href="/" className="search">
<i className="fa fa-search fa-2x"></i>
</a>
<a href="#" className="feedback">
<i className="fa fa-comments-o fa-2x"></i>
</a>
<h1>Frontier</h1>
</header>
);
}
};
23 changes: 23 additions & 0 deletions lib/client/components/ResultItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use strict';
import React from 'react';
import ResultModal from './ResultModal.jsx';

export default class ResultItem extends React.Component {
render() {
return (
<div>
<div className="left">
<h3>Cotton Row</h3>

<p>0.2 miles away</p>
</div>
<div className="right">
<a href="#" data-toggle="modal" data-target="#myModal">
<i className="fa fa-info-circle fa-2x"></i>
</a>
</div>
<ResultModal></ResultModal>
</div>
);
}
}
22 changes: 22 additions & 0 deletions lib/client/components/ResultList.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use strict';
import React from 'react';
import ResultItem from './ResultItem.jsx';

export default class ResultList extends React.Component {

render() {
return (
<li>
<div className="list-title">
<i className="fa fa-cutlery fa-2x"></i>
<h2>Restaurants</h2>
</div>
<ul>
<li><ResultItem></ResultItem></li>
<li><ResultItem></ResultItem></li>
<li><ResultItem></ResultItem></li>
</ul>
</li>
);
}
};
100 changes: 100 additions & 0 deletions lib/client/components/ResultModal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
'use strict';
import React from 'react';

export default class ResultModal extends React.Component {
render() {
return (
<div id="myModal" className="modal fade" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">
<i className="fa fa-times-circle"></i>
</button>
<div className="modal-title">
<i className="fa fa-cutlery fa-2x"></i>

<h3 className="modal-title">Cotton Row</h3>
</div>
</div>
<div className="modal-body">
<ul className="address">
<li>6275 University Dr NW</li>
<li>Huntsville, AL</li>
<li>(256) 922-0189</li>
</ul>
<ul className="bullets">
<li>Open now til 11pm</li>
<li>Accepts Reservations</li>
<li>
<span>Health Rating:</span>
<ul className="modal-icons stars">
<li>
<i className="fa fa-star fa-2x"></i>
</li>
<li>
<i className="fa fa-star fa-2x"></i>
</li>
<li>
<i className="fa fa-star fa-2x"></i>
</li>
<li>
<i className="fa fa-star fa-2x"></i>
</li>
<li>
<i className="fa fa-star-o fa-2x"></i>
</li>
</ul>
</li>
<li>
<span>Yelp Rating:</span>
<ul className="modal-icons stars">
<li><i className="fa fa-star fa-2x"></i>
</li>
<li><i className="fa fa-star fa-2x"></i>
</li>
<li><i className="fa fa-star fa-2x"></i>
</li>
<li><i className="fa fa-star fa-2x"></i>
</li>
<li><i className="fa fa-star fa-2x"></i>
</li>
</ul>
</li>
<li>
<span>Price:</span>
<ul className="modal-icons dollars">
<li><i
className="fa fa-dollar fa-2x"></i>
</li>
<li><i
className="fa fa-dollar fa-2x"></i>
</li>
<li><i
className="fa fa-dollar fa-2x"></i>
</li>
<li><i
className="fa fa-dollar fa-2x"></i>
</li>
</ul>
</li>
</ul>
</div>
<div className="modal-footer">
<button type="button"
className="btn btn-primary btn-block">
View
on Map
</button>
<button type="button"
className="btn btn-primary btn-block">
Get
Directions
</button>
</div>
</div>
</div>
</div>
);
}
}
60 changes: 60 additions & 0 deletions lib/client/components/ResultsView.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
'use strict';
import React from 'react';
import NavHeader from './NavHeader.jsx';
import ResultList from './ResultList.jsx'

var getResultsState = function () {
// TODO get list store/s
};

export default class ResultsView extends React.Component {

constructor(props) {
super(props);

this.state = getResultsState();
this._onChange = this._onChange.bind(this);
}

componentDidMount() {
// listen to store/s
}

componentWillUnmount() {
// unlisten to store/s
}

_onChange() {
this.setState(getResultsState());
}

render() {
return (
<div>
<NavHeader></NavHeader>
<div className="container-fluid">
<div className="row">
<div className="col-sm-6 col-sm-offset-3 inner-page">
<div className="row">
<div className="col-xs-12 list-view">
<ul>
<li>
<ResultList></ResultList>
</li>
</ul>
</div>
</div>
<div className="row">
<div className="col-xs-12 map-view">
<button className="btn btn-primary btn-block">
Map View
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
2 changes: 2 additions & 0 deletions lib/client/index.jsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import Router from 'react-router';
import { DefaultRoute, Route, RouteHandler } from 'react-router';
import RestaurantList from './components/RestaurantList.jsx';
import HomeView from './components/HomeView.jsx';
import ResultsView from './components/ResultsView.jsx';

React.initializeTouchEvents(true);

@@ -20,6 +21,7 @@ class App extends React.Component {
let routes = (
<Route name="app" path="/" handler={App}>
<DefaultRoute handler={HomeView} />
<Route path="results" handler={ResultsView}/>
</Route>
);

21 changes: 21 additions & 0 deletions lib/client/util/results.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"results": [
{
"name": "Cotton Row",
"distance": "0.2",
"address": {
"street": "6275 University Drive NW",
"city": "Huntsville",
"state": "Alabama"
},
"telephone": "(256) 922-0189"
"info": [
"Open now til 11pm",
"Accepts Reservations",
"Health Rating: 4 / 5",
"Yelp Rating: 5 / 5",
"Price: $$$$"
]
}
]
}
16 changes: 9 additions & 7 deletions lib/server/views/home.ejs
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<!DOCTYPE html>
<html>
<head lang="en">
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="style.css">
<title>Frontier</title>
</head>
<body>
<div id="outlet"></div>
<script src="build/build.js"></script>
</body>
</head>
<body>
<div id="outlet"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="build/build.js"></script>
</body>
</html>
173 changes: 173 additions & 0 deletions public/style.css
Original file line number Diff line number Diff line change
@@ -20,3 +20,176 @@ body {
background-color: #eee;
cursor: pointer;
}

.slider {
width: 100%;
}

#categories i.fa {
display: inline-block;
border: 1px solid #ccc;
padding: 0.4em;
border-radius: 4px;
background-color: white;
margin-right: 0.5em;
margin-bottom: 0.5em;
text-align: center;
width: 2em;
height: 2em;
}

ol, ul {
list-style: none;
}

body {
text-align: left;
background-color: #eee
}

header {
background: #fff;
border-bottom: 1px solid #000;
padding: 1em 0;
overflow: hidden;
}

header a {
border: 1px solid #aaa;
box-shadow: 1px 1px 1px #000;
padding: 0.5em;
display: block;
}

header a.search {
float: left;
margin-left: 1em;
}

header a.feedback {
float: right;
margin-right: 1em;
}

header i {
color: #000;
font-size: 1.2em;
}

header H1 {
text-align: center;
width: 100%;
margin: 0;
}

.list-title {
border-bottom: 1px solid #ccc;
}

.list-title i {
font-size: 2em;
display: block;
float: left;
margin-right: 0.5em;
}

.list-view ul {
padding-left: 0;
}

.list-view ul li {
border: none;
overflow: hidden;
}

.list-view ul li ul li {
padding: .8em 0;
border-bottom: 1px solid #ccc;
}

.list-view ul li .left {
float: left;
}

.list-view ul li .left H3 {
margin: 0 0 0.1em;
}

.list-view ul li .left p {
margin: 0;
}

.list-view ul li .right {
float: right;
}

.list-view ul li .right a {
border: 1px solid #aaa;
box-shadow: 1px 1px 1px #000;
padding: 0.5em;
display: block;
background: #fff;
}

.list-view ul li .right a i {
color: #000;
font-size: 2em;
}

.list-view .modal-title {
line-height: 1;
}

.list-view .modal-title i {
float: left;
display: block;
margin-right: 0.5em;
font-size: 1.5em;
line-height: 1.2;
}

.list-view .modal-header button.close {
opacity: 1;
font-size: 2em;
}

.list-view .modal-body li {
border: none;
padding: 0;
overflow: visible;
}

.list-view .modal-body ul.bullets {
list-style-type: disc;
padding: 1em 0 0 1.2em;
}

.list-view .modal-body ul.bullets li span {
margin-right: 0.3em;
}

.list-view .modal-body ul.bullets .modal-icons {
display: inline-block;
}

.list-view .modal-body ul.bullets .modal-icons li {
display: inline-block;
}

.list-view .modal-body ul.bullets .modal-icons li i {
font-size: 1.2em;
}

.list-view .modal-body ul.bullets .modal-icons.dollars li i {
font-size: 1em;
}

.list-view .modal-footer button {
float: right;
width: 49%;
margin: 0;
}

.list-view .modal-footer button:first-child {
float: left;
}