Skip to content

Commit da4edbe

Browse files
VCGithubCodeVCGithubCode
authored
Merge pull request #127 from VCGithubCode/vc-prideful-branch
Adjust card image styling on venues page
2 parents 74c1452 + 0e8936a commit da4edbe

File tree

2 files changed

+37
-135
lines changed

2 files changed

+37
-135
lines changed

‎static/css/style.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -238,13 +238,13 @@ footer.text-center {
238238
color: var(--light-text);
239239
}
240240

241-
/*----- MAP -----*/
242-
#map {
243-
height: 20vh;
244-
width: 100%;
245-
background-color: #eee;
241+
#venues-page .venue-img {
242+
width: 100%;
243+
height: 200px;
244+
object-fit: cover;
246245
}
247246

247+
248248
/* Media queries */
249249
@media (min-width: 1200px) {
250250

‎venues/templates/venue_list.html

Lines changed: 32 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
{% extends 'base.html' %}
22
{% block content %}
3-
<div class="container mt-3 min-vh-100">
3+
<div class="container mt-3 min-vh-100" id="venues-page">
44
<div class="about-us">
5-
<div
6-
class="container py-5 d-flex justify-content-center align-items-center"
7-
>
5+
<div class="container py-5 d-flex justify-content-center align-items-center">
86
<div>
97
<h1 class="fw-bold text-white">VENUES</h1>
108
</div>
@@ -14,198 +12,102 @@ <h1 class="fw-bold text-white">VENUES</h1>
1412
<!-- Venues -->
1513
<ul class="nav nav-tabs" id="myTab" role="tablist">
1614
<li class="nav-item" role="presentation">
17-
<button
18-
class="nav-link {% if selected_category == 'Café' %}active{% endif %}"
19-
id="cafes-tab"
20-
data-bs-toggle="tab"
21-
data-bs-target="#cafes"
22-
type="button"
23-
role="tab"
24-
aria-controls="cafes"
25-
aria-selected="true"
26-
>
15+
<button class="nav-link {% if selected_category == 'Café' %}active{% endif %}" id="cafes-tab" data-bs-toggle="tab" data-bs-target="#cafes" type="button" role="tab" aria-controls="cafes" aria-selected="true">
2716
Cafés
2817
</button>
2918
</li>
3019
<li class="nav-item" role="presentation">
31-
<button
32-
class="nav-link {% if selected_category == 'Club' %}active{% endif %}"
33-
id="clubs-tab"
34-
data-bs-toggle="tab"
35-
data-bs-target="#clubs"
36-
type="button"
37-
role="tab"
38-
aria-controls="clubs"
39-
aria-selected="false"
40-
>
20+
<button class="nav-link {% if selected_category == 'Club' %}active{% endif %}" id="clubs-tab" data-bs-toggle="tab" data-bs-target="#clubs" type="button" role="tab" aria-controls="clubs" aria-selected="false">
4121
Clubs
4222
</button>
4323
</li>
4424
<li class="nav-item" role="presentation">
45-
<button
46-
class="nav-link {% if selected_category == 'Support Center' %}active{% endif %}"
47-
id="supportcenters-tab"
48-
data-bs-toggle="tab"
49-
data-bs-target="#supportcenters"
50-
type="button"
51-
role="tab"
52-
aria-controls="supportcenters"
53-
aria-selected="false"
54-
>
25+
<button class="nav-link {% if selected_category == 'Support Center' %}active{% endif %}" id="supportcenters-tab" data-bs-toggle="tab" data-bs-target="#supportcenters" type="button" role="tab" aria-controls="supportcenters" aria-selected="false">
5526
Support Centers
5627
</button>
5728
</li>
5829
</ul>
5930

60-
<!-- Cafés Tab -->
31+
<!-- Cafés Tab -->
6132
<div class="tab-content" id="myTabContent">
62-
<div
63-
class="tab-pane fade {% if selected_category == 'Café' %}show active{% endif %}"
64-
id="cafes"
65-
role="tabpanel"
66-
aria-labelledby="cafés-tab"
67-
>
33+
<div class="tab-pane fade {% if selected_category == 'Café' %}show active{% endif %}" id="cafes" role="tabpanel" aria-labelledby="cafés-tab">
6834
<div class="container mt-3 p-2">
6935
<div class="row gx-4 gx-lg-5">
7036
{% for venue in cafes %}
7137
<div class="col-md-4 mb-5">
7238
<div class="card h-100">
7339
{% if 'placeholder' in venue.image.url %}
74-
<img
75-
src="https://res.cloudinary.com/dxs42sums/image/upload/v1721583416/evelyn-paris-QR_vT8_hBZM-unsplash_wkiekd.jpg"
76-
class="card-img-top"
77-
alt="Venue"
78-
/>
40+
<img src="https://res.cloudinary.com/dxs42sums/image/upload/v1721583416/evelyn-paris-QR_vT8_hBZM-unsplash_wkiekd.jpg" class="card-img-top venue-img" alt="Venue" />
7941
{% else %}
80-
<img
81-
src="{{ venue.image.url }}"
82-
class="card-img-top"
83-
alt="Venue"
84-
/>
42+
<img src="{{ venue.image.url }}" class="card-img-top venue-img" alt="Venue" />
8543
{% endif %}
8644
<div class="card-body">
8745
<h2 class="card-title">{{ venue.name }}</h2>
88-
<p class="card-text">
89-
<i class="fa-solid fa-location-dot"></i> {{ venue.address }}
90-
</p>
91-
<p class="card-text">
92-
<i class="fa-solid fa-globe"></i> {{ venue.website }}
93-
</p>
94-
<p class="card-text">
95-
<i class="fa-solid fa-address-book"></i> {{ venue.contact_info }}
96-
</p>
97-
<p class="card-text">
98-
<i class="fa-regular fa-clock"></i> {{ venue.opening_hours | safe }}
99-
</p>
100-
<p class="card-text">
101-
<i class="fa-solid fa-star"></i> Special features: {{ venue.special_features }}
102-
</p>
46+
<p class="card-text"><i class="fa-solid fa-location-dot"></i> {{ venue.address }}</p>
47+
<p class="card-text"><i class="fa-solid fa-globe"></i> {{ venue.website }}</p>
48+
<p class="card-text"><i class="fa-solid fa-address-book"></i> {{ venue.contact_info }}</p>
49+
<p class="card-text"><i class="fa-regular fa-clock"></i> {{ venue.opening_hours | safe }}</p>
50+
<p class="card-text"><i class="fa-solid fa-star"></i> Special features: {{ venue.special_features }}</p>
10351
</div>
10452
</div>
10553
</div>
10654
{% endfor %}
10755
</div>
10856
</div>
10957
</div>
58+
11059
<!-- Clubs Tab -->
111-
<div
112-
class="tab-pane fade {% if selected_category == 'Club' %}show active{% endif %}"
113-
id="clubs"
114-
role="tabpanel"
115-
aria-labelledby="clubs-tab"
116-
>
60+
<div class="tab-pane fade {% if selected_category == 'Club' %}show active{% endif %}" id="clubs" role="tabpanel" aria-labelledby="clubs-tab">
11761
<div class="container mt-3 p-2">
11862
<div class="row gx-4 gx-lg-5">
11963
{% for venue in clubs %}
12064
<div class="col-md-4 mb-5">
12165
<div class="card h-100">
12266
{% if 'placeholder' in venue.image.url %}
123-
<img
124-
src="https://res.cloudinary.com/dxs42sums/image/upload/v1721583416/evelyn-paris-QR_vT8_hBZM-unsplash_wkiekd.jpg"
125-
class="card-img-top"
126-
alt="Venue"
127-
/>
67+
<img src="https://res.cloudinary.com/dxs42sums/image/upload/v1721583416/evelyn-paris-QR_vT8_hBZM-unsplash_wkiekd.jpg" class="card-img-top venue-img" alt="Venue" />
12868
{% else %}
129-
<img
130-
src="{{ venue.image.url }}"
131-
class="card-img-top"
132-
alt="Venue"
133-
/>
69+
<img src="{{ venue.image.url }}" class="card-img-top venue-img" alt="Venue" />
13470
{% endif %}
13571
<div class="card-body">
13672
<h2 class="card-title">{{ venue.name }}</h2>
137-
<p class="card-text">
138-
<i class="fa-solid fa-location-dot"></i> {{ venue.address }}
139-
</p>
140-
<p class="card-text">
141-
<i class="fa-solid fa-globe"></i> {{ venue.website }}
142-
</p>
143-
<p class="card-text">
144-
<i class="fa-solid fa-address-book"></i> {{ venue.contact_info }}
145-
</p>
146-
<p class="card-text">
147-
<i class="fa-regular fa-clock"></i> {{ venue.opening_hours | safe }}
148-
</p>
149-
<p class="card-text">
150-
<i class="fa-solid fa-star"></i> Special features: {{ venue.special_features }}
151-
</p>
73+
<p class="card-text"><i class="fa-solid fa-location-dot"></i> {{ venue.address }}</p>
74+
<p class="card-text"><i class="fa-solid fa-globe"></i> {{ venue.website }}</p>
75+
<p class="card-text"><i class="fa-solid fa-address-book"></i> {{ venue.contact_info }}</p>
76+
<p class="card-text"><i class="fa-regular fa-clock"></i> {{ venue.opening_hours | safe }}</p>
77+
<p class="card-text"><i class="fa-solid fa-star"></i> Special features: {{ venue.special_features }}</p>
15278
</div>
15379
</div>
15480
</div>
15581
{% endfor %}
15682
</div>
15783
</div>
15884
</div>
85+
15986
<!-- Support Centers Tab -->
160-
<div
161-
class="tab-pane fade {% if selected_category == 'Support Center' %}show active{% endif %}"
162-
id="supportcenters"
163-
role="tabpanel"
164-
aria-labelledby="supportcenters"
165-
>
87+
<div class="tab-pane fade {% if selected_category == 'Support Center' %}show active{% endif %}" id="supportcenters" role="tabpanel" aria-labelledby="supportcenters">
16688
<div class="container mt-3 p-2">
16789
<div class="row gx-4 gx-lg-5">
16890
{% for venue in support_centers %}
16991
<div class="col-md-4 mb-5">
17092
<div class="card h-100">
17193
{% if 'placeholder' in venue.image.url %}
172-
<img
173-
src="https://res.cloudinary.com/dxs42sums/image/upload/v1721583416/evelyn-paris-QR_vT8_hBZM-unsplash_wkiekd.jpg"
174-
class="card-img-top"
175-
alt="Venue"
176-
/>
94+
<img src="https://res.cloudinary.com/dxs42sums/image/upload/v1721583416/evelyn-paris-QR_vT8_hBZM-unsplash_wkiekd.jpg" class="card-img-top venue-img" alt="Venue" />
17795
{% else %}
178-
<img
179-
src="{{ venue.image.url }}"
180-
class="card-img-top"
181-
alt="Venue"
182-
/>
96+
<img src="{{ venue.image.url }}" class="card-img-top venue-img" alt="Venue" />
18397
{% endif %}
18498
<div class="card-body">
18599
<h2 class="card-title">{{ venue.name }}</h2>
186-
<p class="card-text">
187-
<i class="fa-solid fa-location-dot"></i> {{ venue.address }}
188-
</p>
189-
<p class="card-text">
190-
<i class="fa-solid fa-globe"></i> {{ venue.website }}
191-
</p>
192-
<p class="card-text">
193-
<i class="fa-solid fa-address-book"></i>
194-
{{ venue.contact_info }}
195-
</p>
196-
<p class="card-text">
197-
<i class="fa-regular fa-clock"></i> {{ venue.opening_hours | safe }}
198-
</p>
199-
<p class="card-text">
200-
<i class="fa-solid fa-star"></i> Special features: {{ venue.special_features }}
201-
</p>
100+
<p class="card-text"><i class="fa-solid fa-location-dot"></i> {{ venue.address }}</p>
101+
<p class="card-text"><i class="fa-solid fa-globe"></i> {{ venue.website }}</p>
102+
<p class="card-text"><i class="fa-solid fa-address-book"></i> {{ venue.contact_info }}</p>
103+
<p class="card-text"><i class="fa-regular fa-clock"></i> {{ venue.opening_hours | safe }}</p>
104+
<p class="card-text"><i class="fa-solid fa-star"></i> Special features: {{ venue.special_features }}</p>
202105
</div>
203106
</div>
204107
</div>
205108
{% endfor %}
206109
</div>
207110
</div>
208-
209111
</div>
210112
</div>
211113
</div>

0 commit comments

Comments
 (0)