Skip to content

Commit 78c3634

Browse files
syntncsyntnc
committed
Add Search using TMDb API
1 parent 06354cd commit 78c3634

File tree

17 files changed

+570
-0
lines changed

17 files changed

+570
-0
lines changed

‎manage.py

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#!/usr/bin/env python
2+
import os
3+
import sys
4+
5+
if __name__ == '__main__':
6+
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'pytmdb.settings')
7+
try:
8+
from django.core.management import execute_from_command_line
9+
except ImportError as exc:
10+
raise ImportError(
11+
"Couldn't import Django. Are you sure it's installed and "
12+
"available on your PYTHONPATH environment variable? Did you "
13+
"forget to activate a virtual environment?"
14+
) from exc
15+
execute_from_command_line(sys.argv)

‎movies/__init__.py

Whitespace-only changes.

‎movies/admin.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
from django.contrib import admin
2+
3+
# Register your models here.

‎movies/apps.py

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
from django.apps import AppConfig
2+
3+
4+
class MoviesConfig(AppConfig):
5+
name = 'movies'

‎movies/config.cfg

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[tmdb]
2+
API_KEY = 5c5a243c75f8ea36397ce6873830a4a5

‎movies/migrations/__init__.py

Whitespace-only changes.

‎movies/models.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
from django.db import models
2+
3+
# Create your models here.

‎movies/static/movies/app.css

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
2+
@import url('https://fonts.googleapis.com/css?family=Oswald');
3+
4+
* {
5+
box-sizing: border-box;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
html {
11+
font-size: 16px;
12+
}
13+
14+
body::before {
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
width: 100%;
19+
content: " ";
20+
border-bottom: 0.5rem solid #00C851;
21+
z-index: 9999;
22+
}
23+
24+
/* global styles */
25+
26+
.show {
27+
display: block !important;
28+
}
29+
30+
.hide {
31+
display: none;
32+
}
33+
34+
.js-modal {
35+
z-index: 9999;
36+
}
37+
38+
.container {
39+
max-width: 1140px;
40+
margin: 0 auto;
41+
}
42+
43+
.nav {
44+
margin-top: 0.5rem;
45+
background: #202020;
46+
height: 10.375rem;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
}
51+
52+
.nav__menu {
53+
/* align-items: center; */
54+
display: flex;
55+
}
56+
57+
.nav__item {
58+
text-decoration: none;
59+
color: #eee;
60+
font-family: Oswald, sans-serif;
61+
}
62+
63+
.nav__header {
64+
letter-spacing: 1.2px;
65+
font-family: 'Oswald', sans-serif;
66+
color: #fff;
67+
font-size: 2rem;
68+
text-decoration: none;
69+
justify-content: center;
70+
}
71+
72+
.search-form {
73+
text-align: center;
74+
display: flex;
75+
justify-content: center;
76+
text-decoration-color: #eee
77+
}
78+
79+
.search-form__query {
80+
width: 20rem;
81+
font-size: 1.4rem;
82+
padding: 1rem 1.2rem;
83+
font-family: 'Oswald', sans-serif;
84+
caret-color: #00C851;
85+
text-decoration-color: #eee
86+
}
87+
88+
.search-form__query:focus {
89+
outline: none;
90+
color: #eee;
91+
}
92+
93+
.search-form__icon {
94+
background-color: #00C851;
95+
font-size: 2rem;
96+
padding: 1rem;
97+
}
98+
99+
.search-form__icon > .fa-search {
100+
color: white;
101+
}
102+
103+
.main {
104+
background: #202020;
105+
/* fallback for old browsers */
106+
/* background-image: url('./clock-pattern.png'); */
107+
}
108+
109+
.result {
110+
background-image: linear-gradient(#1E1E1E 0%, #000 100%);
111+
height: auto;
112+
}
113+
114+
.movies {
115+
padding: 3rem 0;
116+
border-radius: 4px;
117+
display: flex;
118+
flex-wrap: wrap;
119+
min-height: 100vh;
120+
}
121+
122+
.movies__item {
123+
width: 33.33333%;
124+
border-radius: 4px;
125+
position: relative;
126+
}
127+
128+
.movies__item-title {
129+
z-index: 11000;
130+
font-size: 1rem;
131+
font-family: Oswald, sans-serif;
132+
position: absolute;
133+
transform: translateX(-50%);
134+
left: 50%;
135+
top: 30%;
136+
color: white;
137+
}
138+
139+
.movies__item-image {
140+
transition: all 0.2s ease;
141+
width: 100%;
142+
height: 45vw;
143+
max-height: 35.626rem;
144+
box-shadow: 0 0 5px 2px rgba(0,0,0,0.1);
145+
}
146+
147+
.movies__item-star {
148+
z-index: 9998;
149+
color: #00C851;
150+
top: 10%;
151+
font-size: 3rem;
152+
position: absolute;
153+
left: 50%;
154+
transform: translateX(-50%);
155+
}
156+
157+
.movies__item-details-button {
158+
z-index: 9998;
159+
padding: 0 0.2rem;
160+
background: #333;
161+
position: absolute;
162+
outline: none;
163+
border: 0;
164+
top: 2rem;
165+
border-radius: 50%;
166+
right: 1rem;
167+
}
168+
169+
.movies__item-details-button:hover {
170+
cursor: pointer;
171+
transform: scale(1.3);
172+
}
173+
174+
.movies__item-details {
175+
font-size: 1.4rem;
176+
color: #00C851;
177+
}
178+
179+
.movies__item-rating {
180+
z-index: 9998;
181+
font-size: 3rem;
182+
font-family: Oswald, sans-serif;
183+
position: absolute;
184+
transform: translateX(-50%);
185+
left: 50%;
186+
top: 20%;
187+
color: white;
188+
}
189+
190+
.movies__item-expander {
191+
font-weight: bold;
192+
font-size: 1rem;
193+
text-decoration: none;
194+
text-align: center;
195+
position: absolute;
196+
transform: translateX(-50%);
197+
left: 50%;
198+
bottom: 10%;
199+
z-index: 9998;
200+
background-color: #00C851;
201+
padding: 1rem 1rem;
202+
color: white;
203+
font-family: 'Open Sans', sans-serif;
204+
}
205+
206+
.movies__item-expander:hover {
207+
background: #00C851;
208+
cursor: pointer;
209+
}
210+
211+
.footer {
212+
background-color: #282A3A !important;
213+
padding: 1rem 0;
214+
}
215+
216+
.footer__text {
217+
color: #00C851 !important;
218+
text-align: center;
219+
font-size: 0.8rem;
220+
font-family: 'Open sans', sans-serif;
221+
}
222+
223+
@media only screen and (max-width: 1224px) {
224+
html {
225+
font-size: 16px;
226+
}
227+
228+
.container {
229+
padding-left: 1rem;
230+
padding-right: 1rem;
231+
}
232+
233+
}
234+
235+
@media only screen and (max-width: 768px) {
236+
html {
237+
font-size: 14px;
238+
}
239+
240+
.movies__item {
241+
width: 50%;
242+
}
243+
244+
.movies__item-image {
245+
height: 60vw;
246+
}
247+
}
248+
249+
@media only screen and (max-width: 480px) {
250+
html {
251+
font-size: 12px;
252+
}
253+
254+
.movies__item-image {
255+
height: 100vw;
256+
}
257+
258+
.movies__item {
259+
width: 100%;
260+
}
261+
}

‎movies/static/movies/app.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
function modal() {
2+
$("#modal-trigger").animatedModal({
3+
modalTarget:'js-modal',
4+
animatedIn:'lightSpeedIn',
5+
animatedOut:'bounceOutDown',
6+
color:'#3498db',
7+
// Callbacks
8+
beforeOpen: function() {
9+
console.log("The animation was called");
10+
},
11+
afterOpen: function() {
12+
console.log("The animation is completed");
13+
},
14+
beforeClose: function() {
15+
console.log("The animation was called");
16+
},
17+
afterClose: function() {
18+
console.log("The animation is completed");
19+
}
20+
});
21+
}
22+
23+
function main() {
24+
$('.movies__item').hover(function() {
25+
$(this).find('.movies__item-image').css({"filter": "brightness(20%)"});
26+
$(this).find('.movies__item-star').toggleClass('hide');
27+
$(this).find('.movies__item-rating').toggleClass('hide');
28+
$(this).find('.movies__item-expander').toggleClass('hide');
29+
$(this).find('.movies__item-title').toggleClass('hide');
30+
}, function() {
31+
$(this).find('.movies__item-image').css({"filter": "brightness(100%)"});
32+
$(this).find('.movies__item-star').toggleClass('hide');
33+
$(this).find('.movies__item-rating').toggleClass('hide');
34+
$(this).find('.movies__item-expander').toggleClass('hide');
35+
$(this).find('.movies__item-title').toggleClass('hide');
36+
});
37+
38+
modal();
39+
}
40+
41+
$(document).ready(main());

‎movies/templates/movies/movie.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
{% load static %}
3+
4+
<html>
5+
<head>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
7+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
9+
<link rel="stylesheet" href="{% static 'movies/app.css' %}"/>
10+
</head>
11+
12+
<body>
13+
<div class="wrapper">
14+
<nav class="nav">
15+
<div class="container">
16+
<div class="nav__menu">
17+
<a class="nav__header" href="/">Django TMDb Search</a>
18+
</div>
19+
<div class="search__container">
20+
<form class="search-form" method="GET" action="">
21+
<input class="search-form__query" type="text" placeholder="Search" name="query">
22+
</form>
23+
</div>
24+
</div>
25+
</nav>
26+
<section class="result">
27+
<div class="container">
28+
<div class="movies">
29+
{% for movie in search_result %}
30+
<div class="movies__item">
31+
<i class="movies__item-star fa fa-star hide"></i>
32+
<p class="movies__item-rating hide">{{ movie.vote_average }}/10</p>
33+
<!-- <p class="movies__item-title">{{ movie.title }}</p> -->
34+
<a href="details.html" id="modal-trigger" class="movies__item-expander hide">View Details</a>
35+
<img class="movies__item-image" src='https://image.tmdb.org/t/p/w600_and_h900_bestv2{{ movie.poster_path }}' onerror="this.src='https://dummyimage.com/600x900/ababab/ffffff.png&amp;text=+Poster'"/>
36+
</div>
37+
{% endfor %}
38+
</div>
39+
</div>
40+
</section>
41+
</div>
42+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
43+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
44+
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
45+
crossorigin="anonymous"></script>
46+
<script src="{% static 'movies/app.js' %}"></script>
47+
</body>
48+
</html>

‎movies/tests.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
from django.test import TestCase
2+
3+
# Create your tests here.

‎movies/urls.py

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
from django.urls import path
2+
from django.conf.urls import url
3+
from . import views
4+
5+
urlpatterns = [
6+
path('', views.home_page, name='home_page'),
7+
]

0 commit comments

Comments
 (0)