aboutsummaryrefslogtreecommitdiff
path: root/src/routes
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes')
-rw-r--r--src/routes/+page.svelte68
-rw-r--r--src/routes/groceries/+page.svelte14
-rw-r--r--src/routes/groceries/categories/+page.svelte39
-rw-r--r--src/routes/projects/[id]/+page.svelte106
-rw-r--r--src/routes/projects/[projectId]/routine/[routineId]/+page.svelte66
5 files changed, 27 insertions, 266 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4d4777a..fd987ff 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,9 +6,9 @@
let name = $state('');
function scoreClass(score: number): string {
- if (score >= 80) return 'score score--good';
- if (score >= 50) return 'score score--mid';
- return 'score score--bad';
+ if (score >= 80) return 'score bg-success';
+ if (score >= 50) return 'score bg-accent';
+ return 'score bg-danger';
}
</script>
@@ -18,7 +18,7 @@
<span class={scoreClass(data.globalScore)}>{data.globalScore}</span>
</header>
- <form class="cat-add-bar" method="POST" action="?/addProject" use:enhance>
+ <form class="add-bar" method="POST" action="?/addProject" use:enhance>
<input
class="form-input"
type="text"
@@ -73,66 +73,6 @@
color: var(--accent);
}
- .score {
- flex-shrink: 0;
- min-width: 2.75rem;
- padding: 0.25rem 0.5rem;
- border-radius: 9999px;
- text-align: center;
- font-size: 0.875rem;
- font-weight: 700;
- color: var(--white);
- }
-
- .score--good {
- background: var(--success);
- }
-
- .score--mid {
- background: var(--accent);
- }
-
- .score--bad {
- background: var(--danger);
- }
-
- .cat-add-bar {
- display: flex;
- gap: 0.5rem;
- padding: 0.75rem 0;
- }
-
- .cat-add-bar input {
- flex: 1;
- background: var(--surface);
- }
-
- .btn-accent {
- width: 3rem;
- height: 3rem;
- flex-shrink: 0;
- padding: 0;
- border: none;
- border-radius: 0.75rem;
- background: var(--accent);
- color: var(--white);
- font-size: 1.25rem;
- font-weight: 500;
- font-family: inherit;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .btn-accent:hover {
- background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
- }
-
.empty {
margin-top: 1rem;
padding: 2rem;
diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte
index a159209..df1b97b 100644
--- a/src/routes/groceries/+page.svelte
+++ b/src/routes/groceries/+page.svelte
@@ -65,7 +65,7 @@
}
</script>
-<div class="add-bar">
+<div class="grocery-add-bar">
<FuzzyAutocomplete
items={data.catalog}
bind:value={name}
@@ -123,7 +123,7 @@
</main>
<style>
- .add-bar {
+ .grocery-add-bar {
display: flex;
gap: 0.5rem;
padding: 0.5rem 1rem;
@@ -134,7 +134,7 @@
z-index: 10;
}
- .add-bar button {
+ .grocery-add-bar button {
width: 3rem;
height: 3rem;
flex-shrink: 0;
@@ -151,25 +151,25 @@
transition: all 0.2s ease;
}
- .add-bar > button:nth-of-type(1) {
+ .grocery-add-bar > button:nth-of-type(1) {
background: var(--accent);
color: var(--white);
box-shadow: 0 1px 2px var(--shadow);
}
- .add-bar > button:nth-of-type(1):hover {
+ .grocery-add-bar > button:nth-of-type(1):hover {
background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 8px var(--shadow-accent-lg);
}
- .add-bar > button:nth-of-type(2) {
+ .grocery-add-bar > button:nth-of-type(2) {
background: var(--surface);
color: var(--text-secondary);
border: 1.5px solid var(--border);
}
- .add-bar > button:nth-of-type(2):hover {
+ .grocery-add-bar > button:nth-of-type(2):hover {
border-color: var(--accent);
color: var(--text);
}
diff --git a/src/routes/groceries/categories/+page.svelte b/src/routes/groceries/categories/+page.svelte
index 267a287..48de2da 100644
--- a/src/routes/groceries/categories/+page.svelte
+++ b/src/routes/groceries/categories/+page.svelte
@@ -37,7 +37,7 @@
</script>
<main>
- <form class="cat-add-bar" method="POST" action="?/add" use:enhance>
+ <form class="add-bar" method="POST" action="?/add" use:enhance>
<input
class="form-input"
type="text"
@@ -120,43 +120,6 @@
margin-bottom: 0.5rem;
}
- .cat-add-bar {
- display: flex;
- gap: 0.5rem;
- padding: 0.75rem 0;
- }
-
- .cat-add-bar input {
- flex: 1;
- background: var(--surface);
- }
-
- .btn-accent {
- width: 3rem;
- height: 3rem;
- flex-shrink: 0;
- padding: 0;
- border: none;
- border-radius: 0.75rem;
- background: var(--accent);
- color: var(--white);
- font-size: 1.25rem;
- font-weight: 500;
- font-family: inherit;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .btn-accent:hover {
- background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
- }
-
.empty {
margin-top: 1rem;
padding: 2rem;
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 608bbbb..c69d066 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -36,16 +36,16 @@
}
function scoreClass(score: number): string {
- if (score >= 80) return 'score score--good';
- if (score >= 50) return 'score score--mid';
- return 'score score--bad';
+ if (score >= 80) return 'score bg-success';
+ if (score >= 50) return 'score bg-accent';
+ return 'score bg-danger';
}
function statusClass(status: RoutineState['status']): string {
- if (status === 'ok') return 'status status--ok';
- if (status === 'due') return 'status status--due';
- if (status === 'late') return 'status status--late';
- return 'status status--very-late';
+ if (status === 'ok') return 'status bg-success text-white';
+ if (status === 'due') return 'status bg-accent-soft text-accent';
+ if (status === 'late') return 'status bg-accent text-white';
+ return 'status bg-danger text-white';
}
</script>
@@ -56,7 +56,7 @@
</header>
<form
- class="cat-add-bar"
+ class="add-bar"
method="POST"
action="?/addRoutine"
use:enhance={() => {
@@ -272,35 +272,6 @@
border-color: var(--danger);
}
- .status {
- flex-shrink: 0;
- padding: 0.25rem 0.5rem;
- border-radius: 9999px;
- font-size: 0.75rem;
- font-weight: 600;
- white-space: nowrap;
- }
-
- .status--ok {
- background: var(--success);
- color: var(--white);
- }
-
- .status--due {
- background: var(--shadow-accent);
- color: var(--accent);
- }
-
- .status--late {
- background: var(--accent);
- color: var(--white);
- }
-
- .status--very-late {
- background: var(--danger);
- color: var(--white);
- }
-
.btn-done {
flex-shrink: 0;
padding: 0.5rem 0.875rem;
@@ -318,67 +289,6 @@
transform: translateY(-1px);
}
- .score {
- flex-shrink: 0;
- min-width: 2.75rem;
- padding: 0.25rem 0.5rem;
- border-radius: 9999px;
- text-align: center;
- font-size: 0.875rem;
- font-weight: 700;
- color: var(--white);
- }
-
- .score--good {
- background: var(--success);
- }
-
- .score--mid {
- background: var(--accent);
- }
-
- .score--bad {
- background: var(--danger);
- }
-
- .cat-add-bar {
- display: flex;
- gap: 0.5rem;
- padding: 0.75rem 0;
- }
-
- .cat-add-bar input:first-child {
- flex: 1;
- background: var(--surface);
- min-width: 0;
- }
-
- .btn-accent {
- width: 3rem;
- height: 3rem;
- flex-shrink: 0;
- padding: 0;
- border: none;
- border-radius: 0.75rem;
- background: var(--accent);
- color: var(--white);
- font-size: 1.25rem;
- font-weight: 500;
- font-family: inherit;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .btn-accent:hover {
- background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
- }
-
.page-footer {
margin-top: 2rem;
display: flex;
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index ab0774c..d57ed79 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -70,16 +70,16 @@
});
function scoreClass(score: number): string {
- if (score >= 80) return 'score score--good';
- if (score >= 50) return 'score score--mid';
- return 'score score--bad';
+ if (score >= 80) return 'score bg-success';
+ if (score >= 50) return 'score bg-accent';
+ return 'score bg-danger';
}
function statusClass(status: RoutineState['status']): string {
- if (status === 'ok') return 'status status--ok';
- if (status === 'due') return 'status status--due';
- if (status === 'late') return 'status status--late';
- return 'status status--very-late';
+ if (status === 'ok') return 'status bg-success text-white';
+ if (status === 'due') return 'status bg-accent-soft text-accent';
+ if (status === 'late') return 'status bg-accent text-white';
+ return 'status bg-danger text-white';
}
</script>
@@ -346,58 +346,6 @@
color: var(--text-secondary);
}
- .status {
- flex-shrink: 0;
- padding: 0.25rem 0.5rem;
- border-radius: 9999px;
- font-size: 0.75rem;
- font-weight: 600;
- white-space: nowrap;
- }
-
- .status--ok {
- background: var(--success);
- color: var(--white);
- }
-
- .status--due {
- background: var(--shadow-accent);
- color: var(--accent);
- }
-
- .status--late {
- background: var(--accent);
- color: var(--white);
- }
-
- .status--very-late {
- background: var(--danger);
- color: var(--white);
- }
-
- .score {
- flex-shrink: 0;
- min-width: 2.75rem;
- padding: 0.25rem 0.5rem;
- border-radius: 9999px;
- text-align: center;
- font-size: 0.875rem;
- font-weight: 700;
- color: var(--white);
- }
-
- .score--good {
- background: var(--success);
- }
-
- .score--mid {
- background: var(--accent);
- }
-
- .score--bad {
- background: var(--danger);
- }
-
.add-completion {
flex-direction: row;
align-items: center;
generated by cgit v1.3 (git 2.53.0) at 2026-10-18 12:34:38 +0000