added filter dropdown values
This commit is contained in:
parent
701733eb90
commit
60d2743ade
5 changed files with 66 additions and 208 deletions
195
2
195
2
|
|
@ -1,195 +0,0 @@
|
|||
$sizes: (
|
||||
"auto": auto,
|
||||
"0": 0px,
|
||||
"1": 2px,
|
||||
"2": 5px,
|
||||
"3": 8px,
|
||||
"4": 10px,
|
||||
"5": 15px
|
||||
);
|
||||
$directions: (
|
||||
"s": "left",
|
||||
"e": "right",
|
||||
"t": "top",
|
||||
"b": "bottom"
|
||||
);
|
||||
|
||||
|
||||
|
||||
@each $size, $val in $sizes {
|
||||
.m-#{$size} {
|
||||
margin: $val;
|
||||
}
|
||||
.p-#{$size} {
|
||||
padding: $val;
|
||||
}
|
||||
@each $dir, $dir-val in $directions {
|
||||
.m#{$dir}-#{$size} {
|
||||
margin-#{$dir-val}: $val;
|
||||
}
|
||||
.p#{$dir}-#{$size} {
|
||||
padding-#{$dir-val}: $val;
|
||||
}
|
||||
|
||||
}
|
||||
.mx-#{$size} {
|
||||
margin-left: $val;
|
||||
margin-right: $val;
|
||||
}
|
||||
.my-#{$size} {
|
||||
margin-top: $val;
|
||||
margin-bottom: $val;
|
||||
}
|
||||
.px-#{$size} {
|
||||
padding-left: $val;
|
||||
padding-right: $val;
|
||||
}
|
||||
.py-#{$size} {
|
||||
padding-top: $val;
|
||||
padding-bottom: $val;
|
||||
}
|
||||
}
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
.my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
$w_h_sizes: (
|
||||
'25': 25%,
|
||||
'50': 50%,
|
||||
'75': 75%,
|
||||
'80': 80%,
|
||||
'100': 100%,
|
||||
'auto': auto,
|
||||
);
|
||||
|
||||
// Loop through the sizes and generate classes
|
||||
@each $name, $value in $w_h_sizes {
|
||||
.h-#{$name} {
|
||||
height: $value;
|
||||
}
|
||||
|
||||
.w-#{$name} {
|
||||
width: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.d-flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
.cr-all {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.cr-top {
|
||||
border-radius: $border-radius $border-radius 0px 0px;
|
||||
}
|
||||
.cr-right {
|
||||
border-radius: 0px $border-radius $border-radius 0px;
|
||||
}
|
||||
.cr-left {
|
||||
border-radius: $border-radius 0px 0px $border-radius;
|
||||
}
|
||||
.cr-bottom {
|
||||
border-radius: 0px 0px $border-radius $border-radius;
|
||||
}
|
||||
|
||||
.t-s {
|
||||
text-align: start;
|
||||
}
|
||||
.t-e {
|
||||
text-align: end;
|
||||
}
|
||||
.t-m {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.borderless-btn {
|
||||
display: flex;
|
||||
color: var(--#{$prefix}-text);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
padding: 10px 15px 10px 15px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--#{$prefix}-surface2);
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
.borderless-btn:hover {
|
||||
background-color: var(--#{$prefix}-overlay1);
|
||||
color: var(--#{$prefix}-nav-active-color);
|
||||
}
|
||||
|
||||
table.table {
|
||||
color: var(--#{$prefix}-text);
|
||||
td {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
table.table-striped {
|
||||
border-collapse: collapse;
|
||||
overflow: hidden;
|
||||
thead {
|
||||
background-color: var(--#{$prefix}-surface0);
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
&.row_awaiting_processing {
|
||||
background-color: var(--#{$prefix}-bg) !important;
|
||||
max-width: 0px;
|
||||
div {
|
||||
opacity: 0;
|
||||
max-height: 0px;
|
||||
}
|
||||
}
|
||||
div {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
max-height: 50px;
|
||||
transition: max-height 0.6s cubic-bezier(0.02, 0.15, 0.84, 0.98),
|
||||
opacity 0.5s ease-in;
|
||||
}
|
||||
max-width: 100%;
|
||||
transition: all 0.5s ease-in;
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--#{$prefix}-crust);
|
||||
}
|
||||
&:nth-child(even) {
|
||||
background-color: var(--#{$prefix}-mantle);
|
||||
}
|
||||
}
|
||||
}
|
||||
.positive {
|
||||
color: var(--#{$prefix}-green);
|
||||
}
|
||||
.negative {
|
||||
color: var(--#{$prefix}-red);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-menu {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 1em;
|
||||
background-color: var(--#{$prefix}-overlay2);
|
||||
color: var(--#{$prefix}-bg);
|
||||
border-radius: 0px 0px $border-radius $border-radius;
|
||||
transition: all 0.2s linear;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -117,6 +117,17 @@ $w_h_sizes: (
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-c-invert {
|
||||
color: var(--#{$prefix}-bg) !important;
|
||||
}
|
||||
.btn-c-invert:hover {
|
||||
color: var(--#{$prefix}-text) !important;
|
||||
}
|
||||
|
||||
.borderless-btn.btn-sm {
|
||||
padding: 4px 8px 4px 8px;
|
||||
}
|
||||
|
||||
.borderless-btn {
|
||||
display: flex;
|
||||
color: var(--#{$prefix}-text);
|
||||
|
|
@ -187,7 +198,7 @@ table.table-striped {
|
|||
top: 0;
|
||||
left: 0;
|
||||
font-size: 1em;
|
||||
background-color: var(--#{$prefix}-overlay2);
|
||||
background-color: var(--#{$prefix}-overlay0);
|
||||
color: var(--#{$prefix}-bg);
|
||||
border-radius: 0px 0px $border-radius $border-radius;
|
||||
border-style: solid;
|
||||
|
|
@ -200,6 +211,8 @@ table.table-striped {
|
|||
font-size: 1em;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
background-color: var(--#{$prefix}-mantle);
|
||||
color: var(--#{$prefix}-text);
|
||||
}
|
||||
.popup-menu input {
|
||||
width: 5em;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,11 @@
|
|||
--#{$prefix}-text: #{map-get($color, 'text')};
|
||||
--#{$prefix}-green: #{map-get($color, 'green')};
|
||||
--#{$prefix}-red: #{map-get($color, 'red')};
|
||||
--#{$prefix}-sky: #{map-get($color, 'sky')};
|
||||
--#{$prefix}-sapphire: #{map-get($color, 'sapphire')};
|
||||
--#{$prefix}-teal: #{map-get($color, 'teal')};
|
||||
--#{$prefix}-maroon: #{map-get($color, 'maroon')};
|
||||
--#{$prefix}-mauve: #{map-get($color, 'mauve')};
|
||||
|
||||
--#{$prefix}-nav-bg: #{map-get($color, 'crust')};
|
||||
--#{$prefix}-nav-color: #{map-get($color, 'text')};
|
||||
|
|
@ -39,3 +44,15 @@
|
|||
.c-mantle {
|
||||
background-color: var(--#{$prefix}-mantle);
|
||||
}
|
||||
.c-mauve {
|
||||
background-color: var(--#{$prefix}-mauve);
|
||||
}
|
||||
.c-teal {
|
||||
background-color: var(--#{$prefix}-teal) !important;
|
||||
}
|
||||
.c-green {
|
||||
background-color: var(--#{$prefix}-green) !important;
|
||||
}
|
||||
.c-maroon {
|
||||
background-color: var(--#{$prefix}-maroon) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,10 +53,23 @@ function setup_dropdown(button) {
|
|||
};
|
||||
}
|
||||
|
||||
function select_value_change(el) {
|
||||
return function () {
|
||||
var enable_div = el.options[el.selectedIndex].dataset.selectDiv;
|
||||
el.parentNode.querySelectorAll("div").forEach(function (div_el) {
|
||||
div_el.style.display = "none";
|
||||
});
|
||||
el.parentNode.querySelector("#" + enable_div).style.removeProperty("display");
|
||||
}
|
||||
}
|
||||
|
||||
function register_dropdowns() {
|
||||
document.querySelectorAll(".dropdown-button").forEach(function (el) {
|
||||
el.addEventListener("click", setup_dropdown(el));
|
||||
});
|
||||
document.querySelectorAll(".select-swapout").forEach(function (el) {
|
||||
el.addEventListener("change", select_value_change(el));
|
||||
});
|
||||
}
|
||||
|
||||
export {register_dropdowns}
|
||||
|
|
|
|||
|
|
@ -16,32 +16,42 @@ templ transactions_page(userID int, accounts *[]string) {
|
|||
</button>
|
||||
<div class="popup-menu" id="filter-popup" role="tooltip" style="display:none;">
|
||||
<div class="d-flex p-3">
|
||||
<select>
|
||||
<option>Account</option>
|
||||
<option>Amount</option>
|
||||
<option>Date</option>
|
||||
<option>Desc. Contains</option>
|
||||
<option>ID</option>
|
||||
<select class="select-swapout">
|
||||
<option data-select-div="filter-accounts">Account</option>
|
||||
<option data-select-div="filter-two-inputs">Amount</option>
|
||||
<option data-select-div="filter-two-inputs">Date</option>
|
||||
<option data-select-div="filter-contains">Desc. Contains</option>
|
||||
<option data-select-div="filter-two-inputs">ID</option>
|
||||
</select>
|
||||
<div id="filter-two-inputs" style="display: none;">
|
||||
<div id="filter-two-inputs" class="d-flex" style="display: none;">
|
||||
<input type="text"></input>
|
||||
<select>
|
||||
<select class="ms-2">
|
||||
<option>></option>
|
||||
<option>=</option>
|
||||
<option>{"<"}</option>
|
||||
</select>
|
||||
<input type="text"></input>
|
||||
<input class="ms-2" type="text"></input>
|
||||
</div>
|
||||
<div id="filter-accounts">
|
||||
<select class="ms-3">
|
||||
<div id="filter-contains" class="d-flex" style="display: none;">
|
||||
<select class="ms-2">
|
||||
<option>Contains</option>
|
||||
</select>
|
||||
<input class="ms-2" type="text"></input>
|
||||
</div>
|
||||
<div id="filter-accounts" class="d-flex">
|
||||
<select class="ms-2">
|
||||
<option>=</option>
|
||||
</select>
|
||||
<select>
|
||||
<select class="ms-2">
|
||||
for _, value := range *accounts {
|
||||
<option>{value}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
class="cr-all ms-3 borderless-btn btn-sm btn-c-invert c-green"
|
||||
>Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue