Skip to content
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.

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

feat(UX Feedback): Some generic UX feedback and also improve the homepage #123

Merged
merged 6 commits into from
Oct 21, 2023
Merged
9 changes: 6 additions & 3 deletions concert_elephant/static/css/project.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* These styles are generated from project.scss. */

.alert-debug {
color: black;
background-color: white;
@@ -138,7 +136,7 @@ thead.table-custom {
}

.btn-delete:hover {
background-color: #A8A196;
background-color: #D3D3D3;
transition: 0.7s;
}

@@ -158,3 +156,8 @@ thead.table-custom {
.hidden {
display: none !important;
}

td[onclick]:hover {
cursor: pointer;
background-color: #D3D3D3;
}
2 changes: 1 addition & 1 deletion concert_elephant/static/js/concert_create.js
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ $(document).ready(function() {
minLength: 2,
response: function(event, ui) {
if (!ui.content.length) {
$(this).val("No results found; please add a new one");
$(this).val("No results found - use the button above to create");
}
},
select: function(event, ui) {
5 changes: 3 additions & 2 deletions concert_elephant/templates/concerts/artist_detail.html
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ <h5 class="card-header card-header-custom display-4 text-center">{{ artist }}</h
</thead>
<tr>
<td class="text-center">{{ artist }}</td>
<td class="text-center">{{ artist.concerts.count }}</td>
<td class="text-center">{{ total_concerts_count }}</td>
</tr>
</table>
</div>
@@ -37,7 +37,8 @@ <h5 class="card-header card-header-custom display-4 text-center">Recent Concerts
</tr>
</thead>
{% for concert in recent_concerts %}
<tr>
<tr class="clickable-row"
data-href="{% url 'concerts:concert-detail' concert.id %}">
<td>{{ concert.artist }}</td>
<td class="text-center">{{ concert.venue }}</td>
<td class="text-center">{{ concert.date }}</td>
2 changes: 1 addition & 1 deletion concert_elephant/templates/concerts/artist_list.html
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ <h5 class="display-4 text-center">Artists</h5>
<tr class="clickable-row"
data-href="{% url 'concerts:artist-detail' artist.id %}">
<td class="align-middle text-center">{{ artist.name }}</td>
<td class="align-middle text-center">{{ artist.concerts.count }}</td>
<td class="align-middle text-center">{{ artist.concert_count }}</td>
</tr>
{% endfor %}
</table>
15 changes: 11 additions & 4 deletions concert_elephant/templates/concerts/concert_detail.html
Original file line number Diff line number Diff line change
@@ -4,7 +4,9 @@
<div class="row justify-content-center">
<div class="col col-md-12 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">{{ concert.artist }}</h5>
<h5 class="card-header card-header-custom display-4 text-center">
{{ concert.artist }}
</h5>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
@@ -17,12 +19,11 @@ <h5 class="card-header card-header-custom display-4 text-center">{{ concert.arti
</tr>
</thead>
<tr>
<td>{{ concert.artist }}</td>
<td class="text-center">{{ concert.venue }}</td>
<td onclick="navigateTo('{% url 'concerts:artist-detail' concert.artist.id %}')">{{ concert.artist }}</td>
<td class="text-center" onclick="navigateTo('{% url 'concerts:venue-detail' concert.venue.id %}')">{{ concert.venue }}</td>
<td class="text-center">{{ concert.date }}</td>
<td class="text-center">
{% for opener in concert.opener.all %}
{{ opener.name }}
{% if not forloop.last %},{% endif %}
{% endfor %}
</td>
@@ -45,4 +46,10 @@ <h5 class="card-header card-header-custom display-4 text-center">{{ concert.arti
{% endif %}
</div>
</div>

<script>
function navigateTo(url) {
window.location.href = url;
}
</script>
{% endblock %}
3 changes: 2 additions & 1 deletion concert_elephant/templates/concerts/venue_detail.html
Original file line number Diff line number Diff line change
@@ -37,7 +37,8 @@ <h5 class="card-header card-header-custom display-4 text-center">Recent Concerts
</tr>
</thead>
{% for concert in recent_concerts %}
<tr>
<tr class="clickable-row"
data-href="{% url 'concerts:concert-detail' concert.id %}">
<td>{{ concert.artist }}</td>
<td class="text-center">{{ concert.venue.name|title }}</td>
<td class="text-center">{{ concert.date }}</td>
48 changes: 47 additions & 1 deletion concert_elephant/templates/home.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,52 @@
{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
<!-- Popular Artists Card -->
<div class="col col-md-6 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">Popular Artists</h5>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Artist</th>
<th class="text-center" scope="col">Concerts</th>
</tr>
</thead>
{% for artist in popular_artists %}
<tr class="clickable-row" data-href="{% url 'concerts:artist-detail' artist.pk %}">
<td>{{ artist.name }}</td>
<td class="text-center">{{ artist.total_concerts }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<!-- Popular Venues Card -->
<div class="col col-md-6 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">Popular Venues</h5>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Venue</th>
<th class="text-center" scope="col">Concerts</th>
</tr>
</thead>
{% for venue in popular_venues %}
<tr class="clickable-row" data-href="{% url 'concerts:venue-detail' venue.pk %}">
<td>{{ venue.name }}</td>
<td class="text-center">{{ venue.concerts.count }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col col-md-6 col-sm-12">
<div class="card">
@@ -69,7 +115,7 @@ <h5 class="card-header card-header-custom display-4 text-center">Recent Artists<
{% for artist in recent_artists %}
<tr class="clickable-row" data-href="{% url 'concerts:artist-detail' artist.pk %}">
<td>{{ artist.name }}</td>
<td class="text-center">{{ artist.concerts.count }}</td>
<td class="text-center">{{ artist.total_concerts }}</td>
</tr>
{% endfor %}
</table>
131 changes: 68 additions & 63 deletions concert_elephant/templates/main_search.html
Original file line number Diff line number Diff line change
@@ -1,98 +1,103 @@
{% extends "base.html" %}

{% block content %}

{% with total_results=artists|length|add:venues|length|add:concerts|length %}

<div class="row justify-content-center">
<div class="col col-md-8 col-sm-12">
<!-- Artists Results -->
{% if artists %}
<div class="card mt-3">
<div class="card mt-3">
<h5 class="card-header card-header-custom display-4 text-center">Artists</h5>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th class="text-center" scope="col">Artist</th>
<th class="text-center" scope="col">Total Concerts</th>
</tr>
</thead>
<tbody>
{% for artist in artists %}
<tr class="clickable-row" data-href="{% url 'concerts:artist-detail' artist.pk %}">
<td class="text-center">{{ artist.name }}</td>
<td class="text-center">{{ artist.concerts.count }}</td>
</tr>
{% endfor %}
</tbody>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Genre</th>
<th>Details</th>
</tr>
</thead>
<tbody>
{% for artist in artists %}
<tr>
<td>{{ artist.name }}</td>
<td>{{ artist.genre }}</td>
<td><a href="{% url 'artist_detail' artist.id %}">View Details</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}

<!-- Venues Results -->
{% if venues %}
<div class="card mt-3 table-responsive">
<div class="card mt-3">
<h5 class="card-header card-header-custom display-4 text-center">Venues</h5>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Venue</th>
<th class="text-center" scope="col">City</th>
<th class="text-center" scope="col">State</th>
<th class="text-center" scope="col">Country</th>
<th class="text-center" scope="col">Total Concerts</th>
</tr>
</thead>
<tbody>
{% for venue in venues %}
<tr class="clickable-row" data-href="{% url 'concerts:venue-detail' venue.pk %}">
<td>{{ venue.name }}</td>
<td class="text-center">{{ venue.city }}</td>
<td class="text-center">{% if venue.state %}{{ venue.state }}{% else %}---{% endif %}</td>
<td class="text-center">{{ venue.country }}</td>
<td class="text-center">{{ venue.concerts.count }}</td> <!-- Assuming you have a reverse relation called concerts on the Venue model -->
</tr>
{% endfor %}
</tbody>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Details</th>
</tr>
</thead>
<tbody>
{% for venue in venues %}
<tr>
<td>{{ venue.name }}</td>
<td>{{ venue.location }}</td>
<td><a href="{% url 'venue_detail' venue.id %}">View Details</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}

<!-- Concerts Results -->
{% if concerts %}
<div class="card mt-3 table-responsive">
<div class="card mt-3">
<h5 class="card-header card-header-custom display-4 text-center">Concerts</h5>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Artist</th>
<th class="text-center" scope="col">Venue</th>
<th class="text-center" scope="col">Date</th>
<th class="text-center" scope="col">Opener</th>
</tr>
</thead>
<tbody>
{% for concert in concerts %}
<tr class="clickable-row" data-href="{% url 'concerts:concert-detail' concert.pk %}">
<td>{{ concert.artist }}</td>
<td class="text-center">{{ concert.venue }}</td>
<td class="text-center">{{ concert.date }}</td>
<td class="text-center">
{% for opener in concert.opener.all %}
{{ opener.name }}
{% if not forloop.last %},{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
<table class="table table-hover">
<thead>
<tr>
<th>Artist</th>
<th>Venue</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for concert in concerts %}
<tr>
<td>{{ concert.artist.name }}</td>
<td>{{ concert.venue.name }}</td>
<td>{{ concert.date }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}

<!-- No Results Found -->
{% if total_results == 0 %}
<div class="card mt-2">
<h5 class="card-header card-header-custom display-4 text-center">No Results Found</h5>
<div class="table-responsive">
<p class="text-center py-3">We couldn't find any matches for your search. Please try again with different keywords.</p>
</div>
</div>
{% endif %}
</div>
</div>
{% endwith %}

{% endblock %}
2 changes: 1 addition & 1 deletion concert_elephant/templates/navbar.html
Original file line number Diff line number Diff line change
@@ -49,7 +49,7 @@
<li class="nav-item d-inline mt-2">
{% url 'users:detail' request.user.username as path %}
<a class="nav-link nav-link-custom {% if request.path == path %}nav-link-active{% endif %}"
href="{% url 'users:detail' request.user.username %}">{% translate "My Profile" %}</a>
href="{% url 'users:detail' request.user.username %}">{% translate "My Concerts" %}</a>
</li>
<li class="nav-item d-inline mt-2">
{# URL provided by django-allauth/account/urls.py #}
2 changes: 1 addition & 1 deletion concert_elephant/templates/users/user_detail.html
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
{% load custom_filters %}

{% block content %}
<div class="d-flex justify-content-center mt-3 mb-3">
<div class="d-flex justify-content-center mt-2 mb-2">
<form method="get" action="{% url 'users:detail' object.username %}"
class="form-inline d-flex text-center">
<label for="profileSearch" class="sr-only"></label>
Loading