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 {
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;
flex-direction: column;
gap: 0.7rem;
background: var(--list-bg);
padding: 0.2rem;
border-radius: 12px;
gap: 0.5rem;
width: 100%;
max-width: 500px;
}
.routine-item {
display: flex;
align-items: center;
justify-content: space-between;
border: 2px outset var(--list-item-border-good);
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 2px solid var(--list-item-border-good);
border-radius: 8px;
padding: 0.2rem 1rem;
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;
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'] {
@@ -192,22 +185,19 @@ function onCancel() {
}
.routine-item img {
width: 36px;
height: 36px;
width: 2.5rem;
height: 2.5rem;
border-radius: 6px;
object-fit: cover;
border-radius: 8px;
margin-right: 0.7rem;
background: var(--list-image-bg);
flex-shrink: 0;
}
.name {
.routine-item .name {
flex: 1;
text-align: left;
font-weight: 600;
}
.value {
.routine-item .value {
min-width: 60px;
text-align: right;
font-weight: 600;
@@ -230,22 +220,4 @@ function onCancel() {
transition: background 0.18s;
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>