Skip to content

Addie and Alison Video Store #19

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.

Sign up for GitHub

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

Open
AlisonZ wants to merge 42 commits into
base: master
Choose a base branch
from
Open

Addie and Alison Video Store #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
be574af
sets up movie modesl, collections and views
AlisonZ Jun 14, 2017
875d1ae
set up views and app.js with imports
AlisonZ Jun 14, 2017
603f380
set up MovieListView
add2point71dots Jun 14, 2017
4f6f257
movie list is showing, images are broken
AlisonZ Jun 14, 2017
00fa19a
can search for movies and they display!
add2point71dots Jun 14, 2017
6b99cd5
searched movies show up with an add button
AlisonZ Jun 14, 2017
439eda8
can maybe add a movie but need to do rails stuff to make it work
add2point71dots Jun 14, 2017
b9f331d
movie list view changes
AlisonZ Jun 15, 2017
acf3a4f
refactored getting searched movie results
add2point71dots Jun 15, 2017
f30b2f9
deleted unnecessary comments
add2point71dots Jun 15, 2017
8f8198a
wip
AlisonZ Jun 15, 2017
9b9d617
error handling for main page working, error handling for search funct…
AlisonZ Jun 16, 2017
f4b9f5c
search error handling works!
add2point71dots Jun 16, 2017
ec4cc6d
Displays error messages to user
add2point71dots Jun 16, 2017
0b66460
can click on a movie which will make api call for the movie details b…
add2point71dots Jun 19, 2017
f9c58d3
making calls to API using title
AlisonZ Jun 19, 2017
9eae4dc
details showing when items in our database are added
AlisonZ Jun 19, 2017
ac85cfc
toggle between images and movie details
AlisonZ Jun 19, 2017
5e91bf4
shows all movie details
AlisonZ Jun 19, 2017
9228f1a
updates movie view
AlisonZ Jun 19, 2017
cb6525c
goes back to inventory after adding a movie
add2point71dots Jun 19, 2017
744d6c7
fixed the broken details toggle thing
add2point71dots Jun 20, 2017
5b2091b
adds error handling and messages
AlisonZ Jun 20, 2017
fdda4cf
made search buttons disappear when going back to inventory
add2point71dots Jun 20, 2017
7b9b216
creates basic basic structure of customer model and collections
AlisonZ Jun 20, 2017
0d878e3
refactored addmovie method & stub for going to rental form thing
add2point71dots Jun 20, 2017
12f9a1f
goes to a new view when you click to rent
add2point71dots Jun 20, 2017
d79bab4
deleted unused css directory
add2point71dots Jun 20, 2017
4087bb7
going to rental view and displaying movie info, has access to custome…
AlisonZ Jun 21, 2017
433f703
WIP working on customer dropdown
add2point71dots Jun 21, 2017
d5b7239
we have access to a collection of customers
AlisonZ Jun 21, 2017
d78efca
SHOWING ALL CUSTOMERS IN A DROPDOWNgit add .git add .git add .
AlisonZ Jun 21, 2017
c565af6
can create rental but only for Psycho and due date is also hard coded
add2point71dots Jun 21, 2017
061599c
posting new rentals
AlisonZ Jun 21, 2017
bc7a378
error handling for rental creation
add2point71dots Jun 21, 2017
29a37af
adds basic CSS
AlisonZ Jun 23, 2017
d54de60
backgrouds on movie listings woo!
add2point71dots Jun 23, 2017
8d74eac
added some colors and fonts
AlisonZ Jun 23, 2017
45d3b43
more styling
add2point71dots Jun 23, 2017
73c0ce8
adjusts height of title and li divs
AlisonZ Jun 23, 2017
3b04c2c
can check in but some checkout stuff is messed up :((((
add2point71dots Jun 23, 2017
6706fd1
adds json
Nov 10, 2017
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
125 changes: 107 additions & 18 deletions build/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,133 @@
@include foundation-everything;
@import url('https://fonts.googleapis.com/css?family=Frijole|Roboto|Salsa');

main {
background: lightblue;
}
body {
/*background: #24303C;*/
font-family: 'Roboto', sans-serif;
background: #24303C; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #24303C, #577592); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #24303C, #577592); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
header {
background-color: lightgreen;
padding: 0.5rem;
padding: 0.5rem;
}

h1 a {
text-decoration: none;
font-family: 'Frijole', cursive;
color: white;
}

h1 a:hover {
color: white;
}

#completed-checkbox {
display: inline;
display: inline;
}

label {
display: inline;
display: inline;
}

button.success {
margin-right: 1.2rem;
display: inline;
margin-right: 1.2rem;
display: inline;
}

aside.create-tasklist {
background-color: navy;
color: #FFFFFF;
background-color: navy;
color: #FFFFFF;
}
aside label {
color: #FFFFFF;
color: #FFFFFF;
}

.completed {
text-decoration: line-through;
text-decoration: line-through;
}

div {
display: inline;
display: inline;
}

main {
padding: 1%;
}

#movie-list li {
text-align: center;
list-style-type: none;
/*border: solid 1px black;*/
height: 500px;
overflow: scroll;
background: #58cdb5;
}

#movie-list li:nth-child(5n + 1) {
background: #75d6c1;
}

#movie-list li:nth-child(5n + 2) {
background: #1ABB99;
}

#movie-list li:nth-child(5n + 3) {
background: #138c72;
}

#movie-list li:nth-child(5n + 4) {
background: #19b695;
}
/*
* {
border-style: solid;

#movie-list {
margin: 0;
padding: 0;
}


#movie-list .movie-title{
height: 115px;
overflow: scroll;
/*overflow: hidden;*/
font-family: 'Frijole', cursive;
}

#movie-list .movie_image_details h4{
color: #24303C;
font-family: 'Salsa', cursive;
}

#movie-list img {
border-radius: 5px;
}

.movie_image_details img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.movie_image_details {
cursor: pointer;
}

#rental-creation h2, #rental-creation label{
font-family: 'Frijole', cursive;
color: white;
}

.button {
border-radius: 5px;
border: solid white 1px;
background: #24303C;
margin-right: 1%;
font-family: 'Salsa', cursive;
}

.button:hover {
background: #577592;
}

#messages {
color: white;
}
*/
Binary file added build/images/favicon.ico
View file
Open in desktop
Binary file not shown.
93 changes: 86 additions & 7 deletions build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/_settings.css">
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Backbone Baseline</title>
</head>
<body>
<link rel="shortcut icon" href="images/favicon.ico">
<title>Spicy Flix</title>
</head>
<body>
<header class="row">
<h1><a href="http://localhost:8081">Spicy Flix</a></h1>
</header>
<main class="row">

<script src="/app.bundle.js"></script>
<input type="text" class="small-12 columns" id="query" placeholder="Search for movies">
<button id="search-button" class="button">Search</button>
<button id="home-button" class="button">Return to Inventory</button>
<section id="messages"></section>
<section id="rental-creation"></section>
<ul id="movie-list" class="row small-up-2 medium-up-3 large-up-4"></ul>
</main>

<script id="rental-creation-template" type="text/template">
<h2>Rent <%- movie.title %></h2>
<form id="checkout-form">
<section class="small-12 medium-6 columns">
<label for="customer-menu">Pick a customer:</label>
<select id="customer-menu">
<% for( var i = 0; i < customers.length; i++){ %>
<option value='<%- customers[i].id %>'>
<%- customers[i].name%>
</option>
<% } %>
</select>
</section>
<section class="small-12 medium-6 columns">
<label for="date">Pick a due date:</label>
<input type="date" id="due-date">
</section>
<input type="submit" id="checkout-button" class="button" value="Check It Out!">
</form>
</script>

<script id="checkin-template" type="text/template">
<h2>Check in <%- movie.title %></h2>
<form id="checkin-form">
<label for="customer-menu">Pick a customer:</label>
<select id="customer-menu">
<% for( var i = 0; i < customers.length; i++){ %>
<option value='<%- customers[i].id %>'>
<%- customers[i].name%>
</option>
<% } %>
</select>
<input type="submit" id="checkin-button" class="button" value="Return it!">
</form>
</script>

</body>
</html>
<script id="customer-listing-template" type="text/template">
<%- customer.name %>
</script>

<script id="movie-item-template" type="text/template">
<h3 class='movie-title'><%- movie.title %></h3>

<% if (searched){ %>
<section>
<% } else { %>
<section class="movie_image_details">
<% } %>
<% if (detailsClicked) {%>
<h4>Movie Overview</h4>
<p><%- movie.overview %></p>
<h4>Release Date:</h4>
<p><%- movie.release_date %></p>
<h4>Inventory: <%- movie.inventory %></h4>
<h4>Available: <%- movie.available_inventory %></h4>
<% } else { %>
<img src="<%- movie.image_url %>" alt="<%- movie.title %>">
<p class="no-details"></p>
<% } %>
</section>
<% if (searched){ %>
<button class='add-movie button'>Pick Me!!</button>
<% } else { %>
<button class='rental-button button'>Rent Me</button>
<button class='checkin-button button'>Check In</button>
<% } %>
</script>
<script src="/app.bundle.js"></script>
</body>
</html>
Loading