mirror of
https://github.com/healthchecks/healthchecks.git
synced 2025-04-03 04:15:29 +00:00
Switch from bootstrap-select to selectize in pushover and ntfy forms
This commit is contained in:
Pēteris Caune
parent
1e6f4cfd9f
commit
4314e21b61
5 changed files with 78 additions and 109 deletions
|
|
@ -319,11 +319,16 @@ input[type=number]::-webkit-inner-spin-button {
|
|||
color: var(--btn-remove-color);
|
||||
}
|
||||
|
||||
/* Greyed out help text in bootstrap-select dropdowns (e.g. in "Add ntfy" form) */
|
||||
.dropdown .help {
|
||||
/* Greyed out help text in selectize dropdowns (e.g. in "Add ntfy" form) */
|
||||
.selectize-control .help {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Hide caret in single-select mode to mimic the standard <select> element */
|
||||
.selectize-control.single {
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
box-shadow: 0 5px 0 -3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
|
@ -346,4 +351,4 @@ select.form-control {
|
|||
.bootstrap-select .dropdown-toggle:focus {
|
||||
outline: 0 !important;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 4px rgba(102, 175, 233, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
8
static/js/add_pushover.js
Normal file
8
static/js/add_pushover.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
$(function() {
|
||||
function makeOption(item, escape) {
|
||||
var parts = item.text.split(":");
|
||||
return `<div class="option">${parts[0]}. <span class="help">${parts[1]}</span></div>`;
|
||||
}
|
||||
|
||||
$("select").selectize({render: {option: makeOption, item: makeOption}});
|
||||
});
|
||||
8
static/js/ntfy_form.js
Normal file
8
static/js/ntfy_form.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
$(function() {
|
||||
function makeOption(item, escape) {
|
||||
var parts = item.text.split(":");
|
||||
return `<div class="option">${parts[0]}. <span class="help">${parts[1]}</span></div>`;
|
||||
}
|
||||
|
||||
$("select").selectize({render: {option: makeOption, item: makeOption}});
|
||||
});
|
||||
|
|
@ -24,34 +24,24 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">Priority for "down" events</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="po_priority" class="selectpicker form-control">
|
||||
<option
|
||||
value="-3"
|
||||
data-content="Disabled. <span class='help'>Does not notify about Down events.</span>">
|
||||
Disabled
|
||||
<select name="po_priority" class="form-control">
|
||||
<option value="-3">
|
||||
Disabled: Does not notify about Down events.
|
||||
</option>
|
||||
<option
|
||||
value="-2"
|
||||
data-content="Lowest priority. <span class='help'>Generates no notification on your device.</span>">
|
||||
Lowest Priority
|
||||
<option value="-2">
|
||||
Lowest Priority: Generates no notification on your device.
|
||||
</option>
|
||||
<option
|
||||
value="-1"
|
||||
data-content="Low priority. <span class='help'>Sends a quiet notification.</span>">
|
||||
Low Priority
|
||||
<option value="-1">
|
||||
Low Priority: Sends a quiet notification.
|
||||
</option>
|
||||
<option value="0" selected="selected">
|
||||
Normal Priority
|
||||
Normal Priority:
|
||||
</option>
|
||||
<option
|
||||
value="1"
|
||||
data-content="High priority. <span class='help'>Bypasses user's quiet hours.</span>">
|
||||
High Priority
|
||||
<option value="1">
|
||||
High Priority: Bypasses user's quiet hours.
|
||||
</option>
|
||||
<option
|
||||
value="2"
|
||||
data-content="Emergency priority. <span class='help'>Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.</span>">
|
||||
Emergency Priority
|
||||
<option value="2">
|
||||
Emergency Priority: Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -60,34 +50,24 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">Priority for "up" events</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="po_priority_up" class="selectpicker form-control">
|
||||
<option
|
||||
value="-3"
|
||||
data-content="Disabled. <span class='help'>Does not notify about Up events.</span>">
|
||||
Disabled
|
||||
<select name="po_priority_up" class="form-control">
|
||||
<option value="-3">
|
||||
Disabled: Does not notify about Up events.
|
||||
</option>
|
||||
<option
|
||||
value="-2"
|
||||
data-content="Lowest priority. <span class='help'>Generates no notification on your device.</span>">
|
||||
Lowest priority
|
||||
<option value="-2">
|
||||
Lowest priority: Generates no notification on your device.
|
||||
</option>
|
||||
<option
|
||||
value="-1"
|
||||
data-content="Low priority. <span class='help'>Sends a quiet notification.</span>">
|
||||
Low priority
|
||||
<option value="-1">
|
||||
Low priority: Sends a quiet notification.
|
||||
</option>
|
||||
<option value="0" selected="selected">
|
||||
Normal priority
|
||||
Normal priority:
|
||||
</option>
|
||||
<option
|
||||
value="1"
|
||||
data-content="High priority. <span class='help'>Bypasses user's quiet hours.</span>">
|
||||
High priority
|
||||
<option value="1">
|
||||
High priority: Bypasses user's quiet hours.
|
||||
</option>
|
||||
<option
|
||||
value="2"
|
||||
data-content="Emergency priority. <span class='help'>Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.</span>">
|
||||
Emergency priority
|
||||
<option value="2">
|
||||
Emergency priority: Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -108,6 +88,7 @@
|
|||
|
||||
{% block scripts %}
|
||||
{% compress js %}
|
||||
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
|
||||
<script src="{% static 'js/selectize.min.js' %}"></script>
|
||||
<script src="{% static 'js/add_pushover.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -57,41 +57,24 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">Priority for "down" events</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="priority" class="selectpicker form-control">
|
||||
<option
|
||||
value="5"
|
||||
{% if form.priority.value == 5 %}selected="selected"{% endif %}
|
||||
data-content="Max priority. <span class='help'>Really long vibration bursts, default notification sound with a pop-over notification.</span>">
|
||||
Max priority
|
||||
<select id="priority" name="priority" class="form-control">
|
||||
<option value="5" {% if form.priority.value == 5 %}selected="selected"{% endif %}>
|
||||
Max priority: Really long vibration bursts, default notification sound with a pop-over notification.
|
||||
</option>
|
||||
<option
|
||||
value="4"
|
||||
{% if form.priority.value == 4 %}selected="selected"{% endif %}
|
||||
data-content="High priority. <span class='help'>Long vibration burst, default notification sound with a pop-over notification.</span>">
|
||||
High priority
|
||||
<option value="4" {% if form.priority.value == 4 %}selected="selected"{% endif %}>
|
||||
High priority: Long vibration burst, default notification sound with a pop-over notification.
|
||||
</option>
|
||||
<option value="3"
|
||||
{% if form.priority.value == 3 %}selected="selected"{% endif %}
|
||||
data-content="Default priority. <span class='help'>Short default vibration and sound. Default notification behavior.</span>">
|
||||
Default priority
|
||||
<option value="3" {% if form.priority.value == 3 %}selected="selected"{% endif %}>
|
||||
Default priority: Short default vibration and sound. Default notification behavior.
|
||||
</option>
|
||||
<option
|
||||
value="2"
|
||||
{% if form.priority.value == 2 %}selected="selected"{% endif %}
|
||||
data-content="Low priority. <span class='help'>No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.</span>">
|
||||
Low priority
|
||||
<option value="2" {% if form.priority.value == 2 %}selected="selected"{% endif %}>
|
||||
Low priority: No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.
|
||||
</option>
|
||||
<option
|
||||
value="1"
|
||||
{% if form.priority.value == 1 %}selected="selected"{% endif %}
|
||||
data-content="Min priority. <span class='help'>No vibration or sound. The notification will be under the fold in 'Other notifications'.</span>">
|
||||
Min priority
|
||||
<option value="1" {% if form.priority.value == 1 %}selected="selected"{% endif %}>
|
||||
Min priority: No vibration or sound. The notification will be under the fold in 'Other notifications'.
|
||||
</option>
|
||||
<option
|
||||
value="0"
|
||||
{% if form.priority.value == 0 %}selected="selected"{% endif %}
|
||||
data-content="Disabled. <span class='help'>Will not notify about Down events.</span>">
|
||||
Disabled
|
||||
<option value="0" {% if form.priority.value == 0 %}selected="selected"{% endif %}>
|
||||
Disabled: Will not notify about Down events.
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -100,41 +83,24 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">Priority for "up" events</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="priority_up" class="selectpicker form-control">
|
||||
<option
|
||||
value="5"
|
||||
{% if form.priority_up.value == 5 %}selected="selected"{% endif %}
|
||||
data-content="Max priority. <span class='help'>Really long vibration bursts, default notification sound with a pop-over notification.</span>">
|
||||
Max priority
|
||||
<select name="priority_up" class="form-control">
|
||||
<option value="5" {% if form.priority_up.value == 5 %}selected="selected"{% endif %}>
|
||||
Max priority: Really long vibration bursts, default notification sound with a pop-over notification.
|
||||
</option>
|
||||
<option
|
||||
value="4"
|
||||
{% if form.priority_up.value == 4 %}selected="selected"{% endif %}
|
||||
data-content="High priority. <span class='help'>Long vibration burst, default notification sound with a pop-over notification.</span>">
|
||||
High priority
|
||||
<option value="4" {% if form.priority_up.value == 4 %}selected="selected"{% endif %}>
|
||||
High priority: Long vibration burst, default notification sound with a pop-over notification.
|
||||
</option>
|
||||
<option value="3"
|
||||
{% if form.priority_up.value == 3 %}selected="selected"{% endif %}
|
||||
data-content="Default priority. <span class='help'>Short default vibration and sound. Default notification behavior.</span>">
|
||||
Default priority
|
||||
<option value="3" {% if form.priority_up.value == 3 %}selected="selected"{% endif %}>
|
||||
Default priority: Short default vibration and sound. Default notification behavior.
|
||||
</option>
|
||||
<option
|
||||
value="2"
|
||||
{% if form.priority_up.value == 2 %}selected="selected"{% endif %}
|
||||
data-content="Low priority. <span class='help'>No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.</span>">
|
||||
Low priority
|
||||
<option value="2" {% if form.priority_up.value == 2 %}selected="selected"{% endif %}>
|
||||
Low priority: No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.
|
||||
</option>
|
||||
<option
|
||||
value="1"
|
||||
{% if form.priority_up.value == 1 %}selected="selected"{% endif %}
|
||||
data-content="Min priority. <span class='help'>No vibration or sound. The notification will be under the fold in 'Other notifications'.</span>">
|
||||
Min priority
|
||||
<option value="1" {% if form.priority_up.value == 1 %}selected="selected"{% endif %}>
|
||||
Min priority: No vibration or sound. The notification will be under the fold in 'Other notifications'.
|
||||
</option>
|
||||
<option
|
||||
value="0"
|
||||
{% if form.priority_up.value == 0 %}selected="selected"{% endif %}
|
||||
data-content="Disabled. <span class='help'>Will not notify about Up events.</span>">
|
||||
Disabled
|
||||
<option value="0" {% if form.priority_up.value == 0 %}selected="selected"{% endif %}>
|
||||
Disabled: Will not notify about Up events.
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -152,6 +118,7 @@
|
|||
|
||||
{% block scripts %}
|
||||
{% compress js %}
|
||||
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
|
||||
<script src="{% static 'js/selectize.min.js' %}"></script>
|
||||
<script src="{% static 'js/ntfy_form.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue