This repository has been archived by the owner on Jun 28, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
David Harris
committed
Aug 9, 2017
0 parents
commit f12593b
Showing
18 changed files
with
1,366 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| # Mobile Web Specialist Certification Course | ||
| --- | ||
| #### _Three Stage Course Material Project - Restaurant Reviews_ | ||
|
|
||
| ## Project Delivery | ||
|
|
||
| Restaurant reviews application with a focus on mobile rendering with accessibility. The application must include a local node server and client app to support authentication, restaurant names, a photograph, address and operating hours for each restaurant along with reviews, including the name of the reviewer, date of review, 5-star rating system, and comments. The application must include an application header, a menu providing multiple ways to filter the restaurants. When viewing a specific restaurant, current reviews must be displayed along with a form for the user to submit their own review. | ||
|
|
||
| _*Development will focus on local engineering sandbox. Files, resources, and server side services will run on the users local machine._ | ||
|
|
||
| ## Architecture | ||
| Web client | ||
| - 100% javascript (ES6) | ||
| - HTML5/CSS | ||
| - [Ajax](https://blog.garstasio.com/you-dont-need-jquery/ajax/) | ||
|
|
||
| Local server | ||
| - Node.js | ||
| -- Hapi.js | ||
| -- Passport.js | ||
| -- SQlite | ||
|
|
||
| ## Contributors | ||
|
|
||
| - [Brandy Lee Camacho - Technical Project Manager](mailto:brandy.camacho@udacity.com) | ||
| - [David Harris - Web Services Lead](mailto:david.harris@udacity.com) | ||
| - [Omar Albeik - Frontend engineer](mailto:omaralbeik@gmail.com) | ||
|
|
||
|
|
||
| ## Getting Started | ||
|
|
||
| TBD: These instructions will get you a copy of the project up and running on your | ||
| local machine for development. | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| TBD: What things you need to install the software and how to install them, | ||
| including pointers how to get any required credentials. | ||
|
|
||
| ```bash | ||
| # (Give examples) | ||
| ``` | ||
| (End with step to validate that the project is up and running locally) | ||
|
|
||
| ```bash | ||
| # (Validate) | ||
| ``` | ||
| ### Installing | ||
| ```bash | ||
| # (Give examples) npm install | ||
| ``` | ||
| ## Found an Issue? | ||
|
|
||
| If you find a bug in the source code or a mistake in the documentation, you can help us by | ||
| submitting an issue to our [GitHub Repository](https://github.com/udacity-blitz/mobile-web-specialist/issues). Even better you can submit a Pull Request | ||
| with a fix :) | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,275 @@ | ||
| @charset "utf-8"; | ||
| /* CSS Document */ | ||
|
|
||
| body,td,th,p{ | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 10pt; | ||
| color: #333; | ||
| line-height: 1.5; | ||
| } | ||
| body { | ||
| background-color: #fdfdfd; | ||
| margin: 0; | ||
| position:relative; | ||
| } | ||
| ul, li { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 10pt; | ||
| color: #333; | ||
| } | ||
| a { | ||
| color: orange; | ||
| text-decoration: none; | ||
| } | ||
| a:hover, a:focus { | ||
| color: #3397db; | ||
| text-decoration: none; | ||
| } | ||
| a img{ | ||
| border: none 0px #fff; | ||
| } | ||
| h1, h2, h3, h4, h5, h6 { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| margin: 0 0 20px; | ||
| } | ||
| article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summery { | ||
| display: block; | ||
| } | ||
| #maincontent { | ||
| background-color: #f3f3f3; | ||
| min-height: 100%; | ||
| } | ||
| #footer { | ||
| background-color: #444; | ||
| color: #aaa; | ||
| font-size: 8pt; | ||
| letter-spacing: 1px; | ||
| padding: 25px; | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| } | ||
| /* ====================== Navigation ====================== */ | ||
| nav { | ||
| width: 100%; | ||
| height: 80px; | ||
| background-color: #252831; | ||
| text-align:center; | ||
| } | ||
| nav h1 { | ||
| margin: auto; | ||
| } | ||
| nav h1 a { | ||
| color: #fff; | ||
| font-size: 14pt; | ||
| font-weight: 200; | ||
| letter-spacing: 10px; | ||
| text-transform: uppercase; | ||
| } | ||
| #breadcrumb { | ||
| padding: 10px 40px 16px; | ||
| list-style: none; | ||
| background-color: #eee; | ||
| font-size: 17px; | ||
| margin: 0; | ||
| width: calc(50% - 80px); | ||
| } | ||
|
|
||
| /* Display list items side by side */ | ||
| #breadcrumb li { | ||
| display: inline; | ||
| } | ||
|
|
||
| /* Add a slash symbol (/) before/behind each list item */ | ||
| #breadcrumb li+li:before { | ||
| padding: 8px; | ||
| color: black; | ||
| content: "/\00a0"; | ||
| } | ||
|
|
||
| /* Add a color to all links inside the list */ | ||
| #breadcrumb li a { | ||
| color: #0275d8; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| /* Add a color on mouse-over */ | ||
| #breadcrumb li a:hover { | ||
| color: #01447e; | ||
| text-decoration: underline; | ||
| } | ||
| /* ====================== Map ====================== */ | ||
| #map { | ||
| height: 400px; | ||
| width: 100%; | ||
| background-color: #ccc; | ||
| } | ||
| /* ====================== Restaurant Filtering ====================== */ | ||
| .filter-options { | ||
| width: 100%; | ||
| height: 50px; | ||
| background-color: #3397DB; | ||
| align-items: center; | ||
| } | ||
| .filter-options h2 { | ||
| color: white; | ||
| font-size: 1rem; | ||
| font-weight: normal; | ||
| line-height: 1; | ||
| margin: 0 20px; | ||
| } | ||
| .filter-options select { | ||
| background-color: white; | ||
| border: 1px solid #fff; | ||
| font-family: Arial,sans-serif; | ||
| font-size: 11pt; | ||
| height: 35px; | ||
| letter-spacing: 0; | ||
| margin: 10px; | ||
| padding: 0 10px; | ||
| width: 200px; | ||
| } | ||
|
|
||
| /* ====================== Restaurant Listing ====================== */ | ||
| #restaurants-list { | ||
| background-color: #f3f3f3; | ||
| list-style: outside none none; | ||
| margin: 0; | ||
| padding: 30px 15px 60px; | ||
| text-align: center; | ||
| } | ||
| #restaurants-list li { | ||
| background-color: #fff; | ||
| border: 2px solid #ccc; | ||
| font-family: Arial,sans-serif; | ||
| margin: 15px; | ||
| min-height: 380px; | ||
| padding: 0 30px 25px; | ||
| text-align: left; | ||
| width: 270px; | ||
| } | ||
| #restaurants-list .restaurant-img { | ||
| background-color: #ccc; | ||
| display: block; | ||
| margin: 0; | ||
| max-width: 100%; | ||
| min-height: 248px; | ||
| min-width: 100%; | ||
| } | ||
| #restaurants-list li h1 { | ||
| color: #f18200; | ||
| font-family: Arial,sans-serif; | ||
| font-size: 14pt; | ||
| font-weight: 200; | ||
| letter-spacing: 0; | ||
| line-height: 1.3; | ||
| margin: 20px 0 10px; | ||
| text-transform: uppercase; | ||
| } | ||
| #restaurants-list p { | ||
| margin: 0; | ||
| font-size: 11pt; | ||
| } | ||
| #restaurants-list li a { | ||
| background-color: orange; | ||
| border-bottom: 3px solid #eee; | ||
| color: #fff; | ||
| display: inline-block; | ||
| font-size: 10pt; | ||
| margin: 15px 0 0; | ||
| padding: 8px 30px 10px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| /* ====================== Restaurant Details ====================== */ | ||
| .inside header { | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| } | ||
| .inside #map-container { | ||
| background: blue none repeat scroll 0 0; | ||
| height: 87%; | ||
| position: fixed; | ||
| right: 0; | ||
| top: 80px; | ||
| width: 50%; | ||
| } | ||
| .inside #map { | ||
| background-color: #ccc; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| .inside #footer { | ||
| bottom: 0; | ||
| position: absolute; | ||
| width: 50%; | ||
| } | ||
| #restaurant-name { | ||
| color: #f18200; | ||
| font-family: Arial,sans-serif; | ||
| font-size: 20pt; | ||
| font-weight: 200; | ||
| letter-spacing: 0; | ||
| margin: 15px 0 30px; | ||
| text-transform: uppercase; | ||
| line-height: 1.1; | ||
| } | ||
| #restaurant-img { | ||
| width: 90%; | ||
| } | ||
| #restaurant-address { | ||
| font-size: 12pt; | ||
| margin: 10px 0px; | ||
| } | ||
| #restaurant-cuisine { | ||
| background-color: #333; | ||
| color: #ddd; | ||
| font-size: 12pt; | ||
| font-weight: 300; | ||
| letter-spacing: 10px; | ||
| margin: 0 0 20px; | ||
| padding: 2px 0; | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| width: 90%; | ||
| } | ||
| #restaurant-container, #reviews-container { | ||
| border-bottom: 1px solid #d9d9d9; | ||
| border-top: 1px solid #fff; | ||
| padding: 140px 40px 30px; | ||
| width: 50%; | ||
| } | ||
| #reviews-container { | ||
| padding: 30px 40px 80px; | ||
| } | ||
| #reviews-container h2 { | ||
| color: #f58500; | ||
| font-size: 24pt; | ||
| font-weight: 300; | ||
| letter-spacing: -1px; | ||
| padding-bottom: 1pt; | ||
| } | ||
| #reviews-list { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| #reviews-list li { | ||
| background-color: #fff; | ||
| border: 2px solid #f3f3f3; | ||
| display: block; | ||
| list-style-type: none; | ||
| margin: 0 0 30px; | ||
| overflow: hidden; | ||
| padding: 0 20px 20px; | ||
| position: relative; | ||
| width: 85%; | ||
| } | ||
| #reviews-list li p { | ||
| margin: 0 0 10px; | ||
| } | ||
| #restaurant-hours td { | ||
| color: #666; | ||
| } |
Oops, something went wrong.