Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-29 01:39:36 +02:00
Code Issues Releases Activity

Add Tailwind CSS and update layout and page styles

Browse source
This commit is contained in:
Sean Morley 2024-03-30 21:00:12 +00:00
parent 510d6b5238
commit 9ee5d67ab6
11 changed files with 1255 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/lib/components/Navbar.svelte
View file

@ -1,44 +1,26 @@
<style>
.navbar {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
button {
margin-left: 1rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
background-color: #076836;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
button:hover {
background-color: #074b28;
}
</style>
<script lang="ts">
function navHome() {
window.location.href = '/';
}
function navLog() {
window.location.href = '/log';
}
import { getNumberOfAdventures } from "../../services/adventureService";
</script>
<div class="navbar">
<h2>AdventureLog 🗺️</h2>
<button on:click={navHome}>Home</button>
<button on:click={navLog}>Log</button>
<hr>
<br>
</div>
<div class="navbar bg-base-100">
<div class="navbar-start">
<button class="btn btn-primary mr-4 ml-2" on:click={() => window.location.href = '/'}>Home</button>
<button class="btn btn-primary" on:click={() => window.location.href = '/log'}>My Log</button>
</div>
<div class="navbar-center">
<a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
</div>
<div class="navbar-end">
<p>Adventures: {getNumberOfAdventures()} </p>
<button class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</button>
<button class="btn btn-ghost btn-circle">
<div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
<span class="badge badge-xs badge-primary indicator-item"></span>
</div>
</button>
</div>
</div>