git/ddServer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 5 Packages Wiki Activity Actions

switch classes from daisyui to bulma

Browse source
This commit is contained in:
Patryk Hegenberg 2023-12-05 14:26:03 +01:00
parent b8b51f1870
commit e230c0e10d
4 changed files with 138 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

11
templates/base.html
View file

@ -6,11 +6,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}}</title> <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" <script src="https://unpkg.com/htmx.org@1.9.9"
integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX" integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style> <style>
body { body {
display: flex; display: flex;
@ -51,12 +50,16 @@
</head> </head>
<body> <body>
<div class="container is-widescreen">
{{ template "header" . }} {{ template "header" . }}
</div>
<div class="container is-widescreen">
{{ template "main" . }} {{ template "main" . }}
</div>
<div class="container is-widescreen">
{{ template "footer" . }} {{ template "footer" . }}
</div>
</body> </body>

10
templates/footer.html
View file

@ -1,7 +1,9 @@
{{ define "footer" }} {{ define "footer" }}
<footer class="footer footer-center p-4 bg-base-300 text-base-content"> <footer class="footer">
<aside> <div class="content has-text-centered is-widescreen">
<p class="text-gray-600">&copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.</p> <p>
</aside> &copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.
</p>
</div>
</footer> </footer>
{{ end }} {{ end }}

58
templates/header.html
View file

@ -1,14 +1,54 @@
{{ define "header" }} {{ define "header" }}
<header> <header>
<nav class="navbar bg-base-100"> <nav class="navbar" role="navigation" aria-label="main navigation">
<a href="/" class="btn btn-ghost text-xl">Dungeons & Dragons</a> <div class="navbar-brand">
<a href="/about" class="btn btn-ghost text-xl">About</a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<a href="/contact" class="btn btn-ghost text-xl">Contact</a> <span aria-hidden="true"></span>
</nav> <span aria-hidden="true"></span>
<div id="banner" class="banner bg-gray-800 p-8 text-white"> <span aria-hidden="true"></span>
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner"> </a>
<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>
</div> </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> </header>
{{ end }} {{ end }}

24
templates/main.html
View file

@ -1,6 +1,10 @@
{{ define "main" }} {{ define "main" }}
<div class="card-body form-box w-full h-full"> <div class="card">
<h2 class="card-title">Monster Form</h2> <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"> <form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
<table> <table>
<tr> <tr>
@ -11,18 +15,24 @@
</table> </table>
<div class="grid grid-cols-1"> <div class="grid grid-cols-1">
<button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML" <button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
class="btn">Add class="button">Add
Monster</button> Monster</button>
</div> </div>
{{ template "monsterform" . }} {{ template "monsterform" . }}
<input type="hidden" name="filename" value="{{.Filename}}"> <input type="hidden" name="filename" value="{{.Filename}}">
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<input type="submit" value="Submit" class="btn"> <input type="submit" value="Submit" class="button is-primary">
</div> </div>
</form> </form>
</div>
</div>
</div> </div>
<div class="card-body form-box w-full h-full"> <div class="card">
<h2 class="card-title">Existing Monsters</h2> <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"> <table class="table">
<colgroup> <colgroup>
<col style="width: 100px;"> <col style="width: 100px;">
@ -63,5 +73,7 @@
</thead> </thead>
{{ template "monsterTable" }} {{ template "monsterTable" }}
</table> </table>
</div>
</div>
</div> </div>
{{ end }} {{ end }}