Improve loan dashboard interactions
This commit is contained in:
Rafael Foster
+163
-5
@@ -86,7 +86,7 @@
|
||||
.budget-tab {
|
||||
min-height: 34px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-xs);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
@@ -95,11 +95,34 @@
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.budget-tab[data-tab="budget"] {
|
||||
color: var(--module-budget);
|
||||
}
|
||||
|
||||
.budget-tab[data-tab="loans"] {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.budget-tab[data-tab="budget"]:not(.budget-tab--active) {
|
||||
background: color-mix(in srgb, var(--module-budget) 10%, transparent);
|
||||
}
|
||||
|
||||
.budget-tab[data-tab="loans"]:not(.budget-tab--active) {
|
||||
background: color-mix(in srgb, var(--color-info) 10%, transparent);
|
||||
}
|
||||
|
||||
.budget-tab--active {
|
||||
background: var(--module-accent);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.budget-tab[data-tab="budget"].budget-tab--active {
|
||||
background: var(--module-budget);
|
||||
}
|
||||
|
||||
.budget-tab[data-tab="loans"].budget-tab--active {
|
||||
background: var(--color-info);
|
||||
}
|
||||
|
||||
.budget-tab-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -269,8 +292,30 @@
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.budget-loans__add {
|
||||
flex-shrink: 0;
|
||||
.budget-loans__filters {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
padding: 2px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
.budget-loans__filter {
|
||||
min-height: 30px;
|
||||
padding: 0 var(--space-2);
|
||||
border: 0;
|
||||
border-radius: var(--radius-xs);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.budget-loans__filter--active {
|
||||
background: var(--color-info);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.budget-loans__stats {
|
||||
@@ -328,6 +373,13 @@
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.budget-loan-card:hover {
|
||||
border-color: var(--color-info);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
.budget-loan-card__main {
|
||||
@@ -402,6 +454,107 @@
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.budget-loan-transactions {
|
||||
margin-top: var(--space-4);
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
|
||||
.budget-loan-transactions__title,
|
||||
.loan-report__section-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.budget-loan-transactions__list,
|
||||
.loan-report__transactions {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.budget-loan-transaction {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
.budget-loan-transaction span {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.budget-loan-transaction > div:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.loan-report__hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
.loan-report__borrower {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.loan-report__title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.loan-report__status {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.loan-report__status--active {
|
||||
background: var(--color-info);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.loan-report__status--paid {
|
||||
background: var(--color-success);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.loan-report__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.loan-report__grid > div {
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.loan-report__grid span {
|
||||
display: block;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.budget-page .form-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -641,10 +794,15 @@
|
||||
}
|
||||
|
||||
.amount-type-btn--loan.amount-type-btn--active {
|
||||
background-color: var(--module-accent);
|
||||
background-color: var(--module-budget);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.modal-panel .js-entry-field[hidden],
|
||||
.modal-panel #bm-loan-fields[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.budget-field-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user