adoralaura/shopping-list
1
0
Fork 0
mirror of https://github.com/tim-krehan/shopping-list.git synced 2024-11-23 14:20:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

add custom checkboxes to list to fit with themes

Browse source
This commit is contained in:
= 2019-07-03 11:43:02 +02:00 committed by Tim Krehan
parent 7c143ac270
commit b4f7f2ff36
4 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
config/config.php
View file

@ -1,6 +1,9 @@
<?php <?php
$CONFIG = array ( $CONFIG = array (
'installed' => false, 'installed' => true,
'host' => 'localhost',
'database' => 'list',
'username' => 'list',
'passwd' => 'Erfolg100%',
); );
?>
?>

8
cont/list.php
View file

@ -33,7 +33,12 @@
} }
print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>"); 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-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='list-row-name $div_item_name_classes'>$item->Name</div>");
print_r("<div class='$div_item_menu dropdown'>"); 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> <button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i class="fas fa-plus"></i></button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>

32
js/list.js
View file

@ -16,7 +16,7 @@ function highlightNewEntry(){
if(match!=null){ if(match!=null){
var newID = match[1]; var newID = match[1];
var checkBox = $(`[data-id='${newID}']`); var checkBox = $(`[data-id='${newID}']`);
var newRow = checkBox.parent().parent(); var newRow = checkBox.parent().parent().parent();
newRow.removeClass($(checkBox).data("color")); newRow.removeClass($(checkBox).data("color"));
newRow.addClass("alert-primary"); newRow.addClass("alert-primary");
setTimeout(function () { setTimeout(function () {
@ -111,28 +111,28 @@ function checkItem() {
}, },
success: function () { success: function () {
var color = $(dataIdSelector).data("color"); var color = $(dataIdSelector).data("color");
$(dataIdSelector).parent().parent().removeClass("bg-danger"); $(dataIdSelector).parent().parent().parent().removeClass("bg-danger");
$(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-danger"); $(dataIdSelector).parent().parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
if($(dataIdSelector).prop("checked")){ if($(dataIdSelector).prop("checked")){
$(dataIdSelector).parent().parent().removeClass(color); $(dataIdSelector).parent().parent().parent().removeClass(color);
$(dataIdSelector).parent().parent().addClass("bg-success"); $(dataIdSelector).parent().parent().parent().addClass("bg-success");
} }
else{ else{
$(dataIdSelector).parent().parent().removeClass("bg-success"); $(dataIdSelector).parent().parent().parent().removeClass("bg-success");
$(dataIdSelector).parent().parent().addClass(color); $(dataIdSelector).parent().parent().parent().addClass(color);
} }
}, },
error: function () { error: function () {
$(dataIdSelector).parent().parent().addClass("bg-danger"); $(dataIdSelector).parent().parent().parent().addClass("bg-danger");
$(dataIdSelector).parent().parent().data("toggle", "popover"); $(dataIdSelector).parent().parent().parent().data("toggle", "popover");
$(dataIdSelector).parent().parent().data("container", "body"); $(dataIdSelector).parent().parent().parent().data("container", "body");
$(dataIdSelector).parent().parent().data("placement", "top"); $(dataIdSelector).parent().parent().parent().data("placement", "top");
$(dataIdSelector).parent().parent().data("html", true); $(dataIdSelector).parent().parent().parent().data("html", true);
$(dataIdSelector).parent().parent().data("trigger", "focus"); $(dataIdSelector).parent().parent().parent().data("trigger", "focus");
$(dataIdSelector).parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren"); $(dataIdSelector).parent().parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
$(dataIdSelector).parent().parent().attr("title", "Fehler!"); $(dataIdSelector).parent().parent().parent().attr("title", "Fehler!");
$(dataIdSelector).parent().parent().popover('show'); $(dataIdSelector).parent().parent().parent().popover('show');
} }
}); });
} }

15
style/themes/sketchy.css
View file

@ -7095,27 +7095,26 @@ select.form-control {
[type="checkbox"] { [type="checkbox"] {
position: relative; position: relative;
-webkit-appearance: none;
appearance: none; appearance: none;
cursor: pointer; } cursor: pointer; }
[type="checkbox"]:before { [type="checkbox"]:before {
content: ""; content: "";
/* position: absolute; */ position: absolute;
/* left: -1.2em; */ left: -1.2em;
/* top: -0.9em; */ top: -0.9em;
display: inline-block; display: inline-block;
width: 15px; width: 15px;
height: 16px; height: 16px;
border: 2px solid #fff; border: 2px solid #333;
border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px; } border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px; }
[type="checkbox"]:checked:after { [type="checkbox"]:checked:after {
content: "x"; content: "x";
position: absolute; position: absolute;
left: 3px; left: -0.64em;
/* top: -0.48em; */ top: -0.48em;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 0.5; line-height: 0.5;
color: #fff; } color: #333; }
[type="checkbox"]:disabled:before { [type="checkbox"]:disabled:before {
border: 2px solid #aaa; } border: 2px solid #aaa; }