Skip to content

Commit a13b8ce

Browse files
bradtraversybradtraversy
committed
Single Listing Page
1 parent e9a0902 commit a13b8ce

File tree

2 files changed

+205
-3
lines changed

2 files changed

+205
-3
lines changed

‎listings/views.py‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
from django.shortcuts import render
1+
from django.shortcuts import get_object_or_404, render
22
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
33

44
from .models import Listing
@@ -17,7 +17,13 @@ def index(request):
1717
return render(request, 'listings/listings.html', context)
1818

1919
def listing(request, listing_id):
20-
return render(request, 'listings/listing.html')
20+
listing = get_object_or_404(Listing, pk=listing_id)
21+
22+
context = {
23+
'listing': listing
24+
}
25+
26+
return render(request, 'listings/listing.html', context)
2127

2228
def search(request):
2329
return render(request, 'listings/search.html')

‎templates/listings/listing.html‎

Lines changed: 197 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,197 @@
1-
<h1>Listing</h1>
1+
{% extends 'base.html' %}
2+
3+
{% load humanize %}
4+
5+
{% block content %}
6+
<section id="showcase-inner" class="py-5 text-white">
7+
<div class="container">
8+
<div class="row text-center">
9+
<div class="col-md-12">
10+
<h1 class="display-4">{{ listing.title }}</h1>
11+
<p class="lead">
12+
<i class="fas fa-map-marker"></i> {{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
13+
</div>
14+
</div>
15+
</div>
16+
</section>
17+
18+
<!-- Breadcrumb -->
19+
<section id="bc" class="mt-3">
20+
<div class="container">
21+
<nav>
22+
<ol class="breadcrumb">
23+
<li class="breadcrumb-item">
24+
<a href="{% url 'index' %}">Home</a>
25+
</li>
26+
<li class="breadcrumb-item">
27+
<a href="{% url 'listings' %}">Listings</a>
28+
</li>
29+
<li class="breadcrumb-item active">{{ listing.title }}</li>
30+
</ol>
31+
</nav>
32+
</div>
33+
</section>
34+
35+
<!-- Listing -->
36+
<section id="listing" class="py-4">
37+
<div class="container">
38+
<a href="{% url 'listings' %}" class="btn btn-light mb-4">Back To Listings</a>
39+
<div class="row">
40+
<div class="col-md-9">
41+
<!-- Home Main Image -->
42+
<img src="{{ listing.photo_main.url }}" alt="" class="img-main img-fluid mb-3">
43+
<!-- Thumbnails -->
44+
<div class="row mb-5 thumbs">
45+
{% if listing.photo_1 %}
46+
<div class="col-md-2">
47+
<a href="{{ listing.photo_1.url }}" data-lightbox="home-images">
48+
<img src="{{ listing.photo_1.url }}" alt="" class="img-fluid">
49+
</a>
50+
</div>
51+
{% endif %}
52+
{% if listing.photo_2 %}
53+
<div class="col-md-2">
54+
<a href="{{ listing.photo_2.url }}" data-lightbox="home-images">
55+
<img src="{{ listing.photo_2.url }}" alt="" class="img-fluid">
56+
</a>
57+
</div>
58+
{% endif %}
59+
{% if listing.photo_3 %}
60+
<div class="col-md-2">
61+
<a href="{{ listing.photo_3.url }}" data-lightbox="home-images">
62+
<img src="{{ listing.photo_3.url }}" alt="" class="img-fluid">
63+
</a>
64+
</div>
65+
{% endif %}
66+
{% if listing.photo_4 %}
67+
<div class="col-md-2">
68+
<a href="{{ listing.photo_4.url }}" data-lightbox="home-images">
69+
<img src="{{ listing.photo_4.url }}" alt="" class="img-fluid">
70+
</a>
71+
</div>
72+
{% endif %}
73+
{% if listing.photo_5 %}
74+
<div class="col-md-2">
75+
<a href="{{ listing.photo_5.url }}" data-lightbox="home-images">
76+
<img src="{{ listing.photo_5.url }}" alt="" class="img-fluid">
77+
</a>
78+
</div>
79+
{% endif %}
80+
{% if listing.photo_6 %}
81+
<div class="col-md-2">
82+
<a href="{{ listing.photo_6.url }}" data-lightbox="home-images">
83+
<img src="{{ listing.photo_6.url }}" alt="" class="img-fluid">
84+
</a>
85+
</div>
86+
{% endif %}
87+
</div>
88+
<!-- Fields -->
89+
<div class="row mb-5 fields">
90+
<div class="col-md-6">
91+
<ul class="list-group list-group-flush">
92+
<li class="list-group-item text-secondary">
93+
<i class="fas fa-money-bill-alt"></i> Asking Price:
94+
<span class="float-right">${{ listing.price | intcomma }}</span>
95+
</li>
96+
<li class="list-group-item text-secondary">
97+
<i class="fas fa-bed"></i> Bedrooms:
98+
<span class="float-right">{{ listing.bedrooms }}</span>
99+
</li>
100+
<li class="list-group-item text-secondary">
101+
<i class="fas fa-bath"></i> Bathrooms:
102+
<span class="float-right">{{ listing.bathrooms }}</span>
103+
</li>
104+
<li class="list-group-item text-secondary">
105+
<i class="fas fa-car"></i> Garage:
106+
<span class="float-right">{{ listing.garage }}
107+
</span>
108+
</li>
109+
</ul>
110+
</div>
111+
<div class="col-md-6">
112+
<ul class="list-group list-group-flush">
113+
<li class="list-group-item text-secondary">
114+
<i class="fas fa-th-large"></i> Square Feet:
115+
<span class="float-right">{{ listing.sqft }}</span>
116+
</li>
117+
<li class="list-group-item text-secondary">
118+
<i class="fas fa-square"></i> Lot Size:
119+
<span class="float-right">{{ listing.lot_size }} Acres
120+
</span>
121+
</li>
122+
<li class="list-group-item text-secondary">
123+
<i class="fas fa-calendar"></i> Listing Date:
124+
<span class="float-right">{{ listing.list_date }}</span>
125+
</li>
126+
<li class="list-group-item text-secondary">
127+
<i class="fas fa-bed"></i> Realtor:
128+
<span class="float-right">{{ listing.realtor }}
129+
</span>
130+
</li>
131+
132+
133+
</ul>
134+
</div>
135+
</div>
136+
137+
<!-- Description -->
138+
<div class="row mb-5">
139+
<div class="col-md-12">
140+
{{ listing.description }}
141+
</div>
142+
</div>
143+
</div>
144+
<div class="col-md-3">
145+
<div class="card mb-3">
146+
<img class="card-img-top" src="{{ listing.realtor.photo.url }}" alt="">
147+
<div class="card-body">
148+
<h5 class="card-title">Property Realtor</h5>
149+
<h6 class="text-secondary">{{ listing.realtor }}</h6>
150+
</div>
151+
</div>
152+
<button class="btn-primary btn-block btn-lg" data-toggle="modal" data-target="#inquiryModal">Make An Inquiry</button>
153+
</div>
154+
</div>
155+
</div>
156+
</section>
157+
158+
<!-- Inquiry Modal -->
159+
<div class="modal fade" id="inquiryModal" role="dialog">
160+
<div class="modal-dialog">
161+
<div class="modal-content">
162+
<div class="modal-header">
163+
<h5 class="modal-title" id="inquiryModalLabel">Make An Inquiry</h5>
164+
<button type="button" class="close" data-dismiss="modal">
165+
<span>&times;</span>
166+
</button>
167+
</div>
168+
<div class="modal-body">
169+
<form>
170+
<div class="form-group">
171+
<label for="property_name" class="col-form-label">Property:</label>
172+
<input type="text" name="listing" class="form-control" value="45 Drivewood Cirlce" disabled>
173+
</div>
174+
<div class="form-group">
175+
<label for="name" class="col-form-label">Name:</label>
176+
<input type="text" name="name" class="form-control" required>
177+
</div>
178+
<div class="form-group">
179+
<label for="email" class="col-form-label">Email:</label>
180+
<input type="email" name="email" class="form-control" required>
181+
</div>
182+
<div class="form-group">
183+
<label for="phone" class="col-form-label">Phone:</label>
184+
<input type="text" name="phone" class="form-control">
185+
</div>
186+
<div class="form-group">
187+
<label for="message" class="col-form-label">Message:</label>
188+
<textarea name="message" class="form-control"></textarea>
189+
</div>
190+
<hr>
191+
<input type="submit" value="Send" class="btn btn-block btn-secondary">
192+
</form>
193+
</div>
194+
</div>
195+
</div>
196+
</div>
197+
{% endblock %}

0 commit comments

Comments
 (0)