Browse Source

feat(PageChrome): add responsive container

limit width on desktop size screens
master
DanConwayDev 2 years ago
parent
commit
656d286036
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
  1. 128
      __snapshots__/navbar.test.js.snap
  2. 30
      src/lib/components/Navbar.svelte
  3. 4
      src/routes/+layout.svelte

128
__snapshots__/navbar.test.js.snap

@ -1,76 +1,88 @@ @@ -1,76 +1,88 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navbar Default test 1`] = `
<div class="navbar bg-neutral">
<div class="flex-1">
<h4>
<span class="primary">
git
</span>
<span class>
together
</span>
<span class>
.xyz
</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="btn btn-primary normal-case">
Sign up
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">
git
</span>
<span class>
together
</span>
<span class>
.xyz
</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="btn btn-primary normal-case">
Sign up
</div>
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
`;
exports[`Navbar NIP07Exists test 1`] = `
<div class="navbar bg-neutral">
<div class="flex-1">
<h4>
<span class="primary">
git
</span>
<span class>
together
</span>
<span class>
.xyz
</span>
</h4>
</div>
<div class="flex-none gap-4">
<button class="btn btn-outline normal-case">
Login
</button>
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">
git
</span>
<span class>
together
</span>
<span class>
.xyz
</span>
</h4>
</div>
<div class="flex-none gap-4">
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
</div>
</div>
`;
exports[`Navbar NoNIP07 test 1`] = `
<div class="navbar bg-neutral">
<div class="flex-1">
<h4>
<span class="primary">
git
</span>
<span class>
together
</span>
<span class>
.xyz
</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="btn btn-primary normal-case">
Sign up
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">
git
</span>
<span class>
together
</span>
<span class>
.xyz
</span>
</h4>
</div>
<div class="flex-none gap-4">
<div class="btn btn-primary normal-case">
Sign up
</div>
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
<button class="btn btn-outline normal-case">
Login
</button>
</div>
</div>
`;

30
src/lib/components/Navbar.svelte

@ -2,20 +2,22 @@ @@ -2,20 +2,22 @@
export let nip07plugin: boolean = false;
</script>
<div class="navbar bg-neutral">
<div class="flex-1">
<h4>
<span class="primary">git</span>
<span class="">together</span>
<span class="">.xyz</span>
</h4>
</div>
<div class="flex-none gap-4">
{#if !nip07plugin}
<div class="btn btn-primary normal-case">
Sign up
<div class="bg-neutral">
<div class="mx-auto lg:container bg-neutral">
<div class="navbar">
<div class="flex-1">
<h4>
<span class="primary">git</span>
<span class="">together</span>
<span class="">.xyz</span>
</h4>
</div>
<div class="flex-none gap-4">
{#if !nip07plugin}
<div class="btn btn-primary normal-case">Sign up</div>
{/if}
<button class="btn btn-outline normal-case">Login</button>
</div>
{/if}
<button class="btn btn-outline normal-case">Login</button>
</div>
</div>
</div>

4
src/routes/+layout.svelte

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

Loading…
Cancel
Save