Browse Source

feat: rename app and tweak ui

- rename for 'git together' to 'git work'
- tweak ui to make it responsive
master
DanConwayDev 2 years ago
parent
commit
2f3bd85e80
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
  1. BIN
      __snapshots__/navbar--default.png
  2. BIN
      __snapshots__/navbar--nip-07-exists.png
  3. BIN
      __snapshots__/navbar--no-nip-07.png
  4. 78
      __snapshots__/navbar.test.js.snap
  5. BIN
      __snapshots__/prs-header--short-details.png
  6. 30
      __snapshots__/prs-header.test.js.snap
  7. BIN
      __snapshots__/repo-header--loading.png
  8. BIN
      __snapshots__/repo-header--long-name.png
  9. BIN
      __snapshots__/repo-header--no-name.png
  10. BIN
      __snapshots__/repo-header--short-name.png
  11. 36
      __snapshots__/repo-header.test.js.snap
  12. 13
      src/lib/components/Container.svelte
  13. 26
      src/lib/components/Navbar.svelte
  14. 5
      src/lib/components/prs/PRHeader.svelte
  15. 19
      src/lib/components/repo/RepoHeader.svelte
  16. 2
      src/routes/+layout.svelte
  17. 10
      src/routes/repo/[repo_id]/+page.svelte
  18. 9
      src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
  19. 8
      tailwind.config.js

BIN
__snapshots__/navbar--default.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
__snapshots__/navbar--nip-07-exists.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
__snapshots__/navbar--no-nip-07.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

78
__snapshots__/navbar.test.js.snap

@ -1,29 +1,30 @@ @@ -1,29 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navbar Default smoke-test 1`] = `
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="bg-base-400">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">
<div class="navbar-start">
</div>
<div class="navbar-center">
<h4 class="align-middle text-sm font-mono">
<span class="text-primary">
git
</span>
<span class>
together
<span class="text-primary">
workshop
</span>
<span class>
.xyz
.net
</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="btn btn-primary normal-case">
<div class="navbar-end gap-4">
<div class="btn normal-case btn-sm btn-ghost">
Sign up
</div>
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
</div>
</div>
@ -31,56 +32,61 @@ exports[`Navbar Default smoke-test 1`] = ` @@ -31,56 +32,61 @@ exports[`Navbar Default smoke-test 1`] = `
`;
exports[`Navbar NIP07Exists smoke-test 1`] = `
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="bg-base-400">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">
<div class="navbar-start">
</div>
<div class="navbar-center">
<h4 class="align-middle text-sm font-mono">
<span class="text-primary">
git
</span>
<span class>
together
<span class="text-primary">
workshop
</span>
<span class>
.xyz
.net
</span>
</h4>
</div>
<div class="flex-none gap-4">
<button class="btn btn-outline normal-case">
<div class="navbar-end gap-4">
<button class="btn normal-case btn-sm btn-ghost">
Login
</button>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Navbar NoNIP07 smoke-test 1`] = `
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="bg-base-400">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">
<div class="navbar-start">
</div>
<div class="navbar-center">
<h4 class="align-middle text-sm font-mono">
<span class="text-primary">
git
</span>
<span class>
together
<span class="text-primary">
workshop
</span>
<span class>
.xyz
.net
</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="btn btn-primary normal-case">
<div class="navbar-end gap-4">
<div class="btn normal-case btn-sm btn-ghost">
Sign up
</div>
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
</div>
</div>

BIN
__snapshots__/prs-header--short-details.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

30
__snapshots__/prs-header.test.js.snap

@ -1,7 +1,9 @@ @@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PRs/Header Author Loading smoke-test 1`] = `
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="text-lg text-base-content mb-2">
short title
</div>
@ -25,10 +27,14 @@ exports[`PRs/Header Author Loading smoke-test 1`] = ` @@ -25,10 +27,14 @@ exports[`PRs/Header Author Loading smoke-test 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`PRs/Header Long Details smoke-test 1`] = `
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="text-lg text-base-content mb-2">
rather long title that goes on and on and on and on and on and on...
</div>
@ -51,10 +57,14 @@ exports[`PRs/Header Long Details smoke-test 1`] = ` @@ -51,10 +57,14 @@ exports[`PRs/Header Long Details smoke-test 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="text-lg text-base-content mb-2">
LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
</div>
@ -77,10 +87,14 @@ exports[`PRs/Header Long and No Spaces smoke-test 1`] = ` @@ -77,10 +87,14 @@ exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`PRs/Header Short Details smoke-test 1`] = `
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
<div class="mx-auto lg:container">
<div class="px-3">
<div class="text-lg text-base-content mb-2">
short title
</div>
@ -103,10 +117,14 @@ exports[`PRs/Header Short Details smoke-test 1`] = ` @@ -103,10 +117,14 @@ exports[`PRs/Header Short Details smoke-test 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`PRs/Header loading smoke-test 1`] = `
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
<div class="mx-auto lg:container">
<div class="px-3">
<div>
<div class="h-7 w-60 pt-1 skeleton">
</div>
@ -120,4 +138,6 @@ exports[`PRs/Header loading smoke-test 1`] = ` @@ -120,4 +138,6 @@ exports[`PRs/Header loading smoke-test 1`] = `
</div>
</div>
</div>
</div>
</div>
`;

BIN
__snapshots__/repo-header--loading.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
__snapshots__/repo-header--long-name.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
__snapshots__/repo-header--no-name.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
__snapshots__/repo-header--short-name.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

36
__snapshots__/repo-header.test.js.snap

@ -1,46 +1,46 @@ @@ -1,46 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Repo/Header Long Name smoke-test 1`] = `
<div class="bg-base-300 py-2 border-b border-accent-content">
<div class="bg-base-300 border-b border-accent-content">
<div class="mx-auto lg:container">
<div class="max-w-md prose px-3">
<h4 class="text-sm my-1 break-words">
<a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
>
Long Name that goes on and on and on and on a...
</h4>
</div>
</a>
</div>
</div>
`;
exports[`Repo/Header No Name smoke-test 1`] = `
<div class="bg-base-300 py-2 border-b border-accent-content">
<div class="bg-base-300 border-b border-accent-content">
<div class="mx-auto lg:container">
<div class="max-w-md prose px-3">
<h4 class="text-sm my-1 break-words">
<a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
>
Untitled
</h4>
</div>
</a>
</div>
</div>
`;
exports[`Repo/Header Short Name smoke-test 1`] = `
<div class="bg-base-300 py-2 border-b border-accent-content">
<div class="bg-base-300 border-b border-accent-content">
<div class="mx-auto lg:container">
<div class="max-w-md prose px-3">
<h4 class="text-sm my-1 break-words">
<a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
>
Short Name
</h4>
</div>
</a>
</div>
</div>
`;
exports[`Repo/Header loading smoke-test 1`] = `
<div class="bg-base-300 py-2 border-b border-accent-content">
<div class="bg-base-300 border-b border-accent-content">
<div class="mx-auto lg:container">
<div class="max-w-md prose px-3">
<div class="h-5 my-2 skeleton w-28">
<div class="p-3">
<div class="h-6 skeleton w-28 bg-base-200">
</div>
</div>
</div>

13
src/lib/components/Container.svelte

@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
<script lang="ts">
export let no_wrap: boolean = false;
</script>
<div class="mx-auto lg:container">
{#if no_wrap}
<slot />
{:else}
<div class="px-3">
<slot />
</div>
{/if}
</div>

26
src/lib/components/Navbar.svelte

@ -1,23 +1,27 @@ @@ -1,23 +1,27 @@
<script lang="ts">
import Container from "./Container.svelte";
export let nip07plugin: boolean = false;
</script>
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="bg-base-400">
<Container>
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">git</span>
<span class="">together</span>
<span class="">.xyz</span>
<div class="navbar-start"></div>
<div class="navbar-center">
<h4 class="align-middle text-sm font-mono">
<span class="text-primary">git</span><span class="text-primary"
>workshop</span
><span class="">.net</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="navbar-end gap-4">
{#if !nip07plugin}
<div class="btn btn-primary normal-case">Sign up</div>
<div class="btn normal-case btn-sm btn-ghost">Sign up</div>
{:else}
<button class="btn normal-case btn-sm btn-ghost">Login</button>
{/if}
<button class="btn btn-outline normal-case">Login</button>
</div>
</div>
</div>
</Container>
</div>

5
src/lib/components/prs/PRHeader.svelte

@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
import relativeTime from "dayjs/plugin/relativeTime";
import { summary_defaults } from "./type";
import { getName } from "../users/type";
import Container from "../Container.svelte";
dayjs.extend(relativeTime);
export let { title, id, repo_id, comments, author, created_at, loading } =
@ -25,8 +26,9 @@ @@ -25,8 +26,9 @@
</script>
<div
class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3"
class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4"
>
<Container>
{#if loading}
<div>
<div class="h-7 w-60 pt-1 skeleton"></div>
@ -70,4 +72,5 @@ @@ -70,4 +72,5 @@
</div>
</div>
{/if}
</Container>
</div>

19
src/lib/components/repo/RepoHeader.svelte

@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
<script lang="ts">
import type { User } from "$lib/components/users/type";
import UserHeader from "$lib/components/users/UserHeader.svelte";
import Container from "../Container.svelte";
import { defaults } from "./type";
export let {
@ -25,14 +26,18 @@ @@ -25,14 +26,18 @@
}
</script>
<div class="bg-base-300 py-2 border-b border-accent-content">
<div class="mx-auto lg:container">
<div class="max-w-md prose px-3">
<div class="bg-base-300 border-b border-accent-content">
<Container no_wrap={true}>
{#if loading}
<div class="h-5 my-2 skeleton w-28"></div>
<div class="p-3">
<div class="h-6 skeleton w-28 bg-base-200"></div>
</div>
{:else}
<h4 class="text-sm my-1 break-words">{short_name}</h4>
<a
href={`/repo/${repo_id}`}
class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
>{short_name}</a
>
{/if}
</div>
</div>
</Container>
</div>

2
src/routes/+layout.svelte

@ -5,6 +5,4 @@ @@ -5,6 +5,4 @@
<Navbar />
<div class="mx-auto lg:container">
<slot />
</div>

10
src/routes/repo/[repo_id]/+page.svelte

@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
import OpenPRs from "$lib/wrappers/OpenPRs.svelte";
import { ensureSelectedRepo, selected_repo } from "$lib/stores/repo";
import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
import Container from "$lib/components/Container.svelte";
export let data: { repo_id: string };
let repo_id = data.repo_id;
@ -11,11 +12,14 @@ @@ -11,11 +12,14 @@
</script>
<RepoHeader {...$selected_repo} />
<div class="flex">
<div class="w-2/3 mx-2">
<Container>
<div class="md:flex mt-2">
<div class="md:w-2/3 md:mr-2">
<OpenPRs {repo_id} />
</div>
<div class="w-1/3 mx-2 prose">
<div class="w-1/3 ml-2 prose hidden md:flex">
<RepoDetails {repo_id} />
</div>
</div>
</Container>

9
src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte

@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
import Thread from "$lib/wrappers/Thread.svelte";
import PrDetails from "$lib/components/prs/PRDetails.svelte";
import Container from "$lib/components/Container.svelte";
export let data: {
repo_id: string;
@ -25,8 +26,9 @@ @@ -25,8 +26,9 @@
<RepoHeader {...$selected_repo} />
<PrHeader {...$selected_pr_full.summary} />
<div class="flex">
<div class="w-2/3 mx-2">
<Container>
<div class="md:flex">
<div class="md:w-2/3 md:mr-2">
<div class="prose my-3">
{$selected_pr_full.summary.descritpion}
</div>
@ -37,7 +39,7 @@ @@ -37,7 +39,7 @@
/>
{/if}
</div>
<div class="w-1/3 mx-2 prose">
<div class="w-1/3 ml-2 prose hidden md:flex">
<PrDetails
summary={$selected_pr_full.summary}
status={$selected_pr_full.status}
@ -46,3 +48,4 @@ @@ -46,3 +48,4 @@
/>
</div>
</div>
</Container>

8
tailwind.config.js

@ -1,8 +1,14 @@ @@ -1,8 +1,14 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{svelte,js,ts}'],
theme: {
extend: {},
extend: {
colors: {
"base-400": "#16171e",
},
},
},
plugins: [
require('@tailwindcss/typography'),

Loading…
Cancel
Save