mirror of
https://github.com/tim-krehan/shopping-list.git
synced 2024-11-23 22:30:41 +01:00
add custom checkboxes to list to fit with themes #2
This commit is contained in:
parent
8c07907cc2
commit
0b77acc68d
4 changed files with 36 additions and 30 deletions
|
@ -1,6 +1,9 @@
|
|||
<?php
|
||||
<?php
|
||||
$CONFIG = array (
|
||||
'installed' => false,
|
||||
'installed' => true,
|
||||
'host' => 'localhost',
|
||||
'database' => 'list',
|
||||
'username' => 'list',
|
||||
'passwd' => 'Erfolg100%',
|
||||
);
|
||||
|
||||
?>
|
||||
?>
|
|
@ -33,7 +33,12 @@
|
|||
}
|
||||
|
||||
print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>");
|
||||
print_r("<div class='$div_item_checkbox_classes'><input type='checkbox' class='$input_item_checkbox_classes' data-color='$color_theme' data-id='$item->ID' $checked></div>");
|
||||
print_r("<div class='$div_item_checkbox_classes'>");
|
||||
print_r("<div class='custom-control custom-checkbox'>");
|
||||
print_r("<input type='checkbox' class='$input_item_checkbox_classes custom-control-input' data-color='$color_theme' id='$item->ID-checkbox' data-id='$item->ID' $checked>");
|
||||
print_r("<label class='custom-control-label' for='$item->ID-checkbox'></label>");
|
||||
print_r("</div>");
|
||||
print_r("</div>");
|
||||
print_r("<div class='list-row-amount $div_item_quantity_classes' data-amount='$item->Anzahl' data-unit='$item->Einheit'>$item->Anzahl $item->Einheit</div>");
|
||||
print_r("<div class='list-row-name $div_item_name_classes'>$item->Name</div>");
|
||||
print_r("<div class='$div_item_menu dropdown'>");
|
||||
|
@ -70,6 +75,5 @@
|
|||
<button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
32
js/list.js
32
js/list.js
|
@ -16,7 +16,7 @@ function highlightNewEntry(){
|
|||
if(match!=null){
|
||||
var newID = match[1];
|
||||
var checkBox = $(`[data-id='${newID}']`);
|
||||
var newRow = checkBox.parent().parent();
|
||||
var newRow = checkBox.parent().parent().parent();
|
||||
newRow.removeClass($(checkBox).data("color"));
|
||||
newRow.addClass("alert-primary");
|
||||
setTimeout(function () {
|
||||
|
@ -111,28 +111,28 @@ function checkItem() {
|
|||
},
|
||||
success: function () {
|
||||
var color = $(dataIdSelector).data("color");
|
||||
$(dataIdSelector).parent().parent().removeClass("bg-danger");
|
||||
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
|
||||
$(dataIdSelector).parent().parent().parent().removeClass("bg-danger");
|
||||
$(dataIdSelector).parent().parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
|
||||
|
||||
if($(dataIdSelector).prop("checked")){
|
||||
$(dataIdSelector).parent().parent().removeClass(color);
|
||||
$(dataIdSelector).parent().parent().addClass("bg-success");
|
||||
$(dataIdSelector).parent().parent().parent().removeClass(color);
|
||||
$(dataIdSelector).parent().parent().parent().addClass("bg-success");
|
||||
}
|
||||
else{
|
||||
$(dataIdSelector).parent().parent().removeClass("bg-success");
|
||||
$(dataIdSelector).parent().parent().addClass(color);
|
||||
$(dataIdSelector).parent().parent().parent().removeClass("bg-success");
|
||||
$(dataIdSelector).parent().parent().parent().addClass(color);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$(dataIdSelector).parent().parent().addClass("bg-danger");
|
||||
$(dataIdSelector).parent().parent().data("toggle", "popover");
|
||||
$(dataIdSelector).parent().parent().data("container", "body");
|
||||
$(dataIdSelector).parent().parent().data("placement", "top");
|
||||
$(dataIdSelector).parent().parent().data("html", true);
|
||||
$(dataIdSelector).parent().parent().data("trigger", "focus");
|
||||
$(dataIdSelector).parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
|
||||
$(dataIdSelector).parent().parent().attr("title", "Fehler!");
|
||||
$(dataIdSelector).parent().parent().popover('show');
|
||||
$(dataIdSelector).parent().parent().parent().addClass("bg-danger");
|
||||
$(dataIdSelector).parent().parent().parent().data("toggle", "popover");
|
||||
$(dataIdSelector).parent().parent().parent().data("container", "body");
|
||||
$(dataIdSelector).parent().parent().parent().data("placement", "top");
|
||||
$(dataIdSelector).parent().parent().parent().data("html", true);
|
||||
$(dataIdSelector).parent().parent().parent().data("trigger", "focus");
|
||||
$(dataIdSelector).parent().parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
|
||||
$(dataIdSelector).parent().parent().parent().attr("title", "Fehler!");
|
||||
$(dataIdSelector).parent().parent().parent().popover('show');
|
||||
}
|
||||
});
|
||||
}
|
|
@ -7095,27 +7095,26 @@ select.form-control {
|
|||
|
||||
[type="checkbox"] {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer; }
|
||||
[type="checkbox"]:before {
|
||||
content: "";
|
||||
/* position: absolute; */
|
||||
/* left: -1.2em; */
|
||||
/* top: -0.9em; */
|
||||
position: absolute;
|
||||
left: -1.2em;
|
||||
top: -0.9em;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px; }
|
||||
[type="checkbox"]:checked:after {
|
||||
content: "x";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
/* top: -0.48em; */
|
||||
left: -0.64em;
|
||||
top: -0.48em;
|
||||
font-size: 1.5rem;
|
||||
line-height: 0.5;
|
||||
color: #fff; }
|
||||
color: #333; }
|
||||
[type="checkbox"]:disabled:before {
|
||||
border: 2px solid #aaa; }
|
||||
|
||||
|
|
Loading…
Reference in a new issue