jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

modal style change & move to own html file

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-11-10 23:48:23 +00:00
parent dc5632be07
commit ad9ec5d470
3 changed files with 87 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/home/static/home/scss/venues.scss
View File

@ -92,16 +92,30 @@
.modal-content { min-height: 0 !important; }
.venue-modal-header {
@extend .modal-header;
color: #fff;
background-color: #04385c;
border-radius: 0;
padding: 1rem 1.5rem;
}
.venue-modal-body {
flex-grow: 1;
.form-control { border-radius: var(--bs-border-radius-sm); }
textarea {
--height: calc(6em + 0.75rem + calc(var(--bs-border-width) * 2));;
max-height: var(--height);
min-height: var(--height);
height: var(--height);
resize: none;
}
@ -139,6 +153,12 @@
}
.btn-primary {
}
}

66
apps/home/templates/home/venue-modal.html Normal file
View File

@ -0,0 +1,66 @@
<div id="venueModal" class="venue-modal modal fade" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
<div class="modal-content rounded-1">
<div class="venue-modal-header" data-bs-theme="dark">
<h5 class="modal-title me-5 fw-bold">Create a Venue</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="venue-modal-body row g-0">
<div class="col-md-1">
<div class="venue-modal-sidebar">
<button type="button" class="venue-sidebar-btn active">
<i class="bi bi-card-text"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-geo-alt"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-telephone"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-images"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-droplet-half"></i>
</button>
<button type="button" class="venue-sidebar-btn mt-auto">
<i class="bi bi-check-lg"></i>
</button>
</div>
</div>
<div class="col-md-11">
<div class="venue-modal-content">
<div class="form-group">
<label for="venueName" class="form-label">Name</label>
<input type="text" name="venueName" id="venueName" class="form-control">
</div>
<div class="form-group mt-4">
<label for="venueDescription" class="form-label">Description</label>
<textarea name="venueDescription" id="venueDescription" class="form-control"></textarea>
</div>
<div class="mt-4">
<label class="form-label w-100">Type</label>
<div class="btn-group rounded-1">
<input type="radio" name="venueType" id="venueTypeFishery" class="btn-check" value="fishery">
<label for="venueTypeFishery" class="btn btn-secondary">Fishery</label>
<input type="radio" name="venueType" id="venueTypeClub" class="btn-check" value="club">
<label for="venueTypeClub" class="btn btn-secondary">Club</label>
<input type="radio" name="venueType" id="venueTypePrivate" class="btn-check" value="private">
<label for="venueTypePrivate" class="btn btn-secondary">Private</label>
</div>
</div>
<div class="mt-5 text-end">
<button type="button" class="btn btn-secondary rounded-1 me-3 d-none">
Back
</button>
<button type="button" class="btn btn-primary rounded-1 px-4">
Next
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

63
apps/home/templates/home/venues.html
View File

@ -30,69 +30,8 @@
<div id="venueContainer" class="row gy-0 venue-items"></div>
</div>
<div id="venueModal" class="venue-modal modal fade" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
<div class="modal-content rounded-1">
<div class="modal-header">
<h5 class="modal-title me-5 fw-bold">New Venue</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="venue-modal-body row g-0">
<div class="col-md-1">
<div class="venue-modal-sidebar">
<button type="button" class="venue-sidebar-btn active">
<i class="bi bi-file-earmark-text"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-geo-alt"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-telephone"></i>
</button>
<button type="button" class="venue-sidebar-btn">
<i class="bi bi-droplet-half"></i>
</button>
<button type="button" class="venue-sidebar-btn mt-auto">
<i class="bi bi-check-lg"></i>
</button>
</div>
</div>
<div class="col-md-11">
<div class="venue-modal-content">
<div class="form-group">
<label for="venueName" class="form-label">Name</label>
<input type="text" name="venueName" id="venueName" class="form-control">
</div>
<div class="form-group mt-4">
<label for="venueDescription" class="form-label">Description</label>
<textarea name="venueDescription" id="venueDescription" class="form-control"></textarea>
</div>
<div class="mt-4">
<label class="form-label w-100">Type</label>
<div class="btn-group">
<input type="radio" name="venueType" id="venueTypeFishery" class="btn-check" value="fishery">
<label for="venueTypeFishery" class="btn btn-outline-primary">Fishery</label>
<input type="radio" name="venueType" id="venueTypeClub" class="btn-check" value="club">
<label for="venueTypeClub" class="btn btn-outline-primary">Club</label>
<input type="radio" name="venueType" id="venueTypePrivate" class="btn-check" value="private">
<label for="venueTypePrivate" class="btn btn-outline-primary">Private</label>
</div>
</div>
{% include "home/venue-modal.html" %}
<div class="mt-5 text-end">
<button type="button" class="btn btn-secondary rounded-1 me-3 d-none">
Back
</button>
<button type="button" class="btn btn-primary rounded-1 px-4">
Next
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
{% block scripts %}