kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Don't allow sorting when the edit-list is filtered to prevent messing up the sort order

Browse source
This commit is contained in:
Kevin MacMartin 2018-01-13 01:16:19 -05:00
parent f74c71446a
commit fb7f87d6b0
2 changed files with 84 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/assets/js/dashboard.js vendored
View file

@ -234,9 +234,19 @@ function editListInit() {
// empty the filter // empty the filter
$filter.val(""); $filter.val("");
// initialize the filter list functionality
const filterList = new List("edit-list-wrapper", { const filterList = new List("edit-list-wrapper", {
valueNames: [ "title-column" ] valueNames: [ "title-column" ]
}); });
// add/remove a filtered class to identify when the list is filtered
$filter.on("input", function() {
if ($filter.val() === "") {
$editList.removeClass("filtered");
} else {
$editList.addClass("filtered");
}
});
} }
}; };

139
resources/assets/sass/dashboard.scss vendored
View file

@ -245,86 +245,95 @@ body {
} }
} }
&.edit-list .list-group-item { &.edit-list {
padding-top: 4px; .list-group-item {
padding-bottom: 4px; padding-top: 4px;
padding-bottom: 4px;
@media (max-width: $screen-xs-max) {
margin: 3px;
padding-left: 60px;
}
.title-column {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 0px;
font-family: "Lucida Console", Monaco, monospace;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
text-align: center; margin: 3px;
padding-left: 60px;
} }
@media (min-width: $screen-sm-min) { .title-column {
float: left; padding-top: 6px;
} padding-bottom: 6px;
padding-left: 0px;
.sort-icon { font-family: "Lucida Console", Monaco, monospace;
margin-right: 10px;
display: inline-block;
cursor: grab;
cursor: -webkit-grabbing;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
position: absolute; text-align: center;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
}
.column {
@media (max-width: $screen-xs-max) {
margin-right: 3px;
display: inline-block;
&.spacer {
display: block;
font-size: 0;
}
} }
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
float: left; float: left;
}
.sort-icon {
margin-right: 10px; margin-right: 10px;
display: inline-block;
opacity: 1;
transition: opacity 100ms;
cursor: grab;
cursor: -webkit-grabbing;
@media (max-width: $screen-xs-max) {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
}
.column {
@media (max-width: $screen-xs-max) {
margin-right: 3px;
display: inline-block;
&.spacer {
display: block;
font-size: 0;
}
}
@media (min-width: $screen-sm-min) {
float: left;
margin-right: 10px;
}
}
}
.button-column {
padding-right: 0px;
padding-left: 0px;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
text-align: center;
}
@media (min-width: $screen-sm-min) {
float: right;
text-align: right;
}
.btn {
margin: 3px;
min-width: 70px;
height: 26px;
padding-top: 1px;
padding-bottom: 2px;
@media (max-width: $screen-xs-max) {
min-width: 33%;
}
} }
} }
} }
.button-column { &.filtered .list-group-item .title-column .sort-icon {
padding-right: 0px; opacity: 0.5;
padding-left: 0px; pointer-events: none;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
text-align: center;
}
@media (min-width: $screen-sm-min) {
float: right;
text-align: right;
}
.btn {
margin: 3px;
min-width: 70px;
height: 26px;
padding-top: 1px;
padding-bottom: 2px;
@media (max-width: $screen-xs-max) {
min-width: 33%;
}
}
} }
} }
} }