clean venues look
This commit is contained in:
parent
17b6b09737
commit
4a69aec513
@ -1,7 +1,19 @@
|
||||
var venueTypes;
|
||||
|
||||
$(document).ready(async () => {
|
||||
await loadVenueTypes();
|
||||
await loadVenues();
|
||||
});
|
||||
|
||||
const loadVenueTypes = async () => {
|
||||
const response = await $.ajax({
|
||||
url: "/api/venues",
|
||||
method: "OPTIONS"
|
||||
});
|
||||
|
||||
venueTypes = response?.actions?.POST?.type?.choices || [];
|
||||
}
|
||||
|
||||
const loadVenues = async () => {
|
||||
const response = await $.ajax({
|
||||
url: "/api/venues/",
|
||||
@ -10,19 +22,64 @@ const loadVenues = async () => {
|
||||
|
||||
for (const venue of response?.results || []) {
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
addVenue(venue);
|
||||
}
|
||||
}
|
||||
|
||||
const addVenue = venue => {
|
||||
let $template = $($("#venueItemTemplate").html());
|
||||
let $venue = $($("#venueItemTemplate").html());
|
||||
|
||||
$template.find(".venue-item").data("id", venue.id);
|
||||
$template.find(".venue-name").text(venue.name);
|
||||
$template.find(".venue-description").text(venue.description);
|
||||
const type = venueTypes.find(type => type.value === venue.type);
|
||||
|
||||
$template.off("click").on("click", async () => await selectVenue(venue.id));
|
||||
$venue.find(".venue-type").text(type.display_name);
|
||||
$venue.find(".venue-item").data("id", venue.id);
|
||||
$venue.find(".venue-name").text(venue.name);
|
||||
$venue.find(".venue-description").text(venue.description);
|
||||
|
||||
$("#venueContainer").append($template);
|
||||
const phoneNumber = venue.contacts?.phone_number;
|
||||
addVenueTemplateContact(
|
||||
$venue,
|
||||
phoneNumber,
|
||||
`tel:${phoneNumber}`,
|
||||
"bi-telephone"
|
||||
);
|
||||
|
||||
const emailAddress = venue.contacts?.email_address;
|
||||
addVenueTemplateContact(
|
||||
$venue,
|
||||
emailAddress,
|
||||
`mailto:${emailAddress}`,
|
||||
"bi-envelope"
|
||||
);
|
||||
|
||||
$venue.off("click").on("click", async () => await selectVenue(venue.id));
|
||||
|
||||
$("#venueContainer").append($venue);
|
||||
}
|
||||
|
||||
const addVenueTemplateContact = ($venue, value, url, iconClass) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
let $contact = $($("#venueContactTemplate").html())
|
||||
|
||||
$contact.find(".venue-contact-url").attr("href", url);
|
||||
$contact.find(".venue-contact-icon")
|
||||
.addClass(iconClass)
|
||||
.attr("data-bs-title", value)
|
||||
.attr("data-bs-toggle", "tooltip")
|
||||
.tooltip();
|
||||
|
||||
$venue.find(".venue-contacts").append($contact);
|
||||
}
|
||||
|
||||
const selectVenue = async id => {
|
||||
|
||||
@ -1,22 +1,107 @@
|
||||
@import "scss/base.scss";
|
||||
|
||||
.search-group {
|
||||
|
||||
max-width: 400px;
|
||||
|
||||
.form-control {
|
||||
|
||||
border-left: none !important;
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
|
||||
&:focus, &:focus-within {
|
||||
|
||||
box-shadow: none;
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
|
||||
background-color: transparent;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
cursor: text;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.venue-item {
|
||||
|
||||
color: var(--bs-body-color);
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.25rem;
|
||||
min-width: 0;
|
||||
|
||||
.venue-type {
|
||||
|
||||
color: var(--bs-tertiary-color);
|
||||
margin-bottom: 0.25rem;
|
||||
@extend small;
|
||||
@extend .text-truncate;
|
||||
|
||||
}
|
||||
|
||||
.venue-name {
|
||||
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--bs-body-color);
|
||||
|
||||
// Single line with ellipsis
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.venue-description {
|
||||
|
||||
color: var(--bs-secondary-color);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
// 3 lines with fadeout
|
||||
position: relative;
|
||||
max-height: 1.5rem * 3;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
|
||||
content: "";
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 1.5rem;
|
||||
background: linear-gradient(to right, rgba(var(--bs-body-bg-rgb), 0), rgba(var(--bs-body-bg-rgb), 1) 50%);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.venue-contacts {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
|
||||
.venue-contact {
|
||||
|
||||
margin-right: 0.75rem;
|
||||
|
||||
.venue-contact-url { color: var(--bs-body-color); }
|
||||
.venue-contact-icon { @extend .bi; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -11,19 +11,43 @@
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-lg">
|
||||
<div id="venueContainer" class="row g-5 venue-items mt-5"></div>
|
||||
<div class="container-xxl">
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group search-group mb-4 mb-md-0">
|
||||
<label for="venueSearch" class="input-group-text">
|
||||
<i class="bi bi-search"></i>
|
||||
</label>
|
||||
<input type="search" id="venueSearch" name="venueSearch" class="form-control" placeholder="Search...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<button type="button" class="btn btn-primary rounded-1">
|
||||
Create a Venue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="venueContainer" class="row gy-0 venue-items"></div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
<script id="venueItemTemplate" type="text/template">
|
||||
<div class="col-4">
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3 mt-4">
|
||||
<div class="venue-item" role="button">
|
||||
<div class="venue-type"></div>
|
||||
<div class="venue-name"></div>
|
||||
<div class="venue-description"></div>
|
||||
<ul class="venue-contacts"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="venueContactTemplate" type="text/template">
|
||||
<li class="venue-contact">
|
||||
<a href="" class="venue-contact-url">
|
||||
<i class="venue-contact-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
</script>
|
||||
<script src="{% static 'home/js/venues.js' %}"></script>
|
||||
{% endblock scripts %}
|
||||
Loading…
x
Reference in New Issue
Block a user