(this.mapNode = map)}
73 | />
74 | );
75 | }
76 | }
77 |
78 | export default withRouter(BusinessMap);
79 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/photo_show.scss:
--------------------------------------------------------------------------------
1 | .photo-modal {
2 | position: fixed;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | right: 0;
7 | display: flex;
8 | justify-content: center;
9 | flex-direction: column;
10 | z-index: 1;
11 | background-image: image_url("transpBlack75.png");
12 | }
13 |
14 | .photo-content {
15 | background-image: image_url("transpBlack90.png");
16 | display: flex;
17 | // width: 1100px;
18 | width: 900px;
19 | max-height: 905px;
20 |
21 | z-index: 2;
22 | // min-width: 962px;
23 | min-height: 615px;
24 | margin-top: 50px;
25 | margin-bottom: 50px;
26 | margin: 0 auto;
27 | border-radius: 5px;
28 | }
29 |
30 | .photo-of-photo-show {
31 | position: relative;
32 | // width: 550px;
33 | width: 1000px;
34 | height: 615px;
35 | }
36 |
37 | .photo-image-show {
38 | z-index: 2;
39 | height: 100%;
40 | object-fit: cover;
41 | }
42 |
43 | .photo-image-show:hover {
44 | cursor: pointer;
45 | }
46 |
47 | .left-scroll {
48 | z-index: 3;
49 | color: white;
50 | font-size: 60px;
51 | // width: 10%;
52 | width: 20%;
53 | text-align: center;
54 | }
55 |
56 | .fa-angle-right {
57 | padding-top: 250%;
58 | }
59 | .fa-angle-left {
60 | padding-top: 250%;
61 | }
62 |
63 |
64 | .left-scroll:hover {
65 | cursor: pointer;
66 | }
67 | .right-scroll:hover {
68 | cursor: pointer;
69 | }
70 |
71 | .right-scroll {
72 | z-index: 3;
73 | color: white;
74 | font-size: 60px;
75 | // width: 10%;
76 | width: 20%;
77 | text-align: center;
78 | }
79 |
80 | .close-modal {
81 | float: right;
82 | color: #666666;
83 | font-family: sans-serif;
84 | font-size: 16px;
85 | display: inline-block;
86 | margin-bottom: 8px;
87 | }
88 |
89 | .close-container {
90 | // width: 1100px;
91 | width: 900px;
92 | margin: 0 auto;
93 | }
94 |
95 | .close-modal i {
96 | margin-left: 5px;
97 | }
98 | .close-modal:hover {
99 | cursor: pointer;
100 | color: white;
101 | }
102 |
103 | .trans-photo-bar {
104 | position: absolute;
105 | bottom: 0;
106 | min-width: 100%;
107 | min-height: 20px;
108 | z-index: 4;
109 | background-image: image_url("transpBlack75.png");
110 | color: #666666;
111 | font-family: sans-serif;
112 | text-align: center;
113 | font-size: 12px;
114 | padding-top: 10px;
115 | }
116 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | ruby "2.6.5"
3 |
4 | git_source(:github) do |repo_name|
5 | repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
6 | "https://github.com/#{repo_name}.git"
7 | end
8 |
9 | gem 'mimemagic', github: 'mimemagicrb/mimemagic', ref: '01f92d86d15d85cfd0f20dabd025dcbd36a8a60f'
10 | # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
11 | gem 'rails', '~> 5.1.4'
12 | gem 'font-awesome-rails'
13 | # Use postgresql as the database for Active Record
14 | gem 'pg', '~> 0.18'
15 | # Use Puma as the app server
16 | gem 'puma', '~> 3.7'
17 | # Use SCSS for stylesheets
18 | gem 'sass-rails', '~> 5.0'
19 | # Use Uglifier as compressor for JavaScript assets
20 | gem 'uglifier', '>= 1.3.0'
21 | # See https://github.com/rails/execjs#readme for more supported runtimes
22 | # gem 'therubyracer', platforms: :ruby
23 |
24 | # Use CoffeeScript for .coffee assets and views
25 | gem 'coffee-rails', '~> 4.2'
26 | # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
27 | gem 'jbuilder', '~> 2.5'
28 | # Use Redis adapter to run Action Cable in production
29 | # gem 'redis', '~> 3.0'
30 | # Use ActiveModel has_secure_password
31 | gem 'bcrypt', '~> 3.1.7'
32 | gem 'Indirizzo', require: "indirizzo"
33 | # Use Capistrano for deployment
34 | # gem 'capistrano-rails', group: :development
35 | gem "paperclip", '~> 5.0.0'
36 | gem 'figaro'
37 | gem 'aws-sdk', '< 3.0'
38 | gem 'jquery-rails'
39 | group :development, :test do
40 | # Call 'byebug' anywhere in the code to stop execution and get a debugger console
41 | gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
42 | # Adds support for Capybara system testing and selenium driver
43 | gem 'capybara', '~> 2.13'
44 | gem 'selenium-webdriver'
45 | gem 'better_errors'
46 | gem 'binding_of_caller'
47 | gem 'pry-rails'
48 | gem 'annotate'
49 | end
50 |
51 | group :development do
52 | # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
53 | gem 'web-console', '>= 3.3.0'
54 | gem 'listen', '>= 3.0.5', '< 3.2'
55 | # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
56 | gem 'spring'
57 | gem 'spring-watcher-listen', '~> 2.0.0'
58 | end
59 |
60 | # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
61 | gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
62 |
--------------------------------------------------------------------------------
/config/puma.rb:
--------------------------------------------------------------------------------
1 | # Puma can serve each request in a thread from an internal thread pool.
2 | # The `threads` method setting takes two numbers: a minimum and maximum.
3 | # Any libraries that use thread pools should be configured to match
4 | # the maximum value specified for Puma. Default is set to 5 threads for minimum
5 | # and maximum; this matches the default thread size of Active Record.
6 | #
7 | threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
8 | threads threads_count, threads_count
9 |
10 | # Specifies the `port` that Puma will listen on to receive requests; default is 3000.
11 | #
12 | port ENV.fetch("PORT") { 3000 }
13 |
14 | # Specifies the `environment` that Puma will run in.
15 | #
16 | environment ENV.fetch("RAILS_ENV") { "development" }
17 |
18 | # Specifies the number of `workers` to boot in clustered mode.
19 | # Workers are forked webserver processes. If using threads and workers together
20 | # the concurrency of the application would be max `threads` * `workers`.
21 | # Workers do not work on JRuby or Windows (both of which do not support
22 | # processes).
23 | #
24 | # workers ENV.fetch("WEB_CONCURRENCY") { 2 }
25 |
26 | # Use the `preload_app!` method when specifying a `workers` number.
27 | # This directive tells Puma to first boot the application and load code
28 | # before forking the application. This takes advantage of Copy On Write
29 | # process behavior so workers use less memory. If you use this option
30 | # you need to make sure to reconnect any threads in the `on_worker_boot`
31 | # block.
32 | #
33 | # preload_app!
34 |
35 | # If you are preloading your application and using Active Record, it's
36 | # recommended that you close any connections to the database before workers
37 | # are forked to prevent connection leakage.
38 | #
39 | # before_fork do
40 | # ActiveRecord::Base.connection_pool.disconnect! if defined?(ActiveRecord)
41 | # end
42 |
43 | # The code in the `on_worker_boot` will be called if you are using
44 | # clustered mode by specifying a number of `workers`. After each worker
45 | # process is booted, this block will be run. If you are using the `preload_app!`
46 | # option, you will want to use this block to reconnect to any threads
47 | # or connections that may have been created at application boot, as Ruby
48 | # cannot share connections between processes.
49 | #
50 | # on_worker_boot do
51 | # ActiveRecord::Base.establish_connection if defined?(ActiveRecord)
52 | # end
53 | #
54 |
55 | # Allow puma to be restarted by `rails restart` command.
56 | plugin :tmp_restart
57 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/photo-index.scss:
--------------------------------------------------------------------------------
1 | .container-photo-index {
2 | display: flex;
3 | justify-content: center;
4 | }
5 |
6 | .main-photo-index {
7 | margin-left: 27px;
8 | align-self: center;
9 | }
10 |
11 | .title-biz-index {
12 | font-size: 27px;
13 | font-family: sans-serif;
14 | font-weight: bold;
15 | display: flex;
16 | margin-top: 45px;
17 | }
18 | .title-biz-index :last-child {
19 | margin-left: 8px;
20 | }
21 |
22 | .photo-index-ul {
23 | list-style-type: none;
24 | max-width: 975px;
25 | margin-bottom: 40px;
26 | }
27 |
28 | .photo-index-header-container {
29 | max-width: 965px;
30 | display: flex;
31 | justify-content: space-between;
32 | margin-top: 10px;
33 | padding-bottom: 45px;
34 | border-bottom: 1px solid #E6E6E6;
35 | margin-bottom: 13px;
36 | }
37 |
38 | .index-image {
39 | height: 150px;
40 | width: 150px;
41 | border-radius: 5px;
42 | object-fit: cover;
43 | }
44 |
45 | .biz-info-photo-index {
46 | display: flex;
47 | }
48 |
49 | .rating-and-reviews-photo-index {
50 | display: flex;
51 | }
52 |
53 | .index-li {
54 | margin: 6px;
55 | height: 150px;
56 | width: 150px;
57 | position: relative;
58 | box-sizing: border-box;
59 | display: inline-block;
60 | }
61 |
62 | .index-li:hover {
63 | cursor: pointer;
64 | }
65 |
66 | .biz-image-photo-index {
67 | height: 30px;
68 | width: 30px;
69 | margin-top: 5px;
70 | margin-right: 5px;
71 | }
72 |
73 | .biz-name-link-photos {
74 | color: #0073BB;
75 | font-size: 14px;
76 | font-family: sans-serif;
77 | font-weight: bold;
78 | margin-top: 4px;
79 | }
80 |
81 | .biz-name-link-photos:hover {
82 | text-decoration: underline;
83 | }
84 |
85 | .biz-review-text-photos {
86 | color: #666666;
87 | font-size: 12px;
88 | font-family: sans-serif;
89 | margin-left: 4px;
90 | padding-top: 4px;
91 | }
92 |
93 | .biz-review-count-photos {
94 | color: #666666;
95 | font-size: 12px;
96 | font-family: sans-serif;
97 | padding-top: 4px;
98 | margin-left: 4px;
99 | }
100 |
101 | .add-photo-photos {
102 | width: 148px;
103 | height: 35px;
104 | border: 1px solid #8D0005;
105 | background-color: #D70306;
106 | border-radius: 4px;
107 | color: white;
108 | font-family: sans-serif;
109 | font-weight: bold;
110 | text-align: center;
111 | font-size: 15px;
112 | display: table;
113 |
114 | }
115 | .add-photo-photos:hover {
116 | background-color: #E02E33;
117 | }
118 | .photo-button-photos {
119 | display: table-cell;
120 | vertical-align: middle;
121 |
122 | }
123 |
124 |
125 |
126 | .photo-index-rating {
127 | height: 20px;
128 | width: 80px;
129 | padding-bottom: 5px;
130 | }
131 |
--------------------------------------------------------------------------------
/app/controllers/api/businesses_controller.rb:
--------------------------------------------------------------------------------
1 | class Api::BusinessesController < ApplicationController
2 | def index
3 | # @businesses = Business.in_bounds(params[:bounds]).includes(:reviews) # running a class method to get average rating for all of these businesses
4 | # businesses = params[:bounds] ? Business.in_bounds(params[:bounds]) : Business.all
5 | # @businesses = businesses.includes(:reviews) || {}
6 |
7 | @businesses = Business.all.includes(:reviews).includes(:photos)
8 | @businesses = @businesses.where(["lower(name) LIKE ? OR lower(cuisine) LIKE ?", "%#{business_params[:name]}%", "%#{business_params[:cuisine]}%" ]) if business_params[:cuisine] !=""
9 | quality_bizs = []
10 | delivers = []
11 | @businesses.each do |business|
12 | if business_params[:delivery] == "true"
13 | next if business.delivery == false
14 | end
15 |
16 |
17 | if (business.price_range <= business_params[:price_range].to_i) &&
18 | (business.noise_level <= business_params[:noise_level].to_i) &&
19 |
20 | if business.in_bounds(params[:business][:bounds])
21 | quality_bizs << business
22 | end
23 | end
24 | end
25 | @businesses = quality_bizs.concat(delivers)
26 | end
27 |
28 | def show
29 | @business = Business.find(params[:id])
30 | end
31 |
32 | def create
33 | @business = Business.new(business_params)
34 |
35 | if @businesses.save
36 | render "api/business/show"
37 | else
38 | render json: @business.errors.full_messages, status: 422
39 | end
40 | end
41 |
42 | def update
43 | @business = Business.find(params[:id])
44 |
45 | if @business.update(business_params)
46 | render "api/business/show"
47 | else
48 | render json: @business.errors.full_messages, status: 422
49 | end
50 | end
51 |
52 | def destroy
53 | @business = Business.find(params[:id])
54 |
55 | if @post.destroy
56 | render "api/business/index"
57 | else
58 | render json: @post.errors.full_messages, status: 422
59 | end
60 | end
61 |
62 | def reviewers
63 | @business = Business.includes(:reviewers).find(params[:id])
64 | @users = @business.reviewers
65 | render :reviewers
66 | end
67 |
68 | private
69 |
70 | def business_params
71 | params.require(:business).permit(:name, :address, :phone_number, :cuisine,
72 | :mon_start_time, :mon_end_time, :tue_start_time, :tue_end_time, :wed_start_time,
73 | :wed_end_time, :thur_start_time, :thur_end_time, :fri_start_time, :fri_end_time,
74 | :sat_start_time, :sat_end_time, :sun_start_time, :sun_end_time, :website, :image, :price_range,
75 | :average_rating, :review_count, :delivery, :noise_level, :lat, :lng, :bounds, :in_bounds)
76 | end
77 | end
78 |
--------------------------------------------------------------------------------
/frontend/components/photos/photo_show.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | class PhotoShow extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.pageReturn = this.pageReturn.bind(this);
8 | this.nextPhoto = this.nextPhoto.bind(this);
9 | this.lastPhoto = this.lastPhoto.bind(this);
10 | this.photoNext = this.photoNext.bind(this);
11 | }
12 |
13 | componentDidMount() {
14 | document.querySelector("html").setAttribute("style", "overflow: hidden;");
15 | }
16 |
17 | componentWillUnmount() {
18 | document.querySelector("html").setAttribute("style", "overflow: auto;");
19 | }
20 |
21 | photoNext(e) {
22 | if (e.nativeEvent.offsetX < 150) {
23 | this.lastPhoto();
24 | } else {
25 | this.nextPhoto();
26 | }
27 | }
28 |
29 | nextPhoto() {
30 | let next = (this.props.photoNumber + 1) % this.props.photos.length;
31 | this.props.history.push(
32 | "/businesses/" +
33 | this.props.match.params.businessId +
34 | "/photos/" +
35 | this.props.photos[next].id
36 | );
37 | }
38 |
39 | lastPhoto() {
40 | let last = this.props.photoNumber - 1;
41 | if (last < 0) {
42 | last = last + this.props.photos.length;
43 | }
44 | this.props.history.push(
45 | "/businesses/" +
46 | this.props.match.params.businessId +
47 | "/photos/" +
48 | this.props.photos[last].id
49 | );
50 | }
51 |
52 | pageReturn(e) {
53 | if (e._targetInst.memoizedProps.value) {
54 | this.props.history.push(
55 | "/businesses/" + this.props.match.params.businessId + "/photos"
56 | );
57 | }
58 | }
59 |
60 | render() {
61 | if (this.props.photo === undefined) {
62 | return null;
63 | } else {
64 | return (
65 |
66 |
67 |
68 | Close
70 |
71 |
72 |
73 |
75 |
76 |
81 |
82 | {this.props.photoNumber + 1} of {this.props.photos.length}
83 |
84 |
85 |
86 |
88 |
89 |
90 | );
91 | }
92 | }
93 | }
94 |
95 | export default PhotoShow;
96 |
--------------------------------------------------------------------------------
/frontend/components/reviews/review_form_container.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from "react-redux";
2 | import {
3 | clearErrors,
4 | clearPage,
5 | nextPage,
6 | logout
7 | } from "../../actions/session_actions";
8 | import {
9 | createReview,
10 | updateReview,
11 | fetchReview
12 | } from "../../actions/review_actions";
13 | import { fetchBusiness, fetchBusinesses } from "../../actions/business_actions";
14 | import { withRouter } from "react-router-dom";
15 | import ReviewForm from "./review_form";
16 | import { clearFilter } from "../../actions/filter_actions";
17 |
18 | const mapStateToProps = (state, ownProps) => {
19 | if (ownProps.match.path === "/businesses/:businessId/reviews/new") {
20 | let review = {
21 | rating: "",
22 | body: "",
23 | price_range: "",
24 | noise_level: "",
25 | delivery: "",
26 | business_id: ownProps.match.params.businessId,
27 | user_id: state.session.currentUser.id
28 | };
29 |
30 | return {
31 | formType: "new",
32 | review,
33 | errors: state.errors.session,
34 | business: state.business[ownProps.match.params.businessId],
35 | currentUser: state.session.currentUser,
36 | intendedPage: state.intendedPage
37 | };
38 | } else {
39 | let reviewToUse = state.reviews[ownProps.match.params.reviewId];
40 | let review = {};
41 | if (reviewToUse) {
42 | for (var key in reviewToUse) {
43 | if (reviewToUse[key] === null) {
44 | review[key] = "";
45 | } else {
46 | review[key] = reviewToUse[key];
47 | }
48 | }
49 | }
50 | return {
51 | formType: "edit",
52 | review,
53 | business: state.business[ownProps.match.params.businessId],
54 | currentUser: state.session.currentUser,
55 | errors: state.errors.session,
56 | intendedPage: state.intendedPage
57 | };
58 | }
59 | };
60 |
61 | const mapDispatchToProps = (dispatch, ownProps) => {
62 | if (ownProps.match.path === "/businesses/:businessId/reviews/new") {
63 | return {
64 | createReview: review => dispatch(createReview(review)),
65 | clearErrors: () => dispatch(clearErrors()),
66 | clearPage: () => dispatch(clearPage()),
67 | fetchBusiness: businessId => dispatch(fetchBusiness(businessId)),
68 | logout: () => dispatch(logout()),
69 | nextPage: page => dispatch(nextPage(page)),
70 | fetchBusinesses: filters => dispatch(fetchBusinesses(filters)),
71 | clearFilter: () => dispatch(clearFilter())
72 | };
73 | } else {
74 | return {
75 | fetchReview: reviewId => dispatch(fetchReview(reviewId)),
76 | updateReview: review => dispatch(updateReview(review)),
77 | clearErrors: () => dispatch(clearErrors()),
78 | clearPage: () => dispatch(clearPage()),
79 | fetchBusiness: businessId => dispatch(fetchBusiness(businessId)),
80 | logout: () => dispatch(logout()),
81 | nextPage: page => dispatch(nextPage(page)),
82 | fetchBusinesses: filters => dispatch(fetchBusinesses(filters)),
83 | clearFilter: () => dispatch(clearFilter())
84 | };
85 | }
86 | };
87 |
88 | export default withRouter(
89 | connect(mapStateToProps, mapDispatchToProps)(ReviewForm)
90 | );
91 |
--------------------------------------------------------------------------------
/config/database.yml:
--------------------------------------------------------------------------------
1 | # PostgreSQL. Versions 9.1 and up are supported.
2 | #
3 | # Install the pg driver:
4 | # gem install pg
5 | # On OS X with Homebrew:
6 | # gem install pg -- --with-pg-config=/usr/local/bin/pg_config
7 | # On OS X with MacPorts:
8 | # gem install pg -- --with-pg-config=/opt/local/lib/postgresql84/bin/pg_config
9 | # On Windows:
10 | # gem install pg
11 | # Choose the win32 build.
12 | # Install PostgreSQL and put its /bin directory on your path.
13 | #
14 | # Configure Using Gemfile
15 | # gem 'pg'
16 | #
17 | default: &default
18 | adapter: postgresql
19 | encoding: unicode
20 | # For details on connection pooling, see Rails configuration guide
21 | # http://guides.rubyonrails.org/configuring.html#database-pooling
22 | pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
23 |
24 | development:
25 | <<: *default
26 | database: Help_development
27 |
28 | # The specified database role being used to connect to postgres.
29 | # To create additional roles in postgres see `$ createuser --help`.
30 | # When left blank, postgres will use the default role. This is
31 | # the same name as the operating system user that initialized the database.
32 | #username: Help
33 |
34 | # The password associated with the postgres role (username).
35 | #password:
36 |
37 | # Connect on a TCP socket. Omitted by default since the client uses a
38 | # domain socket that doesn't need configuration. Windows does not have
39 | # domain sockets, so uncomment these lines.
40 | #host: localhost
41 |
42 | # The TCP port the server listens on. Defaults to 5432.
43 | # If your server runs on a different port number, change accordingly.
44 | #port: 5432
45 |
46 | # Schema search path. The server defaults to $user,public
47 | #schema_search_path: myapp,sharedapp,public
48 |
49 | # Minimum log levels, in increasing order:
50 | # debug5, debug4, debug3, debug2, debug1,
51 | # log, notice, warning, error, fatal, and panic
52 | # Defaults to warning.
53 | #min_messages: notice
54 |
55 | # Warning: The database defined as "test" will be erased and
56 | # re-generated from your development database when you run "rake".
57 | # Do not set this db to the same as development or production.
58 | test:
59 | <<: *default
60 | database: Help_test
61 |
62 | # As with config/secrets.yml, you never want to store sensitive information,
63 | # like your database password, in your source code. If your source code is
64 | # ever seen by anyone, they now have access to your database.
65 | #
66 | # Instead, provide the password as a unix environment variable when you boot
67 | # the app. Read http://guides.rubyonrails.org/configuring.html#configuring-a-database
68 | # for a full rundown on how to provide these environment variables in a
69 | # production deployment.
70 | #
71 | # On Heroku and other platform providers, you may have a full connection URL
72 | # available as an environment variable. For example:
73 | #
74 | # DATABASE_URL="postgres://myuser:mypass@localhost/somedatabase"
75 | #
76 | # You can use this database configuration with:
77 | #
78 | # production:
79 | # url: <%= ENV['DATABASE_URL'] %>
80 | #
81 | production:
82 | <<: *default
83 | database: Help_production
84 | username: Help
85 | password: <%= ENV['HELP_DATABASE_PASSWORD'] %>
86 |
--------------------------------------------------------------------------------
/db/schema.rb:
--------------------------------------------------------------------------------
1 | # This file is auto-generated from the current state of the database. Instead
2 | # of editing this file, please use the migrations feature of Active Record to
3 | # incrementally modify your database, and then regenerate this schema definition.
4 | #
5 | # Note that this schema.rb definition is the authoritative source for your
6 | # database schema. If you need to create the application database on another
7 | # system, you should be using db:schema:load, not running all the migrations
8 | # from scratch. The latter is a flawed and unsustainable approach (the more migrations
9 | # you'll amass, the slower it'll run and the greater likelihood for issues).
10 | #
11 | # It's strongly recommended that you check this file into your version control system.
12 |
13 | ActiveRecord::Schema.define(version: 20171102183657) do
14 |
15 | # These are extensions that must be enabled in order to support this database
16 | enable_extension "plpgsql"
17 |
18 | create_table "businesses", force: :cascade do |t|
19 | t.string "name", null: false
20 | t.string "address", null: false
21 | t.string "phone_number", null: false
22 | t.string "cuisine", null: false
23 | t.string "website"
24 | t.integer "mon_start_time"
25 | t.integer "mon_end_time"
26 | t.integer "tue_start_time"
27 | t.integer "tue_end_time"
28 | t.integer "wed_start_time"
29 | t.integer "wed_end_time"
30 | t.integer "thur_start_time"
31 | t.integer "thur_end_time"
32 | t.integer "fri_start_time"
33 | t.integer "fri_end_time"
34 | t.integer "sat_start_time"
35 | t.integer "sat_end_time"
36 | t.integer "sun_start_time"
37 | t.integer "sun_end_time"
38 | t.datetime "created_at", null: false
39 | t.datetime "updated_at", null: false
40 | t.string "image_file_name"
41 | t.string "image_content_type"
42 | t.integer "image_file_size"
43 | t.datetime "image_updated_at"
44 | t.float "lat"
45 | t.float "lng"
46 | end
47 |
48 | create_table "photos", force: :cascade do |t|
49 | t.integer "user_id", null: false
50 | t.integer "business_id", null: false
51 | t.datetime "created_at", null: false
52 | t.datetime "updated_at", null: false
53 | t.string "image_file_name"
54 | t.string "image_content_type"
55 | t.integer "image_file_size"
56 | t.datetime "image_updated_at"
57 | end
58 |
59 | create_table "reviews", force: :cascade do |t|
60 | t.integer "user_id", null: false
61 | t.integer "business_id", null: false
62 | t.integer "rating", null: false
63 | t.integer "price_range"
64 | t.text "body", null: false
65 | t.boolean "delivery"
66 | t.integer "noise_level"
67 | t.datetime "created_at", null: false
68 | t.datetime "updated_at", null: false
69 | end
70 |
71 | create_table "users", force: :cascade do |t|
72 | t.string "first_name", null: false
73 | t.string "last_name", null: false
74 | t.string "email", null: false
75 | t.string "password_digest", null: false
76 | t.string "session_token", null: false
77 | t.string "zip_code", null: false
78 | t.date "birthday"
79 | t.datetime "created_at", null: false
80 | t.datetime "updated_at", null: false
81 | t.string "image_file_name"
82 | t.string "image_content_type"
83 | t.integer "image_file_size"
84 | t.datetime "image_updated_at"
85 | end
86 |
87 | end
88 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/businesses.scss:
--------------------------------------------------------------------------------
1 | // Place all the styles related to the businesses controller here.
2 | // They will automatically be included in application.css.
3 | // You can use Sass (SCSS) here: http://sass-lang.com/
4 |
5 | .main-div {
6 | margin: 0 auto;
7 | justify-content: center;
8 | width: 100%;
9 | }
10 |
11 | .biz-idx-page {
12 | display: flex;
13 | justify-content: center;
14 | width: 100%;
15 | }
16 |
17 | .holding-box {
18 | max-width: 1100px;
19 | display: flex;
20 | margin: 0 auto;
21 |
22 | }
23 | .all-biz {
24 | display: flex;
25 | justify-content: space-between;
26 | width: 630px;
27 | margin-bottom: 12px;
28 | border-top: 1px solid #E6E6E6;
29 | margin: 0 auto;
30 | }
31 |
32 | .biz-item {
33 | margin-top: 17px;
34 | margin-left: 28px;
35 | font-family: sans-serif;
36 | margin-bottom: 40px;
37 | }
38 |
39 | .business-photo {
40 | height: 92px;
41 | width: 92px;
42 | border-radius: 5px;
43 | object-fit: cover;
44 | }
45 |
46 |
47 |
48 | .list-item {
49 | width: 100%;
50 | height: 120px;
51 |
52 | display: flex;
53 |
54 | }
55 |
56 | .list-item>li {
57 | margin-top: 20px;
58 | }
59 |
60 | .index-and-name {
61 | display: flex;
62 | margin-left: 12px;
63 | }
64 |
65 | .biz-name-link {
66 | color: #0073BB;
67 | margin-left: 5px;
68 | }
69 | .biz-name-link:hover {
70 | text-decoration: underline;
71 | }
72 |
73 |
74 |
75 |
76 | .business-info {
77 | font-size: 14px;
78 | width: 219px;
79 | color: #333333;
80 | }
81 |
82 | .biz-info-div {
83 | margin-top: 35px;
84 |
85 | }
86 |
87 | .index-and-name {
88 | margin-top: 5px;
89 | }
90 |
91 |
92 | .rating-bar-line {
93 | display: flex;
94 | margin-left: 12px;
95 | margin-top: 5px;
96 | }
97 |
98 | .price-cuisine {
99 | display: flex;
100 | margin-left: 12px;
101 | margin-top: 5px;
102 | }
103 |
104 | .period {
105 | color: #999;
106 | width: 5px;
107 | margin-bottom: 7px;
108 | margin-left: 4px;
109 | padding-right: 10px;
110 | }
111 |
112 |
113 | .period-container {
114 | width: 5px;
115 | margin-bottom: 7px;
116 | }
117 |
118 | .cuisine {
119 | margin-left: 8px;
120 | font-family: sans-serif;
121 | font-size: 14px;
122 | color: #0073BB;
123 | }
124 |
125 | .cuisine:hover {
126 | text-decoration: underline;
127 | }
128 |
129 | .biz-review-count-index {
130 | color: #666666;
131 | font-size: 14px;
132 | font-family: sans-serif;
133 | margin-left: 4px;
134 | margin-right: 4px;
135 | margin-top: 5px;
136 | }
137 |
138 | .biz-review-text-index {
139 | margin-top: 5px;
140 | color: #666666;
141 | font-size: 14px;
142 | font-family: sans-serif;
143 | margin-left: 4px;
144 | margin-right: 4px;
145 | }
146 |
147 | .price-range-undefined {
148 | color: #666666;
149 | font-size: 12px;
150 | font-family: sans-serif;
151 | margin-left: 4px;
152 | margin-right: 4px;
153 | }
154 |
155 | .write-the-first {
156 | color: #0073BB;
157 | font-size: 13px;
158 | font-family: sans-serif;
159 | margin-left: 4px;
160 | margin-right: 4px;
161 | margin-bottom:0px;
162 | padding-top: 10px
163 | }
164 |
165 | .write-the-first:hover {
166 | text-decoration: underline;
167 | }
168 |
169 |
170 | .write-review-index-item {
171 | padding-top: 3px;
172 | }
173 |
174 |
175 | .no-biz {
176 | font-weight: bold;
177 | font-size: 24px;
178 | margin-top: 200px;
179 | margin-right: 100px;
180 | }
181 |
182 |
183 |
184 | //
185 |
--------------------------------------------------------------------------------
/frontend/components/reviews/review_index_item.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import dateFormat from "dateformat";
4 | import zipcodes from 'zipcodes';
5 |
6 | class ReviewIndexItem extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.handleRating = this.handleRating.bind(this);
10 | this.editLink = this.editLink.bind(this);
11 | }
12 |
13 | handleRating() {
14 | let picture = [
15 | "",
16 | "https://s3.amazonaws.com/helpcoreyladovskyprojectdev/small-ratings/one_star_review.png",
17 | "https://s3.amazonaws.com/helpcoreyladovskyprojectdev/small-ratings/two_star_review.png",
18 | "https://s3.amazonaws.com/helpcoreyladovskyprojectdev/small-ratings/three_star_review.png",
19 | "https://s3.amazonaws.com/helpcoreyladovskyprojectdev/small-ratings/four_star_review.png",
20 | "https://s3.amazonaws.com/helpcoreyladovskyprojectdev/small-ratings/five_star_review.png"
21 | ];
22 | let rating = this.props.review.rating;
23 | let pic = picture[rating];
24 | return
;
25 | }
26 |
27 | editLink() {
28 | if (this.props.currentUser === null) {
29 | return null;
30 | } else if (this.props.user.id === this.props.currentUser.id) {
31 | return (
32 |
33 |
34 |
43 |
44 | this.props.deleteReview(this.props.review.id)}
47 | >
48 | Delete
49 |
50 |
51 |
52 | );
53 | }
54 | }
55 |
56 | render() {
57 | if (this.props.user === undefined) {
58 | return null;
59 | } else {
60 | const date = dateFormat(this.props.review.created_at, "mm/dd/yyyy");
61 | const city = zipcodes.lookup(this.props.user.zip_code);
62 | return (
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
75 |
76 | {this.props.user.first_name}
77 |
78 |
79 | {this.props.user.last_name.substring(0, 1) + "."}
80 |
81 |
82 |
83 |
84 | {this.props.user.zip_code}
85 |
86 |
87 |
88 |
89 |
90 |
91 | {this.handleRating()}
92 |
93 | {date}
94 |
95 |
96 | {this.props.review.body}
97 |
98 | {this.editLink()}
99 |
100 |
101 |
102 |
103 | );
104 | }
105 | }
106 | }
107 |
108 | export default ReviewIndexItem;
109 |
--------------------------------------------------------------------------------
/config/environments/production.rb:
--------------------------------------------------------------------------------
1 | Rails.application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb.
3 |
4 | # Code is not reloaded between requests.
5 | config.cache_classes = true
6 |
7 | # Eager load code on boot. This eager loads most of Rails and
8 | # your application in memory, allowing both threaded web servers
9 | # and those relying on copy on write to perform better.
10 | # Rake tasks automatically ignore this option for performance.
11 | config.eager_load = true
12 |
13 | # Full error reports are disabled and caching is turned on.
14 | config.consider_all_requests_local = false
15 | config.action_controller.perform_caching = true
16 |
17 | # Attempt to read encrypted secrets from `config/secrets.yml.enc`.
18 | # Requires an encryption key in `ENV["RAILS_MASTER_KEY"]` or
19 | # `config/secrets.yml.key`.
20 | config.read_encrypted_secrets = true
21 |
22 | # Disable serving static files from the `/public` folder by default since
23 | # Apache or NGINX already handles this.
24 | config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
25 |
26 | # Compress JavaScripts and CSS.
27 | config.assets.js_compressor = :uglifier
28 | # config.assets.css_compressor = :sass
29 |
30 | # Do not fallback to assets pipeline if a precompiled asset is missed.
31 | config.assets.compile = false
32 |
33 | # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
34 |
35 | # Enable serving of images, stylesheets, and JavaScripts from an asset server.
36 | # config.action_controller.asset_host = 'http://assets.example.com'
37 |
38 | # Specifies the header that your server uses for sending files.
39 | # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
40 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
41 |
42 | # Mount Action Cable outside main process or domain
43 | # config.action_cable.mount_path = nil
44 | # config.action_cable.url = 'wss://example.com/cable'
45 | # config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]
46 |
47 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
48 | # config.force_ssl = true
49 |
50 | # Use the lowest log level to ensure availability of diagnostic information
51 | # when problems arise.
52 | config.log_level = :debug
53 |
54 | # Prepend all log lines with the following tags.
55 | config.log_tags = [ :request_id ]
56 |
57 | # Use a different cache store in production.
58 | # config.cache_store = :mem_cache_store
59 |
60 | # Use a real queuing backend for Active Job (and separate queues per environment)
61 | # config.active_job.queue_adapter = :resque
62 | # config.active_job.queue_name_prefix = "Help_#{Rails.env}"
63 | config.action_mailer.perform_caching = false
64 |
65 | # Ignore bad email addresses and do not raise email delivery errors.
66 | # Set this to true and configure the email server for immediate delivery to raise delivery errors.
67 | # config.action_mailer.raise_delivery_errors = false
68 |
69 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
70 | # the I18n.default_locale when a translation cannot be found).
71 | config.i18n.fallbacks = true
72 |
73 | # Send deprecation notices to registered listeners.
74 | config.active_support.deprecation = :notify
75 |
76 | # Use default logging formatter so that PID and timestamp are not suppressed.
77 | config.log_formatter = ::Logger::Formatter.new
78 |
79 | # Use a different logger for distributed setups.
80 | # require 'syslog/logger'
81 | # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')
82 |
83 | if ENV["RAILS_LOG_TO_STDOUT"].present?
84 | logger = ActiveSupport::Logger.new(STDOUT)
85 | logger.formatter = config.log_formatter
86 | config.logger = ActiveSupport::TaggedLogging.new(logger)
87 | end
88 |
89 | # Do not dump schema after migrations.
90 | config.active_record.dump_schema_after_migration = false
91 | end
92 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HELP
2 |
3 | Hey there and welcome! Thanks for checking out Help. Help is a yelp like application that allows users to rate and review restaurants. Navigating the site is literally as easy as clicking a button. You're able to Sign up, log in (or demo login) and get straight to looking for delicious places to eat. From the business index page you can see the rating of each restaurant as well as it's price ranges. You are able to filter restaurants based off name, category, price, delivery, noise level, and location. Everything besides the restaurants core composition, are qualities derived from user scored averages from the reviews they write. A user can add, edit, and delete reviews (the stars work identical to yelps), as well as upload photos for a business. If you click on a business you can learn all about it. You can see past reviews, find it on the map, and look at their photos. From the photos page you can click on a picture to get a closer look. Feel free to click through and see all the photos associated with a business.
4 |
5 | Check out the site! [Help: it's where the food's at!](https://www.corey-ladovsky-help.club/#/)
6 |
7 | ### Technologies
8 |
9 | This app is a fullstack application that has been designed using Ruby on Rails in the backend and React Redux in the front end.
10 | In addition to using Postgress to hold my core database, I used Amazon Web Service as a second database in order to house pictures from the web. I am attaching these pictures with the paperclip gem. In order to do that I also had to install figaro so that I could make a gitignored yml file to hide my AWS keys.
11 | Using Ruby on Rails I was able to build models with proper validations, and controllers to handle my ajax requests. I am rendering JSON and using jbuilder files to pass information around my application.
12 | In the frontend I am using React in order to keep my App a single page application and Redux in order to store slices of state. This allows me to have persisting users as well as to aid my application dynamically. My application was designed using SCSS.
13 |
14 | ### Problem Solving
15 |
16 | After building my Auth Routes I realized that I had made all successful log ins/ sign ups go directly to the home/ landing page. This tends to be the norm but I realized that it posed a future problem that I would soon encounter. The problem was that most of my site is navigable before officially signing in. This is a problem because a user could potentially go to the page, check out the businesses, look at a specific business, decide to write a review and then be asked to log in. If I had left everything to the 'standard' setup my user would sign in, land back at the landing page and then have to find their way back to the original desired business they wished to write a review for. This would be a very bad and frustrating user experience.
17 | In order to get around this problem I decided to chisel out another slice of state. This slice is called intended page. Whenever I have a protected route that would otherwise send the user directly to sign in, I add a click handler that stores my intended page. Now, after they have a successful log in the landing page checks for the existence of an intended page. If one exists, the user is redirected back to the page they initially wished to visit.
18 | I am proud of the details that I paid attention to. I enjoyed manipulating the html with css. One of my initial difficulties was figuring out how to make the partial grey vertical partition in the center of the search bar. I was successful by creating divs inside of divs and camouflaging their background colors. The small div is propped in the center of the larger one and has a side border. My logo was also a challenge to create solely using css. I was successful by creating a text shadow to all different sides.
19 | 
20 |
21 | Please feel free to reach out to me with any questions or request. Have a wonderful day! Enjoy Help!
22 |
23 |
24 | Things I plan to implement in the near future: I'd love to add an 'open now' filter.
25 | I'd also like to make my app responsive to different screen sizes.
26 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/navbar.scss:
--------------------------------------------------------------------------------
1 |
2 | .help-nav {
3 | display: inline-block;
4 | font-family: sans-serif;
5 | font-size: 27px;
6 | font-weight: 600;
7 | color: black;
8 | text-shadow: -2px -2px 0 white, 2px -2px 0 white,
9 | -2px 2px 0 white, 2px 2px 0 white;
10 |
11 | margin-top: 15px;
12 |
13 |
14 | }
15 |
16 |
17 | .red-nav-bar {
18 | background-color: #D32323;
19 | height:64px;
20 | justify-content: center;
21 | display: flex;
22 | margin: auto;
23 | padding-left: 20px;
24 |
25 |
26 |
27 | }
28 |
29 | .top-nav-search {
30 | display: flex;
31 | width: 100%;
32 | // width: 1100px;
33 | justify-content: center;
34 | // position: sticky;
35 | left: 28px;
36 | }
37 |
38 | .search-form-nav {
39 | display: flex;
40 | margin-top: 13px;
41 | margin-left: 25px;
42 | }
43 |
44 | .find-text-nav {
45 | font-family: sans-serif;
46 | font-weight: bold;
47 | background-color: white;
48 | padding-top: 9px;
49 | padding-left: 8px;
50 | border-radius: 4px 0px 0px 4px;
51 | height: 27px;
52 | }
53 |
54 | .nav-input-find {
55 | background-color: white;
56 | padding-left: 7px;
57 | height: 36px;
58 | width: 300px;
59 | font-family: sans-serif;
60 | }
61 |
62 | .near-text-nav {
63 | font-family: sans-serif;
64 | font-weight: bold;
65 | background-color: white;
66 | padding-top: 9px;
67 | padding-left: 8px;
68 | height: 27px;
69 |
70 | }
71 |
72 | .near-input-nav {
73 | background-color: white;
74 | height: 36px;
75 | padding-left: 7px;
76 | width: 290px;
77 | font-family: sans-serif;
78 |
79 | }
80 |
81 | .mag {
82 | background-color: #BD1F1F;
83 | height: 36px;
84 | width: 54px;
85 | color: white;
86 | border-radius: 0px 4px 4px 0px;
87 | }
88 |
89 | .fa-search {
90 | height: 15px;
91 | width: 15px;
92 | color: white;
93 | margin-left: 17px;
94 | }
95 |
96 | .mag:hover {
97 | background-color: #A71C1C;
98 | }
99 |
100 | .mag-but {
101 | height: 30px;
102 | width: 35px;
103 | margin-left: 8px;
104 | }
105 |
106 | .mag-but:hover {
107 |
108 | }
109 |
110 | .nav-sign-up {
111 | background-color: #BD1F1F;
112 | padding-left: 30px;
113 | padding-right: 30px;
114 | padding-bottom: 10px;
115 | padding-top: 10px;
116 | margin-left: 20px;
117 | border-radius: 4px;
118 | color: white;
119 | font-family: sans-serif;
120 | font-weight: bold;
121 | font-size: 14px;
122 | }
123 | .nav-sign-up:hover {
124 | background-color: #A71C1C;
125 | }
126 |
127 | .nav-sign-up-li {
128 | padding-top: 23px;
129 | }
130 |
131 | .nav-log-out {
132 | background-color: #BD1F1F;
133 | padding-left: 30px;
134 | padding-right: 30px;
135 | padding-bottom: 10px;
136 | padding-top: 10px;
137 | margin-left: 20px;
138 | border-radius: 4px;
139 | color: white;
140 | font-family: sans-serif;
141 | font-weight: bold;
142 | font-size: 14px;
143 | margin-top: -9px;
144 | }
145 |
146 | .nav-log-out:hover {
147 | background-color: #A71C1C;
148 | }
149 |
150 | .seperator {
151 | background-color: white;
152 | width: 2px;
153 | height: 36px;
154 | border-left: #CCCCCC;
155 | background-color: white;
156 | }
157 |
158 | .seperator-div {
159 | height: 21px;
160 | background-color: white;
161 | border-left: 1px solid #CCCCCC;
162 | margin-top: 7px;
163 | }
164 |
165 | .container {
166 | display: flex;
167 | flex-direction: column;
168 | // align-items: center;
169 | background-color: #D32323;
170 | margin: 0 auto;
171 |
172 | }
173 | .long-bar {
174 | width: 100%;
175 | height: 28px;
176 | background-color: #BD1F1F;
177 | display: flex;
178 | justify-content: space-around;
179 |
180 | }
181 |
182 | .thin-red-nav-bar {
183 | display: flex;
184 | color: white;
185 | font-family: sans-serif;
186 | font-size: 12px;
187 | font-weight: bold;
188 | background-color: #BD1F1F;
189 | width: 907px;
190 | height: 28px;
191 | justify-content: space-between;
192 | margin: auto;
193 | padding-left: 20px;
194 |
195 | }
196 |
197 | .review-nav:last-child:hover {
198 | background-color: #A71C1C;
199 | }
200 |
201 | .review-nav {
202 | width: 100px;
203 | margin-bottom: 2px;
204 | padding-top: 6px;
205 | padding-left: 15px;
206 | }
207 |
208 | .home-nav {
209 | width: 112px;
210 | margin-left: 25px;
211 | }
212 |
213 | .dark-nav-thin {
214 | width:870px;
215 | }
216 |
217 |
218 |
219 |
220 | //
221 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/photo_upload.scss:
--------------------------------------------------------------------------------
1 | .photo-upload-container {
2 | display: flex;
3 | flex-direction: column;
4 | margin: 0 auto;
5 | }
6 |
7 | .biz-heading-photos {
8 | display: flex;
9 | margin: auto;
10 | margin-top: 18px;
11 | flex-direction: column;
12 | padding-left: 20px;
13 | width: 400px;
14 |
15 | }
16 |
17 | .photo-page-ul {
18 | display: flex;
19 | }
20 |
21 | .biz-name-photo {
22 | font-size: 22px;
23 | font-family: sans-serif;
24 | font-weight: bold;
25 | color: #0F70BB;
26 |
27 | }
28 |
29 | .biz-name-photo:hover {
30 | text-decoration: underline;
31 | }
32 |
33 | .add-photo-text {
34 | font-size: 22px;
35 | font-family: sans-serif;
36 | font-weight: bold;
37 | color: #D00D25;
38 | margin-left: 5px;
39 | }
40 |
41 | .all-photos-tag {
42 | font-family: sans-serif;
43 | font-size: 14px;
44 | color: #0F70BB;
45 | margin-top: 6px;
46 |
47 | }
48 |
49 | .all-photos-tag:hover {
50 | text-decoration: underline;
51 | }
52 | // TEXT INSIDE OF PHOTO UPLOAD
53 | .upload-text {
54 | width: 600px;
55 | height: 400px;
56 | position: absolute;
57 | display: flex;
58 | justify-content: center;
59 |
60 | }
61 |
62 | .upload-text h1 {
63 | font-family: sans-serif;
64 | font-weight: bold;
65 | color: #333333;
66 | font-size: 29px;
67 | margin-top: 80px;
68 | }
69 |
70 | .center-line {
71 | border-top: 1px solid #B2B2B2;
72 | margin-top: .5em;
73 | width: 200px;
74 | }
75 |
76 | .ok-text {
77 | color: #666674;
78 | }
79 |
80 | .ok-partition {
81 | display: flex;
82 | justify-content: space-around;
83 | margin-top: 50px;
84 | }
85 |
86 | .browse-files {
87 | display: flex;
88 | justify-content: center;
89 | margin-top: 55px;
90 | }
91 |
92 | .browse-files-button {
93 | height: 15px;
94 | width: 127px;
95 | background-color: #D70306;
96 | color: white;
97 | font-size: 15px;
98 | font-family: sans-serif;
99 | font-weight: bold;
100 | border: 1px solid #8D0005;
101 | border-radius: 5px;
102 | text-align: center;
103 | z-index: 2;
104 | padding-top: 10px;
105 | padding-bottom: 13px;
106 | }
107 |
108 | .second-upload {
109 | opacity: 0;
110 | height: 40px;
111 | width: 127px;
112 | left: 39.2%;
113 | bottom: 30.5%;
114 | position: absolute;
115 | }
116 | .second-upload:hover {
117 | cursor: pointer;
118 | }
119 |
120 | input[type="file"]:hover {
121 | opacity: 0;
122 | }
123 |
124 | .browse-files-button:hover {
125 | background-color: #E02E33;
126 |
127 | }
128 |
129 | .upload-text div {
130 |
131 | }
132 |
133 |
134 | //
135 | //
Drag and drop your photos here
136 | //
OR
137 | //
Browse Files
138 | //
139 |
140 |
141 |
142 | .image-upload {
143 | display: flex;
144 | margin: 0 auto;
145 | margin-top: 60px;
146 | width: 600px;
147 | height: 400px;
148 | border-radius: 5px;
149 | border: 3px dashed #B2B2B2;
150 |
151 |
152 | }
153 |
154 | .image-uploaded {
155 | z-index: 1;
156 | width: 1000000px;
157 | height: 400px;
158 | opacity: 0;
159 | }
160 |
161 |
162 | .image-preview {
163 | margin: 0px;
164 | width: 600px;
165 | height: 400px;
166 | position: absolute;
167 | object-fit: cover;
168 | }
169 |
170 | .spin-container {
171 | width: 600px;
172 | height: 400px;
173 | position: absolute;
174 | background-color:black;
175 | opacity: .5;
176 | color: white;
177 | font-size: 40px;
178 | z-index: 2;
179 | display: flex;
180 | justify-content: center;
181 | }
182 |
183 | .small-spin {
184 | display: flex;
185 | justify-content: center;
186 | height: 120px;
187 | width: 120px;
188 | margin-top: 110px;
189 | }
190 |
191 | .photo-form {
192 | display: flex;
193 | justify-content: center;
194 | flex-direction: column;
195 | margin-bottom: 40px;
196 | }
197 |
198 | .photo-submit-button {
199 | align-self: center;
200 | margin-left: 400px;
201 | margin-top: 20px;
202 | height: 15px;
203 | width: 127px;
204 | background-color: #D70306;
205 | color: white;
206 | font-size: 15px;
207 | font-family: sans-serif;
208 | font-weight: bold;
209 | border: 1px solid #8D0005;
210 | border-radius: 5px;
211 | text-align: center;
212 | z-index: 2;
213 | padding-top: 8px;
214 | padding-bottom: 10px;
215 | }
216 | .photo-submit-button:hover {
217 | background-color: #E02E33;
218 | }
219 |
--------------------------------------------------------------------------------
/frontend/components/business/biz_landing_index_item.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link, withRouter } from "react-router-dom";
3 | import parser from "parse-address";
4 |
5 | class BizLandingIndexItem extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.findRating = this.findRating.bind(this);
9 | }
10 |
11 | findRating(rating) {
12 | switch (rating) {
13 | case 5:
14 | return (
15 |
20 | );
21 | case 4.5:
22 | return (
23 |
28 | );
29 | case 4:
30 | return (
31 |
36 | );
37 | case 3.5:
38 | return (
39 |
44 | );
45 | case 3:
46 | return (
47 |
52 | );
53 | case 2.5:
54 | return (
55 |
60 | );
61 | case 2:
62 | return (
63 |
68 | );
69 | case 1.5:
70 | return (
71 |
76 | );
77 | case 1:
78 | return (
79 |
84 | );
85 | default:
86 | return (
87 |
88 |
97 | );
98 | }
99 | }
100 |
101 | render() {
102 | let parsed_address = parser.parseLocation(this.props.business.address);
103 | return (
104 |
105 |
120 | {this.findRating(this.props.business.average_rating)}
121 |
122 | {this.props.business.review_count}
123 |
124 |
125 | {this.props.business.review_count === 1
126 | ? " review"
127 | : " reviews"}
128 |
129 |
130 |
131 |
{this.props.business.cuisine}
132 |
133 | {parsed_address.city + ", " + parsed_address.state}
134 |
135 |
137 | );
138 | }
139 | }
140 |
141 | export default BizLandingIndexItem;
142 |
--------------------------------------------------------------------------------
/app/assets/images/french.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
11 |
14 |
16 |
17 |
19 |
20 |
22 |
23 | >
24 |
28 |
29 |
30 |
31 | image/svg+xml
32 |
35 |
36 | Openclipart
37 |
38 |
39 | nc
40 | 2011-08-21T12:01:27
41 | country flag buttons (with ISO-3166-1 naming convention)
42 | http://openclipart.org/detail/156871/nc-by-koppi
43 |
44 |
45 | koppi
46 |
47 |
48 |
49 |
50 | ISO3166-1
51 | button
52 | clip art
53 | clipart
54 | country
55 | flag
56 | flags
57 | squared
58 |
59 |
60 |
61 |
62 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/app/assets/images/italy.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
11 |
14 |
16 |
17 |
19 |
20 |
22 |
23 | >
24 |
28 |
29 |
30 |
31 | image/svg+xml
32 |
35 |
36 | Openclipart
37 |
38 |
39 | mx
40 | 2011-08-21T12:01:26
41 | country flag buttons (with ISO-3166-1 naming convention)
42 | http://openclipart.org/detail/156847/mx-by-koppi
43 |
44 |
45 | koppi
46 |
47 |
48 |
49 |
50 | ISO3166-1
51 | button
52 | clip art
53 | clipart
54 | country
55 | flag
56 | flags
57 | squared
58 |
59 |
60 |
61 |
62 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/session_form.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .top-red-bar-with-star {
4 | background-color: #d32323;
5 | width: 100%;
6 | height: 64px;
7 | }
8 |
9 | .help {
10 | display: inline-block;
11 | align: center;
12 | font-family: sans-serif;
13 | font-size: 27px;
14 | font-weight: 600;
15 | color: black;
16 | text-shadow: -2px -2px 0 white, 2px -2px 0 white,
17 | -2px 2px 0 white, 2px 2px 0 white;
18 | margin-left: 48%;
19 | margin-top: 15px;
20 | }
21 |
22 | .help-div {
23 | display: inline;
24 | margin: 0 auto;
25 | align: center;
26 | }
27 |
28 | .login-signup-string {
29 | color: #d32323;
30 | font-size: 22px;
31 | font-weight: bold;
32 | font-family: sans-serif;
33 | margin-left: 200px;
34 | margin-top: 50px;
35 | }
36 |
37 | .little-message {
38 | font-size: 18px;
39 | font-weight: bold;
40 | font-family: sans-serif;
41 | margin-top: 7px;
42 | margin-left: 135px;
43 | }
44 |
45 | .login-message {
46 | display: flex;
47 | }
48 |
49 | .new-to-help {
50 | font-size: 15px;
51 | font-weight: bold;
52 | font-family: sans-serif;
53 | margin-top: 7px;
54 | margin-left: 210px;
55 | }
56 |
57 | .sign-up-link {
58 | font-size: 15px;
59 | margin-left: 10px;
60 | margin-top: 8px;
61 | font-weight: bold;
62 | font-family: sans-serif;
63 | color: #0066CC;
64 | }
65 |
66 | .sign-up-link:hover {
67 | text-decoration: underline;
68 | }
69 |
70 | .auth-form {
71 | // border: 1px solid black;
72 | width: 350px;
73 | margin-top: 50px;
74 | margin-left: 110px;
75 | }
76 |
77 | .auth-list input {
78 | border: 1px solid gray;
79 | height: 30px;
80 | font-family: sans-serif;
81 | border-radius: 4px;
82 | padding-left: 5px;
83 | color: #999;
84 | font-size: 14px;
85 |
86 | }
87 |
88 | .auth-list input:focus {
89 | color: black;
90 | border: 1px solid #0066CC
91 | }
92 |
93 | .auth-list li {
94 | margin-top: 5px;
95 | margin-bottom: 5px;
96 | }
97 |
98 | .name-inputs {
99 | display: flex;
100 | justify-content: space-between;
101 | }
102 | .first-name {
103 | width: 165px;
104 | }
105 |
106 | .last-name {
107 | width: 165px;
108 | }
109 |
110 | .email {
111 | width: 345px;
112 |
113 | }
114 |
115 | .password {
116 | width: 345px;
117 | margin-top: 7px;
118 |
119 | }
120 |
121 | .zip-code {
122 | width: 345px;
123 | margin-top: 15px;
124 | }
125 |
126 |
127 | .all-drop {
128 | background-color: white;
129 | height: 30px;
130 | width: 110px;
131 | color: black;
132 | font-size: 14px;
133 | }
134 |
135 |
136 | .drop {
137 | display:flex;
138 | justify-content: space-between;
139 |
140 | }
141 |
142 | .birthday-text {
143 | display: flex;
144 | border:0px;
145 | }
146 |
147 | .birthday {
148 | font-weight: bold;
149 | font-family: sans-serif;
150 | font-size: 14px;
151 | border:0px;
152 | }
153 |
154 | .optional {
155 | color: #999;
156 | font-size: 12px;
157 | font-family: sans-serif;
158 | margin-left: 8px;
159 | margin-top: 5px;
160 | }
161 |
162 | .submit-button {
163 | width: 350px;
164 | background-color: #d32323;
165 | text-align: center;
166 | color: white;
167 | font-weight: bold;
168 | height: 35px;
169 | border-radius: 4px;
170 | font-family: sans-serif;
171 | font-size: 14px;
172 | margin-top: 5px;
173 | }
174 |
175 | .submit-button:hover {
176 | background-color: #E80000 ;
177 | border: 1px #8d0005
178 | }
179 |
180 | .guest-log-in {
181 | width: 200px;
182 | background-color: #d32323;
183 | text-align: center;
184 | color: white;
185 | font-weight: bold;
186 | height: 30px;
187 | border-radius: 4px;
188 | font-family: sans-serif;
189 | font-size: 14px;
190 | margin-top: 5px;
191 | margin-left: 185px;
192 | }
193 |
194 | .guest-log-in:hover {
195 | background-color: #E80000 ;
196 | border: 1px #8d0005
197 | }
198 |
199 | .closing {
200 | display: flex;
201 | margin-left: 250px;
202 | margin-top: 10px;
203 | }
204 |
205 | .closer {
206 | color: #999;
207 | font-size: 12px;
208 | font-family: sans-serif;
209 | }
210 |
211 | .log-link {
212 | color: #003399;
213 | font-size: 12px;
214 | font-family: sans-serif;
215 | margin-left: 5px;
216 | }
217 | .log-link:hover {
218 | text-decoration: underline;
219 | }
220 |
221 | .session-errors {
222 | display: flex;
223 | }
224 | .session-error {
225 | margin-top: 15px;
226 | margin-left: 15px;
227 | color: red;
228 | font-size: 12px;
229 | font-family: sans-serif;
230 | // text-decoration: underline;
231 | text-decoration-color: red;
232 | }
233 |
234 | // footer {
235 | // position: absolute;
236 | // bottom: 0;
237 | // height: 60px;
238 | // width: 100%;
239 | // background-color: #F5F5F5;
240 | // border-top: 1px solid lightgray;
241 | // }
242 |
243 | .git-link {
244 | position: absolute;
245 | color: blue;
246 | font-size: 12px;
247 | font-family: sans-serif;
248 | bottom: 0;
249 | right: 0;
250 | margin-bottom: 25px;
251 | margin-right: 20px;
252 | }
253 |
254 | .git-link:hover {
255 | text-decoration: underline;
256 | }
257 |
258 | .session-flex {
259 | display: flex;
260 | justify-content: space-around;
261 | }
262 |
263 | .welcome-image {
264 | height: 375px;
265 | width: 375px;
266 | margin-top: 30%;
267 | margin-right: 20%;
268 | }
269 |
270 |
271 |
272 | //
273 |
--------------------------------------------------------------------------------
/frontend/components/photos/photo_upload.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import NavBar from "../NavBar/NavBar";
3 | import { Link } from "react-router-dom";
4 |
5 | class PhotoUpload extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | imageFile: null,
10 | imageUrl: null,
11 | loading: false
12 | };
13 | this.updateFile = this.updateFile.bind(this);
14 | this.handleSubmit = this.handleSubmit.bind(this);
15 | this.photoText = this.photoText.bind(this);
16 | this.submitPhoto = this.submitPhoto.bind(this);
17 | this.spinSpinner = this.spinSpinner.bind(this);
18 | }
19 |
20 | componentDidMount() {
21 | this.props.clearPage();
22 | this.props.fetchBusiness(this.props.match.params.businessId);
23 | }
24 |
25 | photoText() {
26 | if (this.state.imageFile) {
27 | return "";
28 | } else {
29 | return (
30 |
53 | );
54 | }
55 | }
56 |
57 | spinSpinner() {
58 | if (this.state.loading) {
59 | return (
60 |
65 | );
66 | }
67 | }
68 |
69 | updateFile(e) {
70 | let file = e.currentTarget.files[0];
71 | let fileReader = new FileReader();
72 | fileReader.onloadend = () => {
73 | this.setState({ imageFile: file, imageUrl: fileReader.result });
74 | };
75 | if (file) {
76 | fileReader.readAsDataURL(file);
77 | }
78 | }
79 |
80 | submitPhoto() {
81 | if (!this.state.imageFile) {
82 | return "";
83 | } else {
84 | return (
85 |
86 | Add Photo
87 |
88 | );
89 | }
90 | }
91 |
92 | handleSubmit(e) {
93 | e.preventDefault();
94 | let formData = new FormData();
95 | formData.append("photo[image]", this.state.imageFile);
96 | formData.append("photo[user_id]", this.props.currentUser.id);
97 | formData.append("photo[business_id]", this.props.business.id);
98 | this.setState({ loading: true });
99 | this.props.createPhoto(formData).then(
100 | res => {
101 | this.setState({ loading: false });
102 | this.props.history.push(`/businesses/${this.props.business.id}/photos`);
103 | },
104 | res => {
105 | this.setState({ loading: false });
106 | }
107 | );
108 | }
109 | render() {
110 | if (this.props.business === undefined) {
111 | return null;
112 | } else {
113 | return (
114 |
157 | );
158 | }
159 | }
160 | }
161 |
162 | export default PhotoUpload;
163 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/review_form.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .write-review-text-form {
4 | color: #D70306;
5 | font-size: 16px;
6 | font-family: sans-serif;
7 | font-weight: bold;
8 | border-bottom: 1px solid #E6E6E6;
9 | padding-bottom: 5px;
10 | }
11 |
12 | .review-container-write-and-show {
13 | width: 646px;
14 | margin-left: 28px;
15 | margin-top: 23px;
16 | margin-bottom: 50px;
17 | }
18 |
19 |
20 | .main-container-review-form {
21 | width: 100%;
22 | display: flex;
23 | margin: 0 auto;
24 | justify-content: center;
25 | }
26 |
27 | .biz-info-div {
28 | display: flex;
29 | }
30 |
31 | .business-photo-review-form{
32 | height: 62px;
33 | width: 62px;
34 | border-radius: 5px;
35 | }
36 |
37 | .biz-name-link {
38 | color: #0073BB;
39 | font-family: sans-serif;
40 | font-weight: bold;
41 | font-size: 14px;
42 | margin-left: 10px;
43 | }
44 |
45 | .cuisine-link-review-form {
46 | font-family: sans-serif;
47 | color: #0073BB;
48 | font-size: 12px;
49 | margin-left: 12px;
50 | }
51 |
52 | .biz-address-review-forms {
53 | font-family: sans-serif;
54 | font-size: 12px;
55 | margin-left: 12px;
56 | }
57 |
58 | .stars-and-review-body {
59 | height: 250px;
60 | width: 630px;
61 | border: 1px solid #999999;
62 | border-radius: 4px;
63 | }
64 |
65 | .stars-and-review-body:focus-within {
66 | border: 1px solid #68A6D5;
67 | }
68 |
69 | .your-review-text {
70 | font-weight: bold;
71 | font-size: 14px;
72 | font-family: sans-serif;
73 | margin-top: 20px;
74 | padding-bottom: 7px;
75 | }
76 |
77 |
78 | .stars-ratings-form ~ .five {
79 | background-color: #D00D24;
80 | }
81 |
82 | .stars-review-biz-form {
83 | height: 50px;
84 | width: 600px;
85 | border-bottom: 1px solid #999999;
86 | margin-left: 14px;
87 | margin-top: 7px;
88 |
89 | }
90 |
91 |
92 | .yelp-stars {
93 | margin-top: 18px;
94 | display: flex;
95 | flex-direction: row-reverse;
96 | justify-content: flex-end;
97 | width: 0px;
98 | }
99 |
100 |
101 |
102 | .default {
103 | height: 32px;
104 | width: 32px;
105 | background-color: #CCCCCC;
106 | color: white;
107 | display: flex;
108 | justify-content: center;
109 | border-radius: 5px;
110 | font-size: 23px;
111 | cursor: pointer;
112 | border: 2px solid white;
113 | }
114 |
115 | .rating- {
116 | display: flex;
117 | font-family: sans-serif;
118 | font-size: 13px;
119 | margin-top: 10px;
120 | min-width: 200px;
121 | margin-left: 5px;
122 | }
123 |
124 |
125 | .pale-yellow {
126 | background-color: #F2BC82;
127 | }
128 |
129 | .yellow {
130 | background-color: #FDC116;
131 | }
132 | .orangy {
133 | background-color: #FF9151;
134 | }
135 |
136 | .pale-red {
137 | background-color: #F25A54;
138 | }
139 |
140 | .red {
141 | background-color: #D4202B;
142 | }
143 |
144 |
145 | // Yelp css inspired by Roko C. Buljan from stack overflow
146 | .yelp-stars>label:nth-child(1):hover,
147 | .yelp-stars>label:nth-child(1):hover ~ label{background-color: #D4202B;}
148 | .yelp-stars>label:nth-child(2):hover,
149 | .yelp-stars>label:nth-child(2):hover ~ label{background-color: #F25A54;}
150 | .yelp-stars>label:nth-child(3):hover,
151 | .yelp-stars>label:nth-child(3):hover ~ label{background-color: #FF9151;}
152 | .yelp-stars>label:nth-child(4):hover,
153 | .yelp-stars>label:nth-child(4):hover ~ label{background-color: #FDC116;}
154 | .yelp-stars>label:nth-child(5):hover,
155 | .yelp-stars>label:nth-child(5):hover ~ label{background-color: #F2BC82;}
156 |
157 |
158 |
159 | .stars-ratings-form {
160 | display: flex;
161 | flex-direction: column;
162 |
163 | }
164 | .stars-ratings-form ul {
165 | display: flex;
166 | }
167 |
168 | .rating-text-review {
169 | font-family: sans-serif;
170 | margin-left: 190px;
171 | margin-top: -25px;
172 |
173 | }
174 |
175 |
176 |
177 |
178 | .fa-star {
179 | font-size: 25px;
180 | height: 32px;
181 | width: 32px;
182 | margin-top: 4px;
183 | margin-left: 6px;
184 | }
185 |
186 |
187 | .text-review-form {
188 | margin-top: 10px;
189 | margin-left: 12px;
190 | width: 618px;
191 | height: 170px;
192 | font-family: sans-serif;
193 | }
194 |
195 | .add-info-form {
196 | color: #D70306;
197 | font-size: 16px;
198 | font-family: sans-serif;
199 | font-weight: bold;
200 | padding-bottom: 5px;
201 | margin-top: 15px;
202 | }
203 |
204 | .price-range-form {
205 | font-size: 14px;
206 | font-family: sans-serif;
207 | font-weight: bold;
208 | background-color: #F5F5F5;
209 | border-top: 1px solid #E6E6E6;
210 | padding-top: 15px;
211 | padding-left: 10px;
212 | }
213 |
214 | .price-list-form {
215 | display: flex;
216 | font-family: sans-serif;
217 | font-weight: 400;
218 | margin-top: 5px;
219 | margin-left: 15px;
220 | padding-bottom: 20px;
221 | padding-top: 20px;
222 | }
223 |
224 | .price-list-form li {
225 | margin-left: 15px;
226 | margin-right: 8px;
227 | }
228 |
229 | .delivery-form {
230 | background-color: #FFFFFF;
231 | font-size: 14px;
232 | font-family: sans-serif;
233 | font-weight: bold;
234 | border-top: 1px solid #E6E6E6;
235 | padding-top: 15px;
236 | padding-left: 10px;
237 | }
238 |
239 | .post-review-button {
240 | background-color: #E7000A;
241 | color: white;
242 | font-family: sans-serif;
243 | font-weight: bold;
244 | font-size: 12px;
245 | border: 1px solid #8B0006;
246 | width: 90px;
247 | height: 33px;
248 | border-radius: 4px;
249 | margin-top: 20px;
250 | padding-left: 24px;
251 | }
252 |
253 | .post-review-button:hover {
254 | background-color: #E02E33;
255 | }
256 |
257 | .cancel-review {
258 | color: #3D7CC4;
259 | font-family: sans-serif;
260 | font-size: 12px;
261 | margin-left: 15px;
262 | }
263 |
264 | .cancel-review:hover {
265 | text-decoration: underline;
266 | }
267 |
268 | .other-reviews {
269 | display: flex;
270 | justify-content: space-between;
271 | margin: auto;
272 | padding-left: 20px;
273 | }
274 |
275 |
276 | .main-div-form {
277 | display: flex;
278 | width: 100%;
279 | margin-top: 70px;
280 | }
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 | //
312 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/business_show.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | .biz-show-head {
6 | display: flex;
7 | max-width: 1100px;
8 | margin: 0 auto;
9 | margin-top: 100px;
10 | padding-left: 30px;
11 | justify-content: space-between;
12 | min-width: 800px;
13 | }
14 |
15 | .biz-name-main {
16 | font-size: 30px;
17 | font-family: sans-serif;
18 | font-weight: bold;
19 | }
20 |
21 | .rating-review-show {
22 | display: flex;
23 | margin-top: 19px;
24 | }
25 |
26 | .review-number-show {
27 | color: #666666;
28 | font-size: 14px;
29 | font-family: sans-serif;
30 | margin-left: 4px;
31 | margin-right: 4px;
32 | margin-top: 8px;
33 | }
34 |
35 | .review-text-show {
36 | color: #666666;
37 | font-size: 14px;
38 | font-family: sans-serif;
39 | margin-top: 8px;
40 | }
41 |
42 | .price-cuisine-show {
43 | display: flex;
44 | font-size: 18px;
45 | font-family: sans-serif;
46 | margin-top: 14px;
47 | }
48 |
49 | .cusine-link-show{
50 | color: #0073BB;
51 | margin-left: 8px;
52 | }
53 |
54 | .cusine-link-show:hover {
55 | text-decoration: underline;
56 | }
57 |
58 | .add-buttons-show {
59 | display: flex;
60 | margin-top: 65px;
61 | justify-content: center;
62 | }
63 |
64 | .review-button-show {
65 | height: 36px;
66 | width: 176px;
67 | background-color: #D70306;
68 | color: white;
69 | font-size: 15px;
70 | font-family: sans-serif;
71 | font-weight: bold;
72 | border: 1px solid #8D0005;
73 | border-radius: 5px;
74 | padding-top: 10px;
75 | padding-bottom: 10px;
76 | padding-left: 15px;
77 | padding-right: 17px;
78 | margin-left: 5px;
79 |
80 |
81 | }
82 |
83 | .fa-star:before {
84 | font-size: 20px;
85 | }
86 |
87 | .review-button-show:hover {
88 | background-color: #E02E33;
89 | }
90 |
91 | .review-button-button-show {
92 | height: 36px;
93 | width: 176;
94 | margin-left: 5px;
95 | font-size: 15px;
96 | padding-top: 5px;
97 | margin-right: 5px;
98 | }
99 |
100 | .fa-star {
101 | margin-left: 5px;
102 | font-size: 180px;
103 | height: 20px;
104 | width: 20px;
105 | }
106 |
107 | .photo-button-show {
108 | border: 1px solid #CCCCCC;
109 | color: #666666;
110 | height: 22px;
111 | width: 100px;
112 | font-size: 12px;
113 | font-weight: bold;
114 | font-family: sans-serif;
115 | display: flex;
116 | margin-left: 12px;
117 | margin-top: 4px;
118 | padding-top: 8px;
119 | padding-left: 18px;
120 | }
121 |
122 | .photo-button-show:hover {
123 | background-color: #F5F5F5;
124 | }
125 |
126 |
127 | .fa-camera {
128 | margin-right: 4px;
129 | display: none;
130 | }
131 |
132 | .website-link {
133 | color: #0073BB;
134 | font-family: sans-serif;
135 | font-size: 17px;
136 | margin-top: 7px;
137 | }
138 |
139 | .website-link:hover {
140 | text-decoration: underline;
141 | }
142 |
143 | .map-show {
144 | width: 300px;
145 | height: 400px;
146 | margin-top: 40px;
147 |
148 | }
149 |
150 | .picture-list-show {
151 | margin-top: 148px;
152 | display: flex;
153 | }
154 |
155 | .first-photo-show {
156 | height: 220px;
157 | width: 200px;
158 | border: 1px solid black;
159 | display: none;
160 | }
161 | .second-photo-show {
162 | height: 250px;
163 | width: 250px;
164 | margin-top: -10px;
165 | margin-right: 250px;
166 | }
167 | .third-photo-show {
168 | height: 220px;
169 | width: 200px;
170 | border: 1px solid black;
171 | display: none;
172 | }
173 |
174 | .biz-indiv-photo {
175 | height: 220px;
176 | width: 250px;
177 | object-fit: cover;
178 |
179 | }
180 |
181 | .photo-items-ul {
182 | display: flex;
183 | width: 750px;
184 | margin-top: 120px;
185 |
186 | }
187 |
188 | .biz-address-show {
189 | font-family: sans-serif;
190 | margin-top: 7px;
191 | }
192 |
193 |
194 | .photo-items-ul li {
195 | height: 250px;
196 | width: 250px;
197 | display: flex;
198 | align-items: center;
199 | }
200 |
201 | .photo-items-ul li:hover {
202 | cursor: pointer;
203 | }
204 |
205 | .all-hours-show {
206 | margin-bottom: 200px;
207 | margin-top: 28px;
208 | }
209 |
210 | .hours-div-show {
211 | color: #D70306;
212 | font-size: 18px;
213 | font-family: sans-serif;
214 | font-weight: bold;
215 |
216 |
217 |
218 | }
219 |
220 | .biz-show-reviews {
221 |
222 | }
223 |
224 | .biz-show-reviews-text {
225 | color: #D70306;
226 | font-size: 18px;
227 | font-family: sans-serif;
228 | font-weight: bold;
229 | margin-top: 30px;
230 | }
231 |
232 |
233 |
234 |
235 | .week-day {
236 | font-weight: bold;
237 | margin-right: 25px;
238 | }
239 |
240 | .hour-container-show {
241 | display: flex;
242 | font-family: sans-serif;
243 | font-size: 14px;
244 |
245 | }
246 |
247 | .hour-container-show ul li {
248 | margin-top: 5px;
249 | }
250 |
251 |
252 | .all-hours-show {
253 | border-left: 1px solid #E6E6E6;
254 | padding-left: 50px;
255 | padding-right: 50px;
256 |
257 |
258 | }
259 |
260 |
261 | .more-info-div {
262 | margin-top: 60px;
263 | }
264 |
265 | .noise-level-info-show {
266 | display: flex;
267 | }
268 |
269 | .delivery-info-show {
270 | display: flex;
271 | }
272 |
273 | .info-col-show {
274 | margin-top: 8px;
275 | font-size: 14px;
276 | font-family: sans-serif;
277 |
278 | }
279 |
280 | .info-col-ans-show {
281 | margin-top: 8px;
282 | font-size: 14px;
283 | font-family: sans-serif;
284 | font-weight: bold;
285 | margin-left: 7px;
286 | }
287 |
288 | .star-rating-show {
289 | display: flex;
290 | vertical-align: bottom;
291 | // padding-top: 8px;
292 | }
293 |
294 | .write-review-show-page-link {
295 | font-family: sans-serif;
296 | font-size: 13px;
297 | color: #5399CE;
298 | position: relative;
299 | align-self: baseline;
300 | }
301 |
302 | .review-div-show {
303 | padding-top: 6px;
304 | }
305 |
306 | .write-review-show-page-link:hover {
307 | text-decoration: underline;
308 | }
309 |
310 | .price-range-undefined {
311 | margin-top: 4px;
312 | }
313 |
314 | .see-all-photos {
315 | color:#0F70BB;
316 | display: flex;
317 | float: right;
318 | }
319 |
320 | .see-all-photos div {
321 | margin-left: 5px;
322 | }
323 | .see-all-photos div:hover {
324 | text-decoration: underline;
325 | }
326 |
327 |
328 | .fa-th-large {
329 | font-size: 10px;
330 | color: #666666;
331 | }
332 |
333 |
334 |
335 |
336 | //
337 |
--------------------------------------------------------------------------------
/frontend/components/landing/landing.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import SessionFormContainer from "../session/session_form_container";
4 | import SearchFormContainer from "../search_form_container";
5 | import BizLandingIndex from "../business/business_landing_container";
6 |
7 | class Landing extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | this.logButton = this.logButton.bind(this);
11 | this.clickHandler = this.clickHandler.bind(this);
12 | this.searchSubmit = this.searchSubmit.bind(this);
13 | this.cuisineSearch = this.cuisineSearch.bind(this);
14 | this.heroChange = this.heroChange.bind(this);
15 | this.classes = [
16 | "landing-background1",
17 | "landing-background2",
18 | "landing-background3",
19 | "landing-background4",
20 | "landing-background5",
21 | "landing-background6",
22 | "landing-background7",
23 | "landing-background8",
24 | "landing-background9"
25 | ];
26 | this.heroOff;
27 | }
28 |
29 | componentWillReceiveProps(nextprops) {
30 | if (this.props.formType !== nextprops.formType) {
31 | this.setState();
32 | }
33 | }
34 |
35 | clickHandler(event) {
36 | this.props.nextPage("/reviews");
37 | }
38 |
39 | componentDidMount() {
40 | if (this.props.intendedPage) {
41 | this.props.history.push(this.props.intendedPage);
42 | this.props.clearPage();
43 | } else {
44 | this.props.fetchBusinesses({
45 | cuisine: "",
46 | price_range: 4,
47 | noise_level: 4,
48 | delivery: false,
49 | bounds: "",
50 | name: ""
51 | });
52 | this.heroChange();
53 | }
54 | }
55 |
56 | componentWillUnmount() {
57 | clearInterval(this.heroOff);
58 | }
59 |
60 | searchSubmit() {
61 | this.props.fetchBusinesses({
62 | cuisine: "",
63 | price_range: 4,
64 | noise_level: 4,
65 | delivery: false,
66 | bounds: "",
67 | name: ""
68 | });
69 | this.props.history.push("/search");
70 | }
71 |
72 | cuisineSearch(event) {
73 | this.props.fetchBusinesses({
74 | cuisine: event._targetInst.memoizedProps.value.toLowerCase(),
75 | price_range: 4,
76 | noise_level: 4,
77 | delivery: false,
78 | bounds: "",
79 | name: event._targetInst.memoizedProps.value.toLowerCase()
80 | });
81 | this.props.history.push("/search");
82 | }
83 |
84 | logButton() {
85 | if (this.props.currentUser) {
86 | return (
87 |
88 | Log out
89 |
90 | );
91 | } else {
92 | return (
93 |
94 |
95 |
96 |
100 |
101 |
105 |
106 |
107 | );
108 | }
109 | }
110 |
111 |
112 | heroChange() {
113 | this.heroOff = setInterval(() => {
114 | $("#landing-hero").removeClass();
115 | let picClass = this.classes[
116 | Math.floor(Math.random() * this.classes.length)
117 | ];
118 | $("#landing-hero").addClass("landing-background " + picClass);
119 | }, 5000);
120 | }
121 |
122 | render() {
123 | let final =
124 | "landing-background " +
125 | this.classes[Math.floor(Math.random() * this.classes.length)];
126 | return (
127 |
128 |
129 |
130 |
131 | {this.logButton()}
133 |
134 |
135 |
136 |
137 |
138 |
142 |
146 |
147 |
152 | Restaurants
153 |
154 |
155 |
156 |
157 |
158 |
159 |
Help Places To Try
160 |
161 |
162 |
163 |
164 |
165 | Browse Business By Categoy
166 |
167 |
168 |
169 |
170 |
171 | Coffee
172 |
173 |
174 |
175 | Bars
176 |
177 |
178 |
179 | Desserts
180 |
181 |
182 |
183 | Diners
184 |
185 |
186 |
187 | French
188 |
189 |
190 |
191 | Pizza
192 |
193 |
194 |
195 | Steakhouses
196 |
197 |
198 |
199 | Italian
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 | );
220 | }
221 | }
222 |
223 | export default Landing;
224 |
--------------------------------------------------------------------------------
21 | 
81 |