old changes
This commit is contained in:
parent
e726441285
commit
50f082f8f5
@ -14,7 +14,7 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="px-4 bg-body shadow mb-5">
|
||||
<div class="d-flex justify-content-between align-items-center p-2 flex-wrap">
|
||||
<div class="d-flex justify-content-between align-items-center p-2 flex-wrap mw-1920 mx-auto">
|
||||
<h1 class="fw-bold h4 mb-0 ms-2">Venues & Waters</h1>
|
||||
<div class="input-group w-auto">
|
||||
<div class="input-group-text bg-body pe-0">
|
||||
@ -23,26 +23,27 @@
|
||||
<input type="search" class="form-control border-start-0" placeholder="Search Venues">
|
||||
</div>
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<button class="btn btn-primary rounded-2 me-3" onclick="openVenueModal(-1);">
|
||||
<button class="btn btn-animate btn-primary rounded-2 me-3" onclick="openVenueModal(-1);">
|
||||
<i class="bi bi-plus-lg me-1"></i>
|
||||
New
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary border-secondary-subtle rounded-2 me-3">
|
||||
<button class="btn btn-animate btn-outline-secondary btn-animate border-secondary-subtle rounded-2 me-3">
|
||||
<i class="bi bi-upload me-1"></i>
|
||||
Import
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary border-secondary-subtle rounded-2 me-3">
|
||||
<button class="btn btn-animate btn-outline-secondary border-secondary-subtle rounded-2 me-3">
|
||||
<i class="bi bi-sort-alpha-up me-sm-1"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary border-secondary-subtle rounded-2">
|
||||
<button class="btn btn-animate btn-outline-secondary border-secondary-subtle rounded-2">
|
||||
<i class="bi bi-filter-right me-sm-1"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-row-reverse my-4 mx-lg-4">
|
||||
<div class="d-flex justify-content-center w-100">
|
||||
<div class="row flex-row-reverse mb-4 mx-lg-4 mw-1920 mx-auto">
|
||||
<div class="col-lg-3 d-flex flex-column">
|
||||
<div id="locationMapContainer" class="w-100 position-relative shadow mb-4 bg-body rounded-3 overflow-hidden" style="height: 300px;">
|
||||
<div id="allLocationsMap" class="w-100 h-100"></div>
|
||||
@ -143,11 +144,12 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-xxl-4 col-xl-6 col-md-6 col-sm-12">
|
||||
<div class="fluid-hover-zoom h-100 d-flex flex-column justify-content-center align-items-center" role="button" onclick="openVenueModal(-1);">
|
||||
<btn class="btn-animate bg-none border-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center" role="button" onclick="openVenueModal(-1);">
|
||||
<i class="bi bi-plus-lg fs-1"></i>
|
||||
<span class="fw-bold">
|
||||
Create new
|
||||
</span>
|
||||
</btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -213,7 +215,8 @@
|
||||
<label for="venueActive" class="form-check-label">Venue is active?</label>
|
||||
</div>
|
||||
<div class="mt-5 mt-md-auto d-flex justify-content-end">
|
||||
<button class="btn btn-primary px-3" type="button" onclick="$('#addressTab').click();">Next</button>
|
||||
<button class="btn btn-animate btn-outline-secondary px-3 me-auto" type="button" data-bs-dismiss="modal">Cancel</button>
|
||||
<button class="btn btn-animate btn-primary btn-animate px-3" type="button" onclick="$('#addressTab').click();">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="addressContent" class="tab-pane fade flex-column h-100">
|
||||
@ -275,13 +278,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="venueResetAddress" class="btn btn-animate btn-link text-decoration-none">
|
||||
Reset Address
|
||||
</button>
|
||||
</div>
|
||||
<div id="venueSearchHelper" class="my-auto text-center">
|
||||
<label for="venueSearch" class="fs-4 mx-lg-4 text-body-secondary">Use the search to find your venue.</label>
|
||||
<label for="venueSearch" class="fs-5 mx-lg-4 text-body-secondary position-relative">
|
||||
<i class="bi bi-arrow-up fs-2 animation-bouncing-searchicon"></i><br>
|
||||
Use the search to find your venue.
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-5 mt-md-auto d-flex justify-content-end">
|
||||
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#detailsTab').click();">Back</button>
|
||||
<button class="btn btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
|
||||
<button class="btn btn-animate btn-outline-secondary me-3" type="button" onclick="$('#detailsTab').click();">Back</button>
|
||||
<button class="btn btn-animate btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contactContent" class="tab-pane fade flex-column h-100">
|
||||
@ -303,30 +312,58 @@
|
||||
<input type="url" name="venueWebsite" id="venueWebsite" class="form-control" placeholder="">
|
||||
<label for="venueWebsite" class="form-label">Website URL</label>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input type="url" name="venueFacebook" id="venueFacebook" class="form-control" placeholder="">
|
||||
<div class="input-group mb-4">
|
||||
<label for="venueUseFacebook" class="input-group-text">
|
||||
<input type="checkbox" name="venueUseFacebook" id="venueUseFacebook" class="form-check-input mt-0">
|
||||
</label>
|
||||
<div class="form-floating">
|
||||
<input type="url" name="venueFacebook" id="venueFacebook" class="form-control" placeholder="" disabled>
|
||||
<label for="" class="form-label">Facebook URL</label>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input type="url" name="venueInstagram" id="venueInstagram" class="form-control" placeholder="">
|
||||
</div>
|
||||
<div class="input-group mb-4">
|
||||
<label for="venueUseInstagram" class="input-group-text">
|
||||
<input type="checkbox" name="venueUseInstagram" id="venueUseInstagram" class="form-check-input mt-0">
|
||||
</label>
|
||||
<div class="form-floating">
|
||||
<input type="url" name="venueInstagram" id="venueInstagram" class="form-control" placeholder="" disabled>
|
||||
<label for="venueInstagram" class="form-label">Instagram URL</label>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input type="url" name="venueTwitter" id="venueTwitter" class="form-control" placeholder="">
|
||||
</div>
|
||||
<div class="input-group mb-4">
|
||||
<label for="venueUseTwitter" class="input-group-text">
|
||||
<input type="checkbox" name="venueUseTwitter" id="venueUseTwitter" class="form-check-input mt-0">
|
||||
</label>
|
||||
<div class="form-floating">
|
||||
<input type="url" name="venueTwitter" id="venueTwitter" class="form-control" placeholder="" disabled>
|
||||
<label for="venueTwitter" class="form-label">Twitter URL</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 mt-md-auto d-flex justify-content-end">
|
||||
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#addressTab').click();">Back</button>
|
||||
<button class="btn btn-primary px-3" type="button" onclick="$('#watersTab').click();">Next</button>
|
||||
<button class="btn btn-animate btn-outline-secondary me-3" type="button" onclick="$('#addressTab').click();">Back</button>
|
||||
<button class="btn btn-animate btn-primary px-3" type="button" onclick="$('#watersTab').click();">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="watersContent" class="tab-pane fade flex-column h-100">
|
||||
waters
|
||||
<div class="mt-5 mt-md-auto d-flex justify-content-end">
|
||||
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#contactTab').click();">Back</button>
|
||||
<button class="btn btn-primary px-3" type="button" onclick="$('#confirmTab').click();">Next</button>
|
||||
<div id="watersContent" class="tab-pane fade flex-column h-100" style="max-height: 460px;">
|
||||
<div class="row">
|
||||
{% for i in "012345678912345"|make_list %}
|
||||
<div class="col-md-6">
|
||||
<div class="bg-body-tertiary rounded-2 mb-4 p-4">
|
||||
<div class="fs-6 fw-bold text-truncate">Section A · Coal Wharf, Market Drayton</div>
|
||||
<div class="fs-6 text-body-secondary text-truncate">Commercial Water</div>
|
||||
<div class="fs-6 text-body-tertiary text-truncate">Specimen Carp</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="mt-5 pb-3 mt-md-auto d-flex justify-content-end">
|
||||
<button class="btn btn-animate btn-outline-secondary me-3" type="button" onclick="$('#contactTab').click();">Back</button>
|
||||
<button class="btn btn-animate btn-primary px-3" type="button" onclick="$('#confirmTab').click();">Next</button>
|
||||
</div>
|
||||
<button id="watersContentScroll" class="btn btn-animate btn-lg btn-primary shadow-sm m-4">
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="confirmContent" class="tab-pane fade flex-column h-100">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
@ -350,8 +387,8 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-5 mt-md-auto d-flex justify-content-end">
|
||||
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button>
|
||||
<button class="btn btn-primary" type="button" onclick="alert('not implemented')">Save Changes</button>
|
||||
<button class="btn btn-animate btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button>
|
||||
<button class="btn btn-animate btn-primary" type="button" onclick="alert('not implemented')">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -381,11 +418,11 @@
|
||||
<label class="form-label">Type</label>
|
||||
<div class="mb-3 group-radio-btns">
|
||||
<input type="radio" name="vType" id="vtFishery" class="btn-check">
|
||||
<label for="vtFishery" class="btn btn-outline-primary">Fishery</label>
|
||||
<label for="vtFishery" class="btn btn-animate btn-outline-primary">Fishery</label>
|
||||
<input type="radio" name="vType" id="vtClub" class="btn-check">
|
||||
<label for="vtClub" class="btn btn-outline-primary">Club</label>
|
||||
<label for="vtClub" class="btn btn-animate btn-outline-primary">Club</label>
|
||||
<input type="radio" name="vType" id="vtPrivate" class="btn-check">
|
||||
<label for="vtPrivate" class="btn btn-outline-primary">Private</label>
|
||||
<label for="vtPrivate" class="btn btn-animate btn-outline-primary">Private</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="addressPage" class="page">
|
||||
@ -441,16 +478,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" id="newVenueBack" class="btn btn-secondary" style="display: none">
|
||||
<button type="button" class="btn btn-animate btn-outline-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" id="newVenueBack" class="btn btn-animate btn-secondary" style="display: none">
|
||||
<i class="bi bi-arrow-left me-1"></i>
|
||||
Back
|
||||
</button>
|
||||
<button type="button" id="newVenueNext" class="btn btn-primary">
|
||||
<button type="button" id="newVenueNext" class="btn btn-animate btn-primary">
|
||||
Next
|
||||
<i class="bi bi-arrow-right ms-1"></i>
|
||||
</button>
|
||||
<button type="button" id="newVenueFinished" class="btn btn-primary" style="display: none;">
|
||||
<button type="button" id="newVenueFinished" class="btn btn-animate btn-primary" style="display: none;">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -113,7 +113,7 @@ function initAutocomplete() {
|
||||
return;
|
||||
}
|
||||
|
||||
alert(JSON.stringify(place, null, 4));
|
||||
// alert(JSON.stringify(place, null, 4));
|
||||
fillAddress(place);
|
||||
});
|
||||
}
|
||||
@ -126,11 +126,20 @@ function fillAddressControl(component, types, fieldSelector, component_attr="lon
|
||||
}
|
||||
}
|
||||
|
||||
$("#venueResetAddress").on("click",function() {
|
||||
$("#venueSearchResults").hide();
|
||||
$("#venueSearchHelper").show();
|
||||
$("#addressContent input[readonly], #addressContent input[readonly='readonly']").val("");
|
||||
$("#venueSearch").removeClass("is-valid");
|
||||
$("#venueSearch").val("").focus();
|
||||
});
|
||||
|
||||
function fillAddress(place) {
|
||||
|
||||
// Clear the fields first, because sometimes we cant find data to replace them.
|
||||
$("#venueSearchResults").show();
|
||||
$("#venueSearchHelper").hide();
|
||||
$("#venueSearch").removeClass("is-valid");
|
||||
$("#addressContent input[readonly], #addressContent input[readonly='readonly']").val("");
|
||||
|
||||
place.address_components.forEach(component => {
|
||||
@ -149,8 +158,43 @@ function fillAddress(place) {
|
||||
// fillAddressControl(item, ["lat"], "#venueLat", "lat");
|
||||
// fillAddressControl(item, ["lng"], "#venueLng", "lng");
|
||||
// });
|
||||
|
||||
$("#venueSearch").addClass("is-valid");
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
initMap();
|
||||
|
||||
$("#contactContent .input-group input[type=checkbox]").each(function() {
|
||||
$(this).change(function() {
|
||||
var input = $(this).closest(".input-group").find("input[type=url], input[type=text]").first();
|
||||
if (!this.checked) input.val("");
|
||||
input.removeClass("is-valid is-invalid");
|
||||
input.prop("disabled", !this.checked);
|
||||
});
|
||||
})
|
||||
|
||||
// $("#venueUseFacebook").change(function() {
|
||||
// if (!this.checked) $("#venueFacebook").val("");
|
||||
// $("#venueFacebook").removeClass("is-valid is-invalid");
|
||||
// $("#venueFacebook").prop("disabled", !this.checked);
|
||||
// });
|
||||
|
||||
// $("#venueUseInstagram").change(function() {
|
||||
// if (!this.checked) $("#venueInstagram").val("");
|
||||
// $("#venueInstagram").removeClass("is-valid is-invalid");
|
||||
// $("#venueInstagram").prop("disabled", !this.checked);
|
||||
// });
|
||||
|
||||
// $("#venueUseTwitter").change(function() {
|
||||
// if (!this.checked) $("#venueTwitter").val("");
|
||||
// $("#venueTwitter").removeClass("is-valid is-invalid");
|
||||
// $("#venueTwitter").prop("disabled", !this.checked);
|
||||
// });
|
||||
});
|
||||
|
||||
$("#watersContentScroll").on("click", function() {
|
||||
$("#venueModal .tab-content").animate({
|
||||
scrollTop: $("#watersContent")[0].scrollHeight
|
||||
}, 1000);
|
||||
});
|
||||
@ -14,6 +14,14 @@ $body-bg :#000;
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-link {
|
||||
color: $primary-hover-colour;
|
||||
transition: color 0.3s;
|
||||
&:hover {
|
||||
color: $primary-colour;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
border-color: $primary-colour;
|
||||
background-color: $primary-colour;
|
||||
@ -150,7 +158,45 @@ $body-bg :#000;
|
||||
}
|
||||
}
|
||||
|
||||
#watersContentScroll {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mw-1920 {
|
||||
max-width: 1920px !important;
|
||||
}
|
||||
|
||||
.btn-animate {
|
||||
// Initial styles for the button
|
||||
transform-origin: center;
|
||||
transition: transform 0.1s ease-out;
|
||||
|
||||
&:active:focus {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
// Keyframes for the pop animation
|
||||
@keyframes button-pop {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the keyframes on the button when not in :active or :focus state
|
||||
&:not(:active) {
|
||||
animation: button-pop 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -270,6 +316,23 @@ $body-bg :#000;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.animation-bouncing-searchicon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
animation: bounce 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -110%);
|
||||
}
|
||||
}
|
||||
|
||||
// .card-badge-container {
|
||||
// position: relative;
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<body class="overflow-y-auto font-montserrat bg-body-tertiary">
|
||||
|
||||
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark" style="background-color: #04385c;">
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid mw-1920">
|
||||
<a href="#" class="navbar-brand mx-auto ms-sm-4 me-sm-5 user-select-none">
|
||||
<img src="{% static 'img/logo-icon-alt.webp' %}" class="me-1" height="45px" alt="Brand Logo">
|
||||
<img src="{% static 'img/logo-text-alt.webp' %}" height="40px" alt="Brand Logo">
|
||||
@ -43,13 +43,13 @@
|
||||
<hr class="d-lg-none">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0 me-0 me-lg-4 flex-row flex-wrap">
|
||||
<li class="nav-item mb-2 mb-lg-0">
|
||||
<button id="themeSwitcher" class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
|
||||
<button id="themeSwitcher" class="btn btn-outline-light btn-animate border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
|
||||
<i class="bi"></i>
|
||||
<span class="d-lg-none ms-2">Theme</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-2 mb-lg-0 dropdown position-relative">
|
||||
<button class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
|
||||
<button class="btn btn-outline-light btn-animate border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-bell"></i>
|
||||
<span class="d-lg-none ms-2">Notifications</span>
|
||||
</button>
|
||||
@ -89,7 +89,7 @@
|
||||
{% endblock %}
|
||||
|
||||
<footer class="bg-dark text-light">
|
||||
<div class="container py-5">
|
||||
<div class="container py-5 mw-1920">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<h3>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user