Fix event checklist on mobile

This commit is contained in:
2020-10-06 16:08:38 +01:00
parent 0b751d62df
commit f147f19140
6 changed files with 236 additions and 228 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
$font-family-sans-serif: "Open Sans", sans-serif;
//Make it look less primary school
$font-size-base: 0.875rem;
$font-size-base: 0.8rem;
$theme-colors: (
"success": #00C851,
"warning": #ffbb33,

View File

@@ -107,7 +107,7 @@
<div class="card">
<div class="card-header">Event Information</div>
<div class="card-body">
<dl class="col-12 row">
<dl class="row">
<dt class="col-4">Event Date</dt>
<dd class="col-8">{{ event.start_date}}{%if event.end_date %}-{{ event.end_date}}{%endif%}</dd>
<dt class="col-4">Event Name</dt>
@@ -117,45 +117,49 @@
<dt class="col-4">Venue</dt>
<dd class="col-8">{{ event.venue }}</dd>
</dl>
<label for="{{ form.power_mic.id_for_label }}"
class="col-4 control-label">{{ form.power_mic.help_text }}</label>
<div class="col-8">
<select id="{{ form.power_mic.id_for_label }}" name="{{ form.power_mic.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" required="true">
{% if object.power_mic %}
<option value="{{object.power_mic.pk}}" selected="selected">{{ object.power_mic.name }}</option>
{% endif %}
</select>
<div class="row">
<label for="{{ form.power_mic.id_for_label }}"
class="col-4 control-label font-weight-bold">{{ form.power_mic.help_text }}</label>
<div class="col-8 col-md-4">
<select id="{{ form.power_mic.id_for_label }}" name="{{ form.power_mic.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" required="true">
{% if object.power_mic %}
<option value="{{object.power_mic.pk}}" selected="selected">{{ object.power_mic.name }}</option>
{% endif %}
</select>
</div>
</div>
<p class="pt-3 font-weight-bold">List vehicles and their drivers</p>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Vehicle</th>
<th scope="col">Driver</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="vehiclest" data-pk="-1">
<tr id="vehicles_new" style="display: none;">
<td><input type="text" class="form-control" name="vehicle_new" disabled="true"/></td>
<td><select class="form-control" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" name="driver_new" disabled="true"></select></td>
<td><button type="button" class="btn btn-danger btn-sm mt-1" data-action='delete' data-target='#vehicle'><span class="fas fa-times"></span></button</td>
</tr>
{% for i in object.vehicles.all %}
<tr id="vehicles_{{i.pk}}">
<td><input name="vehicle_{{i.pk}}" type="text" class="form-control" value="{{ i.vehicle }}"/></td>
<td>
<select name="driver_{{i.pk}}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials">
{% if i.driver != '' %}
<option value="{{i.driver.pk}}" selected="selected">{{ i.driver.name }}</option>
{% endif %}
</select>
</td>
<td><button type="button" class="btn btn-danger btn-sm mt-1" data-id='{{i.pk}}' data-action='delete' data-target='#vehicle'><span class="fas fa-times"></span></button</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<p class="pt-3">List vehicles and their drivers</p>
<table class="table">
<thead>
<tr>
<th scope="col">Vehicle</th>
<th scope="col">Driver</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="vehiclest" data-pk="-1">
<tr id="vehicles_new" style="display: none;">
<td><input type="text" class="form-control" name="vehicle_new" disabled="true"/></td>
<td><select class="form-control" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" name="driver_new" disabled="true"></select></td>
<td><button type="button" class="btn btn-danger" data-action='delete' data-target='#vehicle'><span class="fas fa-times"></span></button</td>
</tr>
{% for i in object.vehicles.all %}
<tr id="vehicles_{{i.pk}}">
<td><input name="vehicle_{{i.pk}}" type="text" class="form-control" value="{{ i.vehicle }}"/></td>
<td>
<select name="driver_{{i.pk}}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials">
{% if i.driver != '' %}
<option value="{{i.driver.pk}}" selected="selected">{{ i.driver.name }}</option>
{% endif %}
</select>
</td>
<td><button type="button" class="btn btn-danger" data-id='{{i.pk}}' data-action='delete' data-target='#vehicle'><span class="fas fa-times"></span></button</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="text-right">
<button type="button" class="btn btn-secondary" id="vehicle-add" data-action='add' data-target='#vehiclest' data-clone='#vehicles_new'><span class="fas fa-plus"></span> Add Vehicle</button>
</div>
@@ -174,10 +178,14 @@
{% include 'partials/checklist_checkbox.html' with formitem=form.trip_hazard %}
{% include 'partials/checklist_checkbox.html' with formitem=form.warning_signs %}
{% include 'partials/checklist_checkbox.html' with formitem=form.ear_plugs %}
<label class="col-4 pt-3" for="{{ form.hs_location.id_for_label }}">{{ form.hs_location.help_text }}</label>
{% render_field form.hs_location class+="form-control" %}
<label class="col-4 pt-3" for="{{ form.extinguishers_location.id_for_label }}">{{ form.extinguishers_location.help_text }}</label>
{% render_field form.extinguishers_location class+="form-control" %}
<div class="row pt-3">
<label class="col-5" for="{{ form.hs_location.id_for_label }}">{{ form.hs_location.help_text }}</label>
{% render_field form.hs_location class+="form-control col-7 col-md-4" %}
</div>
<div class="row pt-1">
<label class="col-5" for="{{ form.extinguishers_location.id_for_label }}">{{ form.extinguishers_location.help_text }}</label>
{% render_field form.extinguishers_location class+="form-control col-7 col-md-4" %}
</div>
</div>
</div>
</div>
@@ -187,43 +195,47 @@
<div class="card">
<div class="card-header">Crew Record</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Crewmember</th>
<th scope="col">Start Time</th>
<th scope="col">Role</th>
<th scope="col">End Time</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="crewmemberst" data-pk="-1">
<tr id="crew_new" style="display: none;">
<td>
<select name="crewmember_new" class="form-control" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" disabled="true"></select>
</td>
<td><input name="start_new" type="datetime-local" class="form-control" value="{{ i.start }}" disabled="true"/></td>
<td><input name="role_new" type="text" class="form-control" value="{{ i.role }}" disabled="true"/></td>
<td><input name="end_new" type="datetime-local" class="form-control" value="{{ i.end }}" disabled="true" /></td>
<td><button type="button" class="btn btn-danger" data-id='{{crew.pk}}' data-action='delete' data-target='#crewmember'><span class="fas fa-times"></span></button</td>
</tr>
{% for crew in object.crew.all %}
<tr id="crew_{{crew.pk}}">
<td>
<select name="crewmember_{{crew.pk}}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials">
{% if crew.crewmember != '' %}
<option value="{{crew.crewmember.pk}}" selected="selected">{{ crew.crewmember.name }}</option>
{% endif %}
</select>
</td>
<td><input name="start_{{crew.pk}}" type="datetime-local" class="form-control" value="{{ crew.start|date:'Y-m-d' }}T{{ crew.start|date:'H:i:s' }}"/></td>
<td><input name="role_{{crew.pk}}" type="text" class="form-control" value="{{ crew.role }}"/></td>
<td><input name="end_{{crew.pk}}" type="datetime-local" class="form-control" value="{{ crew.end|date:'Y-m-d' }}T{{ crew.end|date:'H:i:s' }}"/></td>
<td><button type="button" class="btn btn-danger" data-id='{{crew.pk}}' data-action='delete' data-target='#crewmember'><span class="fas fa-times"></span></button</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Start Time</th>
<th scope="col">Role</th>
<th scope="col">End Time</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="crewmemberst" data-pk="-1">
<tr id="crew_new" style="display: none;">
<td>
<select name="crewmember_new" class="form-control" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" disabled="true"></select>
</td>
<td style="min-width: 15ch"><input name="start_new" type="datetime-local" class="form-control" value="{{ i.start }}" disabled="true"/></td>
<td style="min-width: 15ch"><input name="role_new" type="text" class="form-control" value="{{ i.role }}" disabled="true"/></td>
<td style="min-width: 15ch"><input name="end_new" type="datetime-local" class="form-control" value="{{ i.end }}" disabled="true" /></td>
<td><button type="button" class="btn btn-danger btn-sm mt-1" data-id='{{crew.pk}}' data-action='delete' data-target='#crewmember'><span class="fas fa-times"></span></button</td>
</tr>
{% for crew in object.crew.all %}
<tr id="crew_{{crew.pk}}">
<td>
<select name="crewmember_{{crew.pk}}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials">
{% if crew.crewmember != '' %}
<option value="{{crew.crewmember.pk}}" selected="selected">{{ crew.crewmember.name }}</option>
{% endif %}
</select>
</td>
<td><input name="start_{{crew.pk}}" type="datetime-local" class="form-control" value="{{ crew.start|date:'Y-m-d' }}T{{ crew.start|date:'H:i:s' }}"/></td>
<td><input name="role_{{crew.pk}}" type="text" class="form-control" value="{{ crew.role }}"/></td>
<td><input name="end_{{crew.pk}}" type="datetime-local" class="form-control" value="{{ crew.end|date:'Y-m-d' }}T{{ crew.end|date:'H:i:s' }}"/></td>
<td><button type="button" class="btn btn-danger btn-sm mt-1" data-id='{{crew.pk}}' data-action='delete' data-target='#crewmember'><span class="fas fa-times"></span></button</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<div class="text-right">
<button type="button" class="btn btn-secondary" data-action='add' data-target='#crewmemberst' data-clone='#crew_new'><span class="fas fa-plus"></span> Add Crewmember</button>
</div>
@@ -237,9 +249,9 @@
<div class="card-header">Event Size</div>
<div class="card-body" id="size-selector">
{% render_field form.event_size style="display: none;" %}
<button type="button" class="btn btn-success" data-event-size="0" style="width: 10rem;">Small</button>
<button type="button" class="btn btn-warning" data-event-size="1" style="width: 10rem;">Medium</button>
<button type="button" class="btn btn-danger" data-event-size="2" style="width: 10rem;">Large</button>
<button type="button" class="btn btn-success" data-event-size="0" style="width: 32%">Small</button>
<button type="button" class="btn btn-warning" data-event-size="1" style="width: 32%">Medium</button>
<button type="button" class="btn btn-danger" data-event-size="2" style="width: 32%">Large</button>
</div>
</div>
</div>
@@ -354,7 +366,7 @@
<div class="row my-3 form-hide" id="size-2">
<div class="col-12">
<div class="card">
<div class="card-header">Electrical Checks <small>for Large TEC Events</div>
<div class="card-header">Electrical Checks <small>for Large TEC Events</small></div>
<div class="card-body">
<p>Outside the scope of this assessment. Carry on.</p>
</div>

View File

@@ -271,10 +271,6 @@ class CreateEventChecklist(FormPage):
def add_crew(self):
self.find_element(*self._add_crew_locator).click()
@property
def bottom(self):
return self.find_element(*self._submit_locator)
@property
def power_mic(self):
return regions.BootstrapSelectElement(self, self.find_element(*self._power_mic_selector))

View File

@@ -1,5 +1,5 @@
{% if submit %}
<button type="submit" class="btn {{ class }}" title="{{ text }}"><span class="fas {{ icon }}"></span> <span class="hidden-xs">{{ text }}</span></button>
<button type="submit" class="btn {{ class }}" title="{{ text }}"><span class="fas {{ icon }}"></span> <span class="d-none d-sm-block">{{ text }}</span></button>
{% else %}
<a href="{% url target id %}" class="btn {{ class }}" target="_blank"><span class="fas {{ icon }}"></span> <span class="hidden-xs">{{ text }}</span></a>
<a href="{% url target id %}" class="btn {{ class }}"><span class="fas {{ icon }}"></span> <span class="d-none d-sm-block">{{ text }}</span></a>
{% endif %}