redesign init
This commit is contained in:
Corban-Lee
parent
bf6d441812
commit
ac5a66b054
@ -0,0 +1,23 @@
|
||||
# Generated by Django 4.1.5 on 2023-11-06 20:31
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('mainapp', '0003_waters'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='venue',
|
||||
name='active',
|
||||
field=models.BooleanField(default=True),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='venue',
|
||||
name='description',
|
||||
field=models.TextField(blank=True, max_length=500),
|
||||
),
|
||||
]
|
||||
@ -37,9 +37,17 @@ class Venue(models.Model):
|
||||
instagram_url = models.URLField(blank=True)
|
||||
facebook_url = models.URLField(blank=True)
|
||||
|
||||
active = models.BooleanField(default=True)
|
||||
|
||||
def __str__(self):
|
||||
return self.name
|
||||
|
||||
def waters(self):
|
||||
"""Returns all waters linked to this venue."""
|
||||
|
||||
waters = Waters.objects.filter(venue=self)
|
||||
return waters
|
||||
|
||||
|
||||
class Waters(models.Model):
|
||||
"""Represents the waters of a Venue"""
|
||||
|
||||
31
src/mainapp/templates/_index.html
Normal file
31
src/mainapp/templates/_index.html
Normal file
@ -0,0 +1,31 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="{% static 'css/ocean.css' %}">
|
||||
{% endblock style %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<div id="ocean">
|
||||
<div class="bubble bubble--1"></div>
|
||||
<div class="bubble bubble--2"></div>
|
||||
<div class="bubble bubble--3"></div>
|
||||
<div class="bubble bubble--4"></div>
|
||||
<div class="bubble bubble--5"></div>
|
||||
<div class="bubble bubble--6"></div>
|
||||
<div class="bubble bubble--7"></div>
|
||||
<div class="bubble bubble--8"></div>
|
||||
<div class="bubble bubble--9"></div>
|
||||
<div class="bubble bubble--10"></div>
|
||||
<div class="bubble bubble--11"></div>
|
||||
<div class="bubble bubble--12"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{% static 'js/ocean.js' %}"></script>
|
||||
{% endblock scripts %}
|
||||
@ -1,31 +1,482 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}
|
||||
Venues |
|
||||
{% endblock title %}
|
||||
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="{% static 'css/ocean.css' %}">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
{% endblock style %}
|
||||
|
||||
{% block header_buttons %}
|
||||
{% endblock header_buttons %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-body-tertiary pb-5">
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<div id="ocean">
|
||||
<div class="bubble bubble--1"></div>
|
||||
<div class="bubble bubble--2"></div>
|
||||
<div class="bubble bubble--3"></div>
|
||||
<div class="bubble bubble--4"></div>
|
||||
<div class="bubble bubble--5"></div>
|
||||
<div class="bubble bubble--6"></div>
|
||||
<div class="bubble bubble--7"></div>
|
||||
<div class="bubble bubble--8"></div>
|
||||
<div class="bubble bubble--9"></div>
|
||||
<div class="bubble bubble--10"></div>
|
||||
<div class="bubble bubble--11"></div>
|
||||
<div class="bubble bubble--12"></div>
|
||||
</div>
|
||||
<div class="row px-2 gx-3 bg-body shadow-sm border-bottom">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center p-2 flex-wrap">
|
||||
<h1 class="fw-bold h4 mb-0 ms-2">Venues & Waters</h1>
|
||||
<div class="input-group w-auto">
|
||||
<div class="input-group-text bg-white pe-0">
|
||||
<i class="bi bi-search"></i>
|
||||
</div>
|
||||
<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);">
|
||||
<i class="bi bi-plus-lg me-1"></i>
|
||||
New
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary 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">
|
||||
<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">
|
||||
<i class="bi bi-filter-right me-sm-1"></i>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-row-reverse mt-2 gy-2 gx-3 mx-2">
|
||||
<div class="col-lg-3 d-flex flex-column">
|
||||
<!-- <div class="d-flex justify-content-between align-items-center bg-light rounded-2 p-2 shadow-sm border mb-3">
|
||||
<button class="btn btn-light text-dark border">
|
||||
test
|
||||
</button>
|
||||
</div> -->
|
||||
<div id="locationMapContainer" class="w-100 position-relative mb-3 border shadow-sm rounded-2" style="height: 300px;">
|
||||
<div id="allLocationsMap" class="rounded-2 w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="row g-3">
|
||||
{% for venue in venues %}
|
||||
<div class="col-xxl-3 col-xl-6 col-md-6 col-sm-12">
|
||||
<div class="border rounded-2 p-4 h-100 bg-body shadow-sm d-flex flex-column">
|
||||
<header class="d-flex justify-content-between align-items-start mb-2 dropend">
|
||||
<div class="text-truncate">
|
||||
<h4 class="h6 mb-0 text-body-secondary small">
|
||||
{% if venue.venue_type == "FISHERY" %}
|
||||
Fishery
|
||||
{% elif venue.venue_type == "PRIVATE" %}
|
||||
Private
|
||||
{% elif venue.venue_type == "CLUB" %}
|
||||
Club
|
||||
{% endif %}
|
||||
</h4>
|
||||
<h3 class="h5 mb-0 me-2 text-truncate">{{ venue.name }}</h3>
|
||||
</div>
|
||||
<button class="border-0 bg-transparent" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-three-dots fs-4 d-flex"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu rounded-4 overflow-hidden py-0 shadow-sm" style="width: fit-content; min-width: fit-content;">
|
||||
<li>
|
||||
<button class="dropdown-item py-2">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="dropdown-divider my-0">
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item py-2" onclick="openVenueModal({{ venue.id }});">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="dropdown-divider my-0">
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item py-2 hover-fill-danger">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<p class="text-secondary venue-description">{{ venue.description }}</p>
|
||||
<div class="d-flex align-items-center fs-6 mt-auto">
|
||||
{% if venue.email_address %}
|
||||
<a href="mailto:{{ venue.email_address }}" class="text-reset text-hover-primary me-2" data-bs-toggle="tooltip" data-bs-title="{{ venue.email_address }}">
|
||||
<i class="bi bi-envelope-at"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if venue.phone_number %}
|
||||
<a href="tel:{{ venue.phone_number }}" class="text-reset text-hover-primary me-2" data-bs-toggle="tooltip" data-bs-title="{{ venue.phone_number }}">
|
||||
<i class="bi bi-telephone"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if venue.latitude and venue.longitude %}
|
||||
<a href="https://www.openstreetmap.org/?mlat={{ venue.latitude }}&mlon={{ venue.longitude }}" target="_blank" class="text-reset text-hover-primary me-2" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="{{ venue.street_address }}<br>{{ venue.city }}, {{ venue.provence }}<br>{{ venue.postal_code }}">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if venue.website_url %}
|
||||
<a href="{{ venue.website_url }}" class="text-reset text-hover-primary me-2" target="_blank" data-bs-toggle="tooltip" data-bs-title="{{ venue.website_url }}">
|
||||
<i class="bi bi-globe2"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="d-inline mx-auto"></div>
|
||||
{% if venue.waters %}
|
||||
<div class="badge bg-info-subtle text-info-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are {{ venue.waters|length }} waters in this venue">
|
||||
{{ venue.waters|length }}
|
||||
<i class="bi bi-droplet-half "></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not venue.latitude or not venue.longitude or not venue.phone_number or not venue.website_url or not venue.email_address %}
|
||||
<div class="badge bg-warning-subtle text-warning-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are missing details for this venue">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not venue.active %}
|
||||
<div class="badge bg-danger-subtle text-danger-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="This venue is inactive">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="venueModal" class="modal fade" data-venue-id="-1">
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down modal-lg">
|
||||
<div class="modal-content overflow-hidden rounded-4" style="min-height: 760px; max-height: 760px;">
|
||||
<div class="modal-header justify-content-center">
|
||||
<h4 class="card-title fw-bold mb-0">
|
||||
<span class="create" style="display: none">New Venue</span>
|
||||
<span class="edit" style="display: none">Edit Venue</span>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body border-bottom-0 p-0 overflow-x-hidden overflow-y-auto">
|
||||
<ul id="newVenueTabBtns" class="nav nav-pills mb-4 d-flex w-100 justify-content-center py-2 bg-light" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueDetailsTabBtn" class="nav-link rounded-4 active" data-bs-toggle="pill" data-bs-target="#newVenueDetailsTab" type="button" role="tab" aria-controls="newVenueDetailsTab" aria-selected="true">Details</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueAddressTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueAddressTab" type="button" role="tab" aria-controls="newVenueAddressTab" aria-selected="false">Address</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueContactTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueContactTab" type="button" role="tab" aria-controls="newVenueContactTab" aria-selected="false">Contact</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button id="newVenueWatersTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueWatersTab" type="button" role="tab" aria-controls="newVenueWatersTab" aria-selected="false">Waters</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="px-2 px-sm-4 pb-0">
|
||||
<form id="venueForm" n class="needs-validation" novalidate>
|
||||
<div id="newVenueTabs" class="tab-content">
|
||||
<div id="newVenueDetailsTab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="newVenueDetailsTabBtn" tabindex="0">
|
||||
<div class="row g-4 align-items-start mb-3">
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<input name="venueName" id="venueName" type="text" class="form-control" placeholder="" minlength="3" maxlength="100" required>
|
||||
<label for="venueName" class="form-label">
|
||||
Name <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter the Venue's name</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="form-floating">
|
||||
<select name="venueType" id="venueType" class="form-select" placeholder="" required>
|
||||
<option disabled value="">Choose one ...</option>
|
||||
{% for type in venue_types %}
|
||||
<option value="{{ type.0 }}">{{ type.1 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="venueType" class="form-label">
|
||||
Type of Venue <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please select a Venue type</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea name="venueDescription" id="venueDescription" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
|
||||
<label for="venueDescription" class="form-label">
|
||||
Description
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a brief description of the Venue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea name="venueExtraNotes" id="venueExtraNotes" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
|
||||
<label for="venueExtraNotes" class="form-label">Extra Notes</label>
|
||||
<div class="invalid-feedback">Please enter any additional notes regarding the Venue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
|
||||
|
||||
<div class="row flex-row-reverse">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating mb-4">
|
||||
<input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="" required disabled>
|
||||
<label for="venueStreetAddress" class="form-label">
|
||||
Street Address <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required disabled>
|
||||
<label for="venueCity" class="form-label">
|
||||
Town or City <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Town or City</div>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="" required disabled>
|
||||
<label for="venueProvence" class="form-label">
|
||||
Provence <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Provence</div>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required disabled>
|
||||
<label for="venuePostCode" class="form-label">
|
||||
Postal Code <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Postal Code</div>
|
||||
</div>
|
||||
<div class="form-floating mb-4">
|
||||
<input name="venueLatitude" id="venueLatitude" type="text" class="form-control" placeholder="" required disabled>
|
||||
<label for="venueLatitude" class="form-label">
|
||||
Latitude <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Latitude</div>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input name="venueLongitude" id="venueLongitude" type="text" class="form-control" placeholder="" required disabled>
|
||||
<label for="venueLongitude" class="form-label">
|
||||
Longitude <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Longitude</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 d-flex flex-column">
|
||||
<div class="col-lg-8 input-group">
|
||||
<span class="input-group-text bg-white pe-0">
|
||||
<i class="bi bi-search"></i>
|
||||
</span>
|
||||
<input name="searchPostCode" id="searchPostCode" type="text" class="form-control border-start-0" list="postcodeSearchDataList" placeholder="Search by Post Code ...">
|
||||
</div>
|
||||
<datalist id="postcodeSearchDataList">
|
||||
<option value="london street">london street</option>
|
||||
</datalist>
|
||||
<div class="separator my-3 text-secondary">
|
||||
<span>or</span>
|
||||
</div>
|
||||
<h5 class="h6 text-body-secondary">Search by selecting a location on the map ...</h5>
|
||||
<div id="locationMapContainer" class="w-100 position-relative flex-grow-1" >
|
||||
<div id="locationMap" class="location-map rounded-2 w-100 h-100"></div>
|
||||
<div id="locationMapOverlay" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="form-floating mb-3">
|
||||
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venuePostCode" class="form-label">
|
||||
Post Code <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Post Code</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<i class="bi bi-search me-2"></i>
|
||||
Find Address
|
||||
</button> -->
|
||||
|
||||
|
||||
<!-- <div class="mb-3">
|
||||
<div class="form-floating">
|
||||
<input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueStreetAddress" class="form-label">
|
||||
Street Address <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a valid Street Address</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-4 align-items-start mb-3">
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueCity" class="form-label">
|
||||
Town or City <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Town or City</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueProvence" class="form-label">
|
||||
Provence <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Provence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venuePostCode" class="form-label">
|
||||
Postal Code <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Postal Code</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<select name="venueCountry" id="venueCountry" class="form-select" placeholder="" disabled required>
|
||||
<option value="UK">United Kingdom</option>
|
||||
</select>
|
||||
<label for="venueCountry" class="form-label">
|
||||
Country <i class="bi bi-lock-fill text-warning-emphasis"></i>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Country</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div id="locationMapContainer" class="w-100 position-relative" style="height: 225px;">
|
||||
<div id="locationMap" class="rounded-2 w-100 h-100"></div>
|
||||
<div id="locationMapOverlay" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueLatitude" id="venueLatitude" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueLatitude" class="form-label">
|
||||
Latitude <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Latitude</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueLongitude" id="venueLongitude" type="text" class="form-control" placeholder="" required>
|
||||
<label for="venueLongitude" class="form-label">
|
||||
Longitude <strong class="text-danger">*</strong>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Longitude</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="newVenueContactTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueContactTabBtn" tabindex="0">
|
||||
<div class="row g-4 align-items-start">
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venuePhone" id="venuePhone" type="tel" class="form-control" placeholder="">
|
||||
<label for="venuePhone" class="form-label">Phone Number</label>
|
||||
<div class="invalid-feedback">Bad phone number</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-floating">
|
||||
<input name="venueEmail" id="venueEmail" type="email" class="form-control" placeholder="">
|
||||
<label for="venueEmail" class="form-label">Email Address</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<input name="venueWebsite" id="venueWebsite" type="url" class="form-control" placeholder="">
|
||||
<label for="venueWebsite" class="form-label">Website Address</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-twitter" style="color: #1DA1F2"></i>
|
||||
</span>
|
||||
<div class="form-floating">
|
||||
<input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="">
|
||||
<label for="venueTwitter" class="form-label d-flex align-items-center">
|
||||
Twitter Profile Address
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-facebook" style="color: #4267B2"></i>
|
||||
</span>
|
||||
<div class="form-floating">
|
||||
<input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="">
|
||||
<label for="venueFacebook" class="form-label d-flex align-items-center">
|
||||
Facebook Profile Address
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-instagram" style="color: #D62976;"></i>
|
||||
</span>
|
||||
<div class="form-floating">
|
||||
<input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="">
|
||||
<label for="venueInstagram" class="form-label d-flex align-items-center">
|
||||
Instagram Profile Address
|
||||
</label>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newVenueWatersTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueWatersTabBtn" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0 px-4 py-3">
|
||||
<button type="button" class="btn btn-outline-danger rounded-4 me-auto edit">
|
||||
<i class="bi bi-trash2"></i>
|
||||
</button>
|
||||
<button type="submit" id="saveVenue" class="btn btn-primary rounded-4 px-4" form="venueForm">
|
||||
<span class="edit" style="display: none;">Save Edit</span>
|
||||
<span class="create" style="display: none;">Save New</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary rounded-4 ms-auto" data-bs-dismiss="modal">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{% static 'js/ocean.js' %}"></script>
|
||||
<script>
|
||||
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {trigger : 'hover'}))
|
||||
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
</script>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
|
||||
<script src="{% static 'js/mainapp/venues.js' %}" data-csrfmiddlewaretoken="{{ csrf_token }}"></script>
|
||||
{% endblock scripts %}
|
||||
|
||||
@ -57,20 +57,22 @@
|
||||
<div class="">
|
||||
<div class="card w-100 h-100 border-0 rounded-3 overflow-hidden">
|
||||
<div class="card-body bg-body-tertiary position-relative">
|
||||
<div class="d-flex justify-content-between align-items-stretch">
|
||||
<div class="d-flex justify-content-between align-items-stretch h-100">
|
||||
<div>
|
||||
<h5 class="card-title fw-semibold">{{ venue.name }}</h5>
|
||||
<p class="card-text mb-0">{{ venue.street_address }}</p>
|
||||
<p class="card-text mb-0">{{ venue.city }}, {{ venue.provence }}</p>
|
||||
<p class="card-text mb-3">{{ venue.postal_code }}</p>
|
||||
<p class="card-text mb-0">{{ venue.phone_number }}</p>
|
||||
<p class="card-text mb-0">{{ venue.email_address }}</p>
|
||||
<div class="text-body-secondary">
|
||||
<p class="card-text mb-0">{{ venue.phone_number }}</p>
|
||||
<p class="card-text mb-0">{{ venue.email_address }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-end align-items-end h-100">
|
||||
<div class="d-flex flex-column justify-content-end align-items-end">
|
||||
<div class="badge company-bg rounded-pill end-0 top-0">
|
||||
6 Waters
|
||||
</div>
|
||||
<button class="mt-auto btn btn-outline-company rounded-circle" style="width: fit-content;">
|
||||
<button class="mt-auto btn btn-outline-company rounded-circle" style="width: fit-content;" onclick="openVenueModal({{ venue.id }});">
|
||||
<i class="bi bi-gear"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -226,7 +228,7 @@
|
||||
<option value="UK">United Kingdom</option>
|
||||
</select>
|
||||
<label for="venueCountry" class="form-label">
|
||||
Country <i class="bi bi-lock-fill"></i>
|
||||
Country <i class="bi bi-lock-fill text-warning-emphasis"></i>
|
||||
</label>
|
||||
<div class="invalid-feedback">Please enter a Country</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,11 @@ from .models import Venue, Waters
|
||||
|
||||
|
||||
def index(request):
|
||||
return render(request, 'index.html')
|
||||
|
||||
venues = Venue.objects.all()
|
||||
context = {"venues": venues, "venue_types": Venue.VENUE_TYPES}
|
||||
|
||||
return render(request, 'index.html', context)
|
||||
|
||||
def results(request):
|
||||
return render(request, 'results.html')
|
||||
|
||||
BIN
src/static/img/logo-horizontal.webp
Normal file
BIN
src/static/img/logo-horizontal.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
src/static/img/logo-icon-alt.webp
Normal file
BIN
src/static/img/logo-icon-alt.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/static/img/logo-icon.webp
Normal file
BIN
src/static/img/logo-icon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/static/img/logo-text-alt.webp
Normal file
BIN
src/static/img/logo-text-alt.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/static/img/logo-text.webp
Normal file
BIN
src/static/img/logo-text.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@ -68,13 +68,42 @@ const formControls = [
|
||||
return "Enter the postal code of the venue";
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "venueLatitude",
|
||||
validation: function (element) {
|
||||
const value = element.val();
|
||||
return (!element.attr("required") || value.trim() !== "");
|
||||
},
|
||||
errorMessage: function (element) {
|
||||
return "Enter the latitude of the venue";
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "venueLongitude",
|
||||
validation: function (element) {
|
||||
const value = element.val();
|
||||
return (!element.attr("required") || value.trim() !== "");
|
||||
},
|
||||
errorMessage: function (element) {
|
||||
return "Enter the longitude of the venue";
|
||||
}
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
$(document).ready(function() {
|
||||
// $("#newVenueAddressTab input").each(function() { //debuging remove later
|
||||
// $(this).addClass("is-valid");
|
||||
// });
|
||||
// allLocationsMap
|
||||
var allLocationstileLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: false,
|
||||
})
|
||||
|
||||
var allLocationsmap = L.map("allLocationsMap", {
|
||||
center: originalMapCoords,
|
||||
zoom:8,
|
||||
layers: [allLocationstileLayer]
|
||||
});
|
||||
|
||||
setTimeout(function() {allLocationsmap.invalidateSize(false)}, 200)
|
||||
});
|
||||
|
||||
$("#newVenueAddressTabBtn").on("shown.bs.tab", function() {
|
||||
@ -152,7 +181,7 @@ $("#newVenueAddressTabBtn").on("shown.bs.tab", function() {
|
||||
$("#venueCity").val(data.address.village || data.address.town || data.address.city);
|
||||
$("#venueProvence").val(data.address.county || data.address.state_district);
|
||||
$("#venuePostCode").val(data.address.postcode || '');
|
||||
$("#venueCountry").val(data.address.country || '');
|
||||
// $("#venueCountry").val(data.address.country || '');
|
||||
$("#venueLatitude").val(coordinates.lat);
|
||||
$("#venueLongitude").val(coordinates.lng);
|
||||
});
|
||||
@ -168,7 +197,7 @@ function toggleLoadingMap(isLoading) {
|
||||
$("#venueCity").prop("disabled", isLoading)
|
||||
$("#venueProvence").prop("disabled", isLoading)
|
||||
$("#venuePostCode").prop("disabled", isLoading)
|
||||
$("#venueCountry").prop("disabled", isLoading)
|
||||
// $("#venueCountry").prop("disabled", isLoading)
|
||||
if (isLoading) {
|
||||
$("#locationMapOverlay").show();
|
||||
}
|
||||
@ -315,6 +344,7 @@ function saveVenue() {
|
||||
instagram_url: $("#venueInstagram").val(),
|
||||
|
||||
csrfmiddlewaretoken: scriptData.csrfmiddlewaretoken,
|
||||
active: 1
|
||||
}
|
||||
|
||||
const venue_id = $("#venueModal").data("venue-id");
|
||||
|
||||
195
src/static/scss/_base.scss
Normal file
195
src/static/scss/_base.scss
Normal file
@ -0,0 +1,195 @@
|
||||
#webContent {
|
||||
margin-left: 80px;
|
||||
transition: margin 400ms ease-in-out;
|
||||
|
||||
&.webcontent-collapsed {
|
||||
margin-left: 280px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
|
||||
color: white;
|
||||
background-color: #04385c;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
padding: 1rem 0;
|
||||
|
||||
transition: width 400ms ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
.sidebar-collapse-button {
|
||||
|
||||
display: inline-block;
|
||||
color: white;
|
||||
border: none;
|
||||
background: none;
|
||||
transition: transform 200ms ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
&.sidebar-enlarged {
|
||||
width: 280px !important;
|
||||
|
||||
.sidebar-collapse-button { transform: rotate(-180deg); }
|
||||
|
||||
a.nav-link {
|
||||
text-align: start !important;
|
||||
|
||||
i.bi {
|
||||
margin: 0 1rem 0 .5rem !important;
|
||||
}
|
||||
|
||||
span.sidebar-item-text {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.sidebar-enlarged) {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
#sidebar-brand {
|
||||
|
||||
max-width: 120px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 .5rem;
|
||||
|
||||
}
|
||||
|
||||
ul.sidebar-items {
|
||||
|
||||
flex-direction: column;
|
||||
margin-bottom: auto;
|
||||
|
||||
li.nav-item {
|
||||
|
||||
a.nav-link {
|
||||
|
||||
color: inherit;
|
||||
transition: all 200ms;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover { background-color: rgba(0, 0, 0, 0.15); }
|
||||
|
||||
i.bi {
|
||||
// transition: all 200ms ease-in-out;
|
||||
// margin: 0 auto;
|
||||
}
|
||||
|
||||
span.sidebar-item-text {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// .card-badge-container {
|
||||
// position: relative;
|
||||
|
||||
// .card-badge {
|
||||
// aspect-ratio: 1 / 1;
|
||||
|
||||
// height: calc(100% + 20px);
|
||||
|
||||
// position: absolute;
|
||||
// top: calc(-30% - 21px);
|
||||
// left: -26px;
|
||||
|
||||
// background-color: #04385c;
|
||||
// border-bottom: 30px;
|
||||
// border-left: 30px;
|
||||
// border-right: 30px;
|
||||
|
||||
// transform: rotate(45deg);
|
||||
// // -webkit-transform: rotate(45deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
#newVenueTabBtns {
|
||||
|
||||
// border-radius: 50rem;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
|
||||
.nav-item > .nav-link {
|
||||
// border-radius: 1rem !important;
|
||||
|
||||
color: #04385c;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: #04385c;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-facing-left {
|
||||
border-top-left-radius: 1.2rem !important;
|
||||
border-bottom-left-radius: 1.2rem !important;
|
||||
border-top-right-radius: 0.8rem !important;
|
||||
border-bottom-right-radius: 0.8rem !important;
|
||||
}
|
||||
|
||||
.btn-facing-right {
|
||||
border-top-left-radius: 0.8rem !important;
|
||||
border-bottom-left-radius: 0.8rem !important;
|
||||
border-top-right-radius: 1.2rem !important;
|
||||
border-bottom-right-radius: 1.2rem !important;
|
||||
}
|
||||
|
||||
#venueModal .modal-content {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
#locationMapOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7); /* Darkened overlay with 70% opacity */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000; /* Ensure the overlay is above the map */
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 4px solid rgba(255, 255, 255, 0.3); /* Light border for the spinner */
|
||||
border-top: 4px solid #3498db; /* Blue spinner */
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.venue-textarea {
|
||||
resize: none;
|
||||
min-height: 152px !important;
|
||||
}
|
||||
@ -1,3 +1,120 @@
|
||||
|
||||
$primary-colour: #04385c;
|
||||
$primary-hover-colour: #085c8d;
|
||||
$danger-colour: #dc3545;
|
||||
$danger-subtle-colour: #f8d7da;
|
||||
$danger-emphasis-colour: #58151c;
|
||||
$secondary-emphasis-colour:red;
|
||||
$secondary-subtle-colour:red;
|
||||
$border-color: #dee2e6;
|
||||
|
||||
body {
|
||||
// background-image: linear-gradient(0deg, #182848, #2980b9)
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-primary {
|
||||
border-color: $primary-colour;
|
||||
background-color: $primary-colour;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
&:hover {
|
||||
border-color: $primary-hover-colour;
|
||||
background-color: $primary-hover-colour;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-outline-primary {
|
||||
color: $primary-colour;
|
||||
border-color: $primary-colour;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
&:hover {
|
||||
color: white;
|
||||
border-color: $primary-hover-colour;
|
||||
background-color: $primary-hover-colour
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.venue-description {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $primary-colour;
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: $primary-colour;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-hover-primary {
|
||||
transition: color 0.3s;
|
||||
&:hover { color: $primary-colour !important; }
|
||||
}
|
||||
|
||||
.tooltip-inner { text-align: left; }
|
||||
|
||||
// Width Fit Content
|
||||
.w-fc { width: fit-content; }
|
||||
.mw-fc { min-width: fit-content; }
|
||||
.mxw-fc { max-width: fit-content; }
|
||||
|
||||
.hover-fill-secondary {
|
||||
background-color: transparent;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
&:hover {
|
||||
color: $secondary-emphasis-colour;
|
||||
background-color: $secondary-subtle-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-fill-danger {
|
||||
background-color: transparent;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
&:hover {
|
||||
color: $danger-emphasis-colour;
|
||||
background-color: $danger-subtle-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
&::before,&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
&:not(:empty)::before {
|
||||
margin-right: .75em;
|
||||
}
|
||||
&:not(:empty)::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#webContent {
|
||||
margin-left: 80px;
|
||||
transition: margin 400ms ease-in-out;
|
||||
@ -125,24 +242,24 @@
|
||||
// }
|
||||
// }
|
||||
|
||||
#newVenueTabBtns {
|
||||
// #newVenueTabBtns {
|
||||
|
||||
// border-radius: 50rem;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
// // border-radius: 50rem;
|
||||
// overflow: hidden;
|
||||
// width: fit-content;
|
||||
|
||||
.nav-item > .nav-link {
|
||||
// border-radius: 1rem !important;
|
||||
// .nav-item > .nav-link {
|
||||
// // border-radius: 1rem !important;
|
||||
|
||||
color: #04385c;
|
||||
// color: #04385c;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: #04385c;
|
||||
}
|
||||
}
|
||||
// &.active {
|
||||
// color: white;
|
||||
// background-color: #04385c;
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
.btn-facing-left {
|
||||
border-top-left-radius: 1.2rem !important;
|
||||
@ -162,7 +279,7 @@
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
#locationMapOverlay {
|
||||
.location-map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
101
src/templates/_base.html
Normal file
101
src/templates/_base.html
Normal file
@ -0,0 +1,101 @@
|
||||
{% load compress %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
|
||||
|
||||
{% load static %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" media="screen">
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
|
||||
{% endcompress %}
|
||||
{% include 'fonts.html' %}
|
||||
{% block style %}
|
||||
{% endblock style %}
|
||||
</head>
|
||||
<body class="font-helvetica mw-100">
|
||||
<div class="container">
|
||||
|
||||
|
||||
<div class="d-flex align-content-stretch h-100 align-self-stretch">
|
||||
<aside id="sidebar" class="shadow-lg font-raleway">
|
||||
<a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
|
||||
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
|
||||
</a>
|
||||
<hr class="mx-2">
|
||||
<ul class="sidebar-items nav nav-pills">
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
|
||||
<a class="nav-link py-3" href="/">
|
||||
<i class="bi bi-house-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
|
||||
<a class="nav-link py-3" href="/anglers">
|
||||
<i class="bi bi-people-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Anglers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Venues and Waters">
|
||||
<a class="nav-link py-3" href="/venues">
|
||||
<i class="bi bi-droplet-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Venues and Waters</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
|
||||
<a class="nav-link py-3" href="#">
|
||||
<i class="bi bi-award-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Matches</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
|
||||
<a class="nav-link py-3" href="#">
|
||||
<i class="bi bi-clipboard-data-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Scoreboard</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="sidebar-items nav nav-pills mb-0">
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
|
||||
<a class="nav-link py-3" href="/admin">
|
||||
<i class="bi bi-person-fill-gear fs-4"></i>
|
||||
<span class="sidebar-item-text">Administration</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mx-2">
|
||||
<button class="sidebar-collapse-button">
|
||||
<i class="bi bi-chevron-double-right"></i>
|
||||
</button>
|
||||
</aside>
|
||||
<div class="flex-grow-1 d-flex flex-column" id="webContent">
|
||||
<div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: none;"> <!-- style="display: flex;" -->
|
||||
<h1 class="h2 mb-0" id="headerTitle"></h1>
|
||||
<div class="ms-auto">
|
||||
{% block header_buttons %}
|
||||
{% endblock header_buttons %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 d-flex overflow-auto">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
|
||||
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
|
||||
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
||||
<script src="{% static 'js/custom.js' %}"></script>
|
||||
<script src="{% static 'js/base.js' %}"></script>
|
||||
{% block scripts %}
|
||||
{% endblock scripts %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,4 @@
|
||||
{% load static %}
|
||||
{% load compress %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -6,11 +7,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
|
||||
|
||||
{% load static %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" media="screen">
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
|
||||
{% endcompress %}
|
||||
@ -18,80 +17,94 @@
|
||||
{% block style %}
|
||||
{% endblock style %}
|
||||
</head>
|
||||
<body class="font-helvetica mw-100">
|
||||
<body class="overflow-y-auto">
|
||||
|
||||
<div class="d-flex align-content-stretch h-100 align-self-stretch">
|
||||
<aside id="sidebar" class="shadow-lg font-raleway">
|
||||
<a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
|
||||
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
|
||||
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark" style="background-color: #182848;">
|
||||
<div class="container-fluid">
|
||||
<a href="#" class="navbar-brand mx-auto ms-sm-4 me-sm-5">
|
||||
<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">
|
||||
</a>
|
||||
<hr class="mx-2">
|
||||
<ul class="sidebar-items nav nav-pills">
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
|
||||
<a class="nav-link py-3" href="/">
|
||||
<i class="bi bi-house-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
|
||||
<a class="nav-link py-3" href="/anglers">
|
||||
<i class="bi bi-people-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Anglers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Venues and Waters">
|
||||
<a class="nav-link py-3" href="/venues">
|
||||
<i class="bi bi-droplet-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Venues and Waters</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
|
||||
<a class="nav-link py-3" href="#">
|
||||
<i class="bi bi-award-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Matches</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
|
||||
<a class="nav-link py-3" href="#">
|
||||
<i class="bi bi-clipboard-data-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Scoreboard</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="sidebar-items nav nav-pills mb-0">
|
||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
|
||||
<a class="nav-link py-3" href="/admin">
|
||||
<i class="bi bi-person-fill-gear fs-4"></i>
|
||||
<span class="sidebar-item-text">Administration</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mx-2">
|
||||
<button class="sidebar-collapse-button">
|
||||
<i class="bi bi-chevron-double-right"></i>
|
||||
<button class="navbar-toggler mx-auto my-3 my-sm-0 me-sm-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</aside>
|
||||
<div class="flex-grow-1 d-flex flex-column" id="webContent">
|
||||
<div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: none;"> <!-- style="display: flex;" -->
|
||||
<h1 class="h2 mb-0" id="headerTitle"></h1>
|
||||
<div class="ms-auto">
|
||||
{% block header_buttons %}
|
||||
{% endblock header_buttons %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 d-flex overflow-auto">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
<div id="navbarCollapse" class="collapse navbar-collapse mx-4 mx-lg-0 mt-3 mt-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0 fw-bold small">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link pe-3">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link pe-3 active">Venues & Waters</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link pe-3">Other Page</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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 class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
|
||||
<i class="bi bi-moon-stars"></i>
|
||||
<span class="d-lg-none ms-2">Theme</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-2 mb-lg-0">
|
||||
<button class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
|
||||
<i class="bi bi-bell"></i>
|
||||
<span class="d-lg-none ms-2">Notifications</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-2 mb-lg-0 ms-auto ms-lg-0">
|
||||
<button class="btn btn-outline-light rounded-pill border-secondary-subtle d-flex align-items-center justify-content-center me-3">
|
||||
<i class="bi bi-person me-2"></i>
|
||||
<span class="d-lg-none me-2">Administrator</span>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
<footer class="bg-dark text-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<h3>
|
||||
<img src="{% static 'img/at-logo.png' %}" width="200px" alt="">
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled ps-3">
|
||||
<li>
|
||||
<a href="#" class="text-reset text-decoration-none">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-reset text-decoration-none">Venues & Waters</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-reset text-decoration-none">Other</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h5>Contact</h5>
|
||||
<ul>
|
||||
placeholder
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
|
||||
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
|
||||
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
||||
<script src="{% static 'js/custom.js' %}"></script>
|
||||
<!-- <script src="{% static 'js/custom.js' %}"></script> -->
|
||||
<script src="{% static 'js/base.js' %}"></script>
|
||||
{% block scripts %}
|
||||
{% endblock scripts %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user