Skip to content

project-cinema-ralph #5

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
r41ph wants to merge 20 commits into
base: master
Choose a base branch
from
Open

project-cinema-ralph #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2fae5a9
Added index.html and main js file
Jun 8, 2018
fbf7c3e
Added search form and search results placeholder
Jun 8, 2018
bf501a5
Added OMDB API
Jun 8, 2018
d34bb31
Added fetch and console.log results
Jun 8, 2018
792980c
Update file structure and added CSS
Jun 8, 2018
8f5b485
Added template literal for movies
Jun 8, 2018
c90b10d
Added movie list style
Jun 8, 2018
b403cef
Added image placeholder for movies with no image
Jun 8, 2018
7e5728d
Added movie More Info button
Jun 8, 2018
1779377
Added movie More Info button functionality
Jun 8, 2018
b05983a
Added CSS variables and search input style
Jun 9, 2018
55f98eb
Responsive css fixes
Jun 9, 2018
9b7d466
Added show/hide functionality to More info button
Jun 9, 2018
f504541
Added link icon
Jun 9, 2018
61010cc
Movie details fetch refactor
Jun 9, 2018
59cb747
Added results navigation
Jun 10, 2018
39879bf
Added search filters
Jun 10, 2018
a8fc2a1
Working on autocomplete
Jun 10, 2018
1ae162d
Fix Autocomplete click on item
Jun 11, 2018
8776b19
Clear autocomplete after submit
Jun 11, 2018
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
51 changes: 51 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Project Cinema</title>
<link rel="stylesheet" href="./src/css/style.css">
</head>

<body>
<div class="container">
<h1 class="main-heading">OMDb Movie search</h1>
<section class="search-form">
<form action="" id="movie-request__form" class="movie-request__form">
<input placeholder="Type your search here" type="text" name="movie-request__input" id="movie-request__input" class="movie-request__input">
<ul id="autocomplete" class="autocomplete">
</ul>
<button class="movie-request__submit" type="submit">Search</button>
<button class="movie-request__filters-toggle" id="movie-request__filters-toggle" type="button">Search filters</button>
<div id="movie-request__filters-list" class="movie-request__filters-list hidden">
<label for="movie-request__filters-type">Type</label>
<select name="movie-request__filters-type" id="movie-request__filters-type">
<option value="movie">movie</option>
<option value="series">series</option>
<option value="episode">episode</option>
</select>
<label for="movie-request__filters-year">Year</label>
<select name="movie-request__filters-year" id="movie-request__filters-year">
<option value="Test 1">Test 1</option>
<option value="Test 1">Test 2</option>
</select>

</div>
</form>
</section>
<div id="error-box" class="error-box">
<p class="error-box__message"></p>
</div>
<ul id="pagination" class="pagination">
<li id="prev-page">PREV </li>
<li id="pagination-index" class="pagination-index"></li>
<li id="next-page"> NEXT</li>
</ul>
<section class="search-results" id="search-results">

</section>
</div>
<script src="./src/js/index.js"></script>
</body>

</html>
209 changes: 209 additions & 0 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
/* font-family: 'Source Sans Pro', sans-serif; */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");

:root {
--primary-color: #f1f1f1;
--secondary-color: #fdb813;
}

body {
font-family: "Source Sans Pro", sans-serif;
margin: 0;
padding: 0;
font-size: 16px;
}
.container {
width: 100%;
max-width: 100%;
}

h1.main-heading {
padding-left: 30px;
}

@media (min-width: 768px) {
h1.main-heading {
padding-left: 0;
}
}

/* Search form */
.search-form {
/* margin-bottom: 60px; */
background-color: var(--primary-color);
padding: 30px;
}

@media (min-width: 768px) {
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
}

.movie-request__form {
display: block;
position: relative;
}
@media (min-width: 768px) {
.movie-request__form {
display: flex;
flex-wrap: wrap;
}
}

.search-form input.movie-request__input {
width: calc(100% - 36px);
padding: 15px;
font-size: 1.1rem;
color: var(--secondary-color);
}

.movie-request__submit {
width: 100%;
padding: 20px;
border: none;
background-color: var(--secondary-color);
color: #fff;
font-size: 0.875rem;
}

@media (min-width: 768px) {
.movie-request__submit {
width: 100px;
}
.search-form input.movie-request__input {
width: calc(100% - 140px);
}
}

/* Autocomplete */
.autocomplete {
width: calc(100% - 25px);
position: absolute;
top: 58px;
background-color: #fff;
margin: 0;
left: 1px;
list-style-type: none;
padding-left: 20px;
}
.autocomplete li {
line-height: 30px;
}
.autocomplete li:hover {
color: #666;
cursor: pointer;
}

/* Search filters */
.movie-request__filters-list {
width: 100%;
margin-top: 10px;
padding-left: 9px;
}
.movie-request__filters-list.hidden {
display: none;
}
.movie-request__filters-list select {
margin-right: 10px;
}
.movie-request__filters-list label {
font-size: 0.875rem;
}

.movie-request__filters-toggle {
border: none;
background-color: transparent;
margin-top: 10px;
font-size: 0.875rem;
}

.movie-request__filters-toggle:hover {
cursor: pointer;
opacity: 0.7;
}

/* Movies list */
.movie-list-wrapper {
display: grid;
grid-template-columns: 100%;
padding: 30px;
margin-bottom: 30px;
background-color: var(--primary-color);
}
@media (min-width: 480px) {
.movie-list-wrapper {
grid-template-columns: 200px auto;
}
}

.movie-info__moreinfo {
display: block;
margin-top: 10px;
margin-bottom: 10px;
width: 100px;
height: 40px;
border: none;
background-color: var(--secondary-color);
color: #fff;
font-size: 0.875rem;
}

.movie-info__title {
border-bottom: 2px solid var(--secondary-color);
}
.movie-info__imdb-link {
display: block;
color: #000;
}

.movie-poster img {
width: 100%;
max-width: 100%;
}

@media (min-width: 480px) {
.movie-poster img {
width: 100%;
max-width: 150px;
}
}

/* Movie more info details */
ul.movie-info__moreinfo-details {
list-style-type: none;
padding-left: 0;
}

/* Errors */
.error-box {
display: none;
width: calc(100% - 44px);
color: #fff;
background-color: tomato;
padding: 10px 20px;
}

/* Pagination */
.pagination {
list-style-type: none;
visibility: hidden;
display: flex;
justify-content: flex-end;
width: 100%;
padding-left: 0;
}

.pagination-index {
margin: 0 20px;
}

/* .pagination li {
} */

.pagination li:hover {
cursor: pointer;
opacity: 0.7;
}
Loading