ryan/chore
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 5 Releases Wiki Activity

style: Refactor routine selection and item styles for improved layout and responsiveness
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 2m58s
Details

Browse Source
This commit is contained in:
Ryan Kegel
2026-05-20 00:03:12 -04:00
parent a6944ad59c
commit f510dea09d
1 changed files with 19 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/components/child/RoutineAssignView.vue
View File

@@ -149,37 +149,30 @@ function onCancel() {
} }
.routine-selection { .routine-selection {
flex: 0 1 auto;
max-width: 480px;
width: 100%;
max-height: calc(100vh - 4.5rem);
overflow-y: auto;
margin: 0.2rem 0 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.7rem; gap: 0.5rem;
background: var(--list-bg); width: 100%;
padding: 0.2rem; max-width: 500px;
border-radius: 12px;
} }
.routine-item { .routine-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 0.75rem;
border: 2px outset var(--list-item-border-good); padding: 0.75rem 1rem;
border: 2px solid var(--list-item-border-good);
border-radius: 8px; border-radius: 8px;
padding: 0.2rem 1rem;
background: var(--list-item-bg-good); background: var(--list-item-bg-good);
font-size: 1.05rem;
font-weight: 500;
transition: border 0.18s;
margin-bottom: 0.2rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
box-sizing: border-box;
cursor: pointer; cursor: pointer;
transition:
background 0.2s,
border-color 0.2s;
}
.routine-item:hover {
background: var(--list-item-bg-good-hover, var(--list-item-bg-good));
border-color: var(--list-item-border-good-hover, var(--list-item-border-good));
} }
.routine-item input[type='checkbox'] { .routine-item input[type='checkbox'] {
@@ -192,22 +185,19 @@ function onCancel() {
} }
.routine-item img { .routine-item img {
width: 36px; width: 2.5rem;
height: 36px; height: 2.5rem;
border-radius: 6px;
object-fit: cover; object-fit: cover;
border-radius: 8px;
margin-right: 0.7rem;
background: var(--list-image-bg);
flex-shrink: 0;
} }
.name { .routine-item .name {
flex: 1; flex: 1;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
} }
.value { .routine-item .value {
min-width: 60px; min-width: 60px;
text-align: right; text-align: right;
font-weight: 600; font-weight: 600;
@@ -230,22 +220,4 @@ function onCancel() {
transition: background 0.18s; transition: background 0.18s;
min-width: 120px; min-width: 120px;
} }
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.round-btn {
background: none;
border: none;
color: var(--btn-primary);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.round-btn:hover {
opacity: 0.8;
}
</style> </style>