silberengel
/
gitcitadel-online
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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
e3ddb30205
commit
2f3bd85e80
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
19 changed files with 331 additions and 269 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 4
      src/routes/+layout.svelte
  17. 12
      src/routes/repo/[repo_id]/+page.svelte
  18. 11
      src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
  19. 12
      tailwind.config.js

BIN
__snapshots__/navbar--default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

78
__snapshots__/navbar.test.js.snap
Unescape View File

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

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

30
__snapshots__/prs-header.test.js.snap
Unescape View File

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PRs/Header Author Loading smoke-test 1`] = ` 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"> <div class="text-lg text-base-content mb-2">
short title short title
</div> </div>
@ -24,11 +26,15 @@ exports[`PRs/Header Author Loading smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;
exports[`PRs/Header Long Details smoke-test 1`] = ` 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"> <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... rather long title that goes on and on and on and on and on and on...
</div> </div>
@ -50,11 +56,15 @@ exports[`PRs/Header Long Details smoke-test 1`] = `
DanConwayDev DanConwayDev
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;
exports[`PRs/Header Long and No Spaces smoke-test 1`] = ` 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"> <div class="text-lg text-base-content mb-2">
LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL... LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
</div> </div>
@ -76,11 +86,15 @@ exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
DanConwayDev DanConwayDev
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;
exports[`PRs/Header Short Details smoke-test 1`] = ` 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"> <div class="text-lg text-base-content mb-2">
short title short title
</div> </div>
@ -102,11 +116,15 @@ exports[`PRs/Header Short Details smoke-test 1`] = `
DanConwayDev DanConwayDev
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;
exports[`PRs/Header loading smoke-test 1`] = ` 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>
<div class="h-7 w-60 pt-1 skeleton"> <div class="h-7 w-60 pt-1 skeleton">
</div> </div>
@ -119,5 +137,7 @@ exports[`PRs/Header loading smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;

BIN
__snapshots__/repo-header--loading.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 15 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

36
__snapshots__/repo-header.test.js.snap
Unescape View File

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

13
src/lib/components/Container.svelte
Unescape View File

@ -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
Unescape View File

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

5
src/lib/components/prs/PRHeader.svelte
Unescape View File

@ -6,6 +6,7 @@
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
import { summary_defaults } from "./type"; import { summary_defaults } from "./type";
import { getName } from "../users/type"; import { getName } from "../users/type";
import Container from "../Container.svelte";
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
export let { title, id, repo_id, comments, author, created_at, loading } = export let { title, id, repo_id, comments, author, created_at, loading } =
@ -25,8 +26,9 @@
</script> </script>
<div <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} {#if loading}
<div> <div>
<div class="h-7 w-60 pt-1 skeleton"></div> <div class="h-7 w-60 pt-1 skeleton"></div>
@ -70,4 +72,5 @@
</div> </div>
</div> </div>
{/if} {/if}
</Container>
</div> </div>

19
src/lib/components/repo/RepoHeader.svelte
Unescape View File

@ -5,6 +5,7 @@
<script lang="ts"> <script lang="ts">
import type { User } from "$lib/components/users/type"; import type { User } from "$lib/components/users/type";
import UserHeader from "$lib/components/users/UserHeader.svelte"; import UserHeader from "$lib/components/users/UserHeader.svelte";
import Container from "../Container.svelte";
import { defaults } from "./type"; import { defaults } from "./type";
export let { export let {
@ -25,14 +26,18 @@
} }
</script> </script>
<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"> <Container no_wrap={true}>
<div class="max-w-md prose px-3">
{#if loading} {#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} {: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} {/if}
</div> </Container>
</div>
</div> </div>

4
src/routes/+layout.svelte
Unescape View File

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

12
src/routes/repo/[repo_id]/+page.svelte
Unescape View File

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

11
src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
Unescape View File

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

12
tailwind.config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save