switch classes from daisyui to bulma
This commit is contained in:
parent
b8b51f1870
commit
e230c0e10d
4 changed files with 138 additions and 81 deletions
|
|
@ -6,11 +6,10 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.31.0/dist/full.css" rel="stylesheet" type="text/css">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.9"
|
||||
integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
|
||||
crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
|
|
@ -51,12 +50,16 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container is-widescreen">
|
||||
{{ template "header" . }}
|
||||
|
||||
</div>
|
||||
<div class="container is-widescreen">
|
||||
{{ template "main" . }}
|
||||
</div>
|
||||
|
||||
<div class="container is-widescreen">
|
||||
{{ template "footer" . }}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
{{ define "footer" }}
|
||||
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
|
||||
<aside>
|
||||
<p class="text-gray-600">© {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.</p>
|
||||
</aside>
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered is-widescreen">
|
||||
<p>
|
||||
© {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,54 @@
|
|||
{{ define "header" }}
|
||||
<header>
|
||||
<nav class="navbar bg-base-100">
|
||||
<a href="/" class="btn btn-ghost text-xl">Dungeons & Dragons</a>
|
||||
<a href="/about" class="btn btn-ghost text-xl">About</a>
|
||||
<a href="/contact" class="btn btn-ghost text-xl">Contact</a>
|
||||
</nav>
|
||||
<div id="banner" class="banner bg-gray-800 p-8 text-white">
|
||||
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
|
||||
<a href="https://dnd.wizards.com/resources/press-assets">image credits</a>
|
||||
<h1 class="centered text-4xl font-bold">Dungeons and Dragons Monster Generator</h1>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a href="/" class="navbar-item">
|
||||
Dungeons & Dragons
|
||||
</a>
|
||||
|
||||
<a href="/about" class="navbar-item">
|
||||
About
|
||||
</a>
|
||||
|
||||
<a href="/contact" class="navbar-item">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="hero box">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<div class="hero-background">
|
||||
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
|
||||
</div>
|
||||
<p class="title">
|
||||
Dungeons and Dragons Monster Generator
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
{{ define "main" }}
|
||||
<div class="card-body form-box w-full h-full">
|
||||
<h2 class="card-title">Monster Form</h2>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Monster Form</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
|
||||
<table>
|
||||
<tr>
|
||||
|
|
@ -11,18 +15,24 @@
|
|||
</table>
|
||||
<div class="grid grid-cols-1">
|
||||
<button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
|
||||
class="btn">Add
|
||||
class="button">Add
|
||||
Monster</button>
|
||||
</div>
|
||||
{{ template "monsterform" . }}
|
||||
<input type="hidden" name="filename" value="{{.Filename}}">
|
||||
<div class="card-actions justify-end">
|
||||
<input type="submit" value="Submit" class="btn">
|
||||
<input type="submit" value="Submit" class="button is-primary">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body form-box w-full h-full">
|
||||
<h2 class="card-title">Existing Monsters</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="media-content">
|
||||
<p class="title is-4 is-centered">Existing Monsters</p>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<colgroup>
|
||||
<col style="width: 100px;">
|
||||
|
|
@ -64,4 +74,6 @@
|
|||
{{ template "monsterTable" }}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue