Skip to content

Commit b254cda

Browse files
Jaz-specJaz-spec
authored
Merge pull request #17 from foundersandcoders/feat/list-item-structure
Let's Try Again
2 parents 3289211 + c4ff7ba commit b254cda

File tree

8 files changed

+66
-49
lines changed

8 files changed

+66
-49
lines changed

‎.github/PULL_REQUEST_TEMPLATE.md‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
# Title
2-
<!-- Simple phrase that describes the main outcomes -->
3-
41
## Overview
52

63
> Describe what your PR does here.
@@ -9,34 +6,34 @@
96

107
## TL;DR
118
<!-- TLDR Guide
12-
List any steps devs have to take after pulling this down
13-
-->
9+
List any steps devs have to take after pulling this down
10+
-->
1411

1512
---
1613

1714
## Gallery
1815
<!-- Gallery Guide
19-
Delete if irrelevant
20-
- Screenshots to show changes
21-
- Code snippets to flex smugly
22-
-->
16+
Delete if irrelevant
17+
- Screenshots to show changes
18+
- Code snippets to flex smugly
19+
-->
2320

2421
---
2522

2623
## Changes
2724
<!-- Changes Guide
28-
Break your changes into either files or categories, depending on how wide-ranging the PR is. For example...
25+
Break your changes into either files or categories, depending on how wide-ranging the PR is. For example...
26+
-->
2927

30-
### Database Utils `or` `utils/db.md`
28+
**Category** or **`file.js`**
3129

32-
Brief description of changes
30+
Brief description of changes
3331

34-
- details in bullet points, if necessary
35-
-->
32+
- details in bullet points, if necessary
3633

3734
---
3835

3936
## Summary
4037
<!-- Summary Guide
41-
Describe this PR using a completely non-technical and ideally absurd metaphor
42-
-->
38+
Describe this PR using a completely non-technical and ideally absurd metaphor
39+
-->

‎src/app.css‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,20 @@ body {
2222
font-family: var(--font-family-sans);
2323
}
2424

25+
/* === Temporary Dev Styles === */
26+
2527
.dev {
2628
margin: 1rem;
27-
outline: 2px solid var(--color-teal);
2829
padding: 1rem;
2930
}
3031

31-
.tile { outline-color: var(--color-blue-bright); }
32-
33-
.list { outline-color: var(--color-purple); }
34-
35-
.button { outline-color: var(--color-pink); }
32+
.dev-div { outline: 2px solid var(--color-teal); }
33+
.dev-tile { outline: 2px solid var(--color-blue-bright); }
34+
.dev-list { outline: 2px solid var(--color-purple); }
35+
.dev-button { outline: 2px solid var(--color-pink); }
36+
.dev-text { margin: 0; padding: 0 1rem; }
3637

37-
.inactive {
38+
.dev-inactive {
3839
outline-color: var(--color-black);
3940
font-style: italic;
4041
}

‎src/lib/components/cards/ListItem.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { View } from "$lib/types/ui";
3+
import type { Question } from "$lib/types/main";
4+
import { getContext } from 'svelte';
5+
6+
export let question: Question;
7+
8+
const setView = getContext<(view:View) => void>('setView');
9+
10+
const onclick = () => {setView("detail")};
11+
const onkeydown = (e: KeyboardEvent) => {
12+
if (e.key === 'Enter') setView("detail")
13+
};
14+
</script>
15+
16+
<div class="dev dev-div flex flex-row justify-between" {onclick} {onkeydown} role="button" tabindex="0">
17+
<div class="dev dev-div dev-text"><pre>status</pre></div>
18+
<div class="dev dev-div dev-text">{question.preview}</div>
19+
<div class="dev dev-div dev-text"><pre>actions</pre></div>
20+
</div>

‎src/lib/components/layouts/Footer.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
<footer class="sticky bottom-0 z-50 w-full border-t border-gray-200 bg-white">
66
<div id="dev-info" class="flex flex-row justify-between">
7-
<div class="dev"></div>
7+
<div class="dev dev-div"></div>
88

9-
<div class="dev">
9+
<div class="dev dev-div">
1010
{#if profileId}
1111
<p>Profile ID: {profileId}</p>
1212
{:else}
1313
<p>Not Logged In</p>
1414
{/if}
1515
</div>
1616

17-
<div class="dev">
17+
<div class="dev dev-div">
1818
<p>Dev Mode: {devMode}</p>
1919
</div>
2020
</div>

‎src/lib/components/views/Dash.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,21 @@
4242
};
4343
</script>
4444

45-
<div class="dev">
46-
<div id="dash-header" class="dev flex flex-row justify-between">
45+
<div class="dev dev-div">
46+
<div id="dash-header" class="dev dev-div flex flex-row justify-between">
4747
<h2>Dashboard View</h2>
4848
</div>
4949

50-
<div id="dash-tiles" class="dev">
50+
<div id="dash-tiles" class="dev dev-div">
5151
{#await queryActions}
5252
<p>Loading...</p>
5353
{:then result}
5454
{#if result && result.data}
55-
<button class="dev tile" onclick={() => setViewList({ raw: "actions", format: "Actions" })}>
55+
<button class="dev dev-div dev-tile" onclick={() => setViewList({ raw: "actions", format: "Actions" })}>
5656
<p>{result.data.length} Actions</p>
5757
</button>
5858
{:else}
59-
<button class="dev inactive">
59+
<button class="dev dev-div dev-inactive">
6060
<p>0 Actions</p>
6161
</button>
6262
{/if}
@@ -69,7 +69,7 @@
6969
{:then result}
7070
{#if result.data}
7171
{#each getCategories(result.data) as category}
72-
<button class="dev tile" onclick={() => setViewList(category)}>
72+
<button class="dev dev-div dev-tile" onclick={() => setViewList(category)}>
7373
<p>{category.format}</p>
7474
</button>
7575
{/each}

‎src/lib/components/views/Detail.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
const onBackClick = () => { setView("list") };
88
</script>
99

10-
<div class="dev">
11-
<div id="detail-header" class="dev flex flex-row justify-between">
12-
<h2 class="dev">Detail View</h2>
10+
<div class="dev dev-div">
11+
<div id="detail-header" class="dev dev-div flex flex-row justify-between">
12+
<h2 class="dev dev-div">Detail View</h2>
1313

14-
<button onclick={onBackClick} class="dev button">
14+
<button onclick={onBackClick} class="dev dev-div dev-button">
1515
Back
1616
</button>
1717
</div>
1818

19-
<div id="detail-content" class="dev">
19+
<div id="detail-content" class="dev dev-div">
2020
</div>
2121
</div>

‎src/lib/components/views/List.svelte‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import { getUserActions } from "$lib/services/database/actions";
44
import { getQuestionsByCategory } from "$lib/services/database/questions";
55
import { getContext } from 'svelte';
6-
6+
import ListItem from "$lib/components/cards/ListItem.svelte";
7+
78
const setView = getContext<(view:View) => void>('setView');
89
910
const getList = getContext<() => ListCategory>('getList');
@@ -23,23 +24,23 @@
2324
const onListClick = () => { setView("detail") };
2425
</script>
2526

26-
<div class="dev">
27-
<div id="list-header" class="dev flex flex-row justify-between">
28-
<h2 class="dev">List View</h2>
27+
<div class="dev dev-div">
28+
<div id="list-header" class="dev dev-div flex flex-row justify-between">
29+
<h2 class="dev dev-div">List View</h2>
2930

30-
<button onclick={onBackClick} class="dev button">
31+
<button onclick={onBackClick} class="dev dev-div dev-button">
3132
Back
3233
</button>
3334
</div>
3435

35-
<div id="list-items" class="dev flex flex-col justify-left">
36+
<div id="list-items" class="dev dev-div flex flex-col justify-left">
3637
{#if list.raw == "actions"}
3738
{#await queryActions}
3839
<p>Loading...</p>
3940
{:then result}
4041
{#if result.data}
4142
{#each result.data as action}
42-
<button onclick={onListClick} class="dev list">
43+
<button onclick={onListClick} class="dev dev-div dev-list">
4344
{action.description}
4445
</button>
4546
{/each}
@@ -53,16 +54,14 @@
5354
{:then result}
5455
{#if result.data}
5556
{#each result.data as question}
56-
<button onclick={onListClick} class="dev list">
57-
{question.preview}
58-
</button>
57+
<ListItem {question} />
5958
{/each}
6059
{/if}
6160
{:catch error}
6261
<p>Error: {error.message}</p>
6362
{/await}
6463
{:else}
65-
<div class="dev list">
64+
<div class="dev dev-div dev-list">
6665
<p>No list selected</p>
6766
</div>
6867
{/if}

‎src/routes/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
let view = $derived(getView());
1717
</script>
1818

19-
<main id="view" class="dev">
19+
<main id="view" class="dev dev-div">
2020
{#if view === "dash"}
2121
<Dash />
2222
{:else if view === "list"}

0 commit comments

Comments
 (0)