okkkaaaay wieder zu bootstrap
Some checks failed
Build and push / Pulling repo on server (push) Failing after 17s

This commit is contained in:
Chris 2023-10-23 13:05:16 +02:00
parent 7779d189df
commit bd151ab4e6
17 changed files with 133 additions and 128 deletions

View File

@ -5,8 +5,9 @@ https://gitea.haschek.at/Crispi/dogstats
## Techstack ## Techstack
- [HTMX](https://htmx.org/docs/) - [HTMX](https://htmx.org/docs/)
- [Tailwind](https://flowbite.com/docs/components/accordion/) - [Bootstrap 5](https://getbootstrap.com/docs/5.3/layout/breakpoints/)
- [Font Awesome 5 Pro](https://fontawesome.com/v5/search) - [Font Awesome 5 Pro](https://fontawesome.com/v5/search)
- [Animate.css](https://animate.style/)
## Start Dev ## Start Dev
@ -18,21 +19,9 @@ Config file erstellen bzw kopieren
2. Datei `example.config.inc.php` umbenennen auf `config.inc.php` 2. Datei `example.config.inc.php` umbenennen auf `config.inc.php`
3. Gegebenenfalls Werte anpassen in der Config 3. Gegebenenfalls Werte anpassen in der Config
### Linux ### Jedes Mal
Erst Tailwind starten Im Terminal dann Webserver starten
1. `cd tools`
2. `./tailwindcss-linux-x64 -i ../web/css/input.css -o ../web/css/output.css --watch`
### Windows
Erst Tailwind starten
1. `cd tools`
2. `./tailwindcss-windows-x64.exe -i ../web/css/input.css -o ../web/css/output.css --watch`
In zweitem Terminal dann Webserver starten
1. `cd web` 1. `cd web`
2. `php -S localhost:8080` 2. `php -S localhost:8080`

7
web/css/animate.min.css vendored Normal file

File diff suppressed because one or more lines are too long

6
web/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

7
web/js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
<div class="container mx-auto"> <div>
<h1 class="text-4xl md:text-5xl">Hund hinzufügen/bearbeiten</h1> <h1>Hund hinzufügen/bearbeiten</h1>
<form hx-post="/dogs/edit" hx-target="#response"> <form hx-post="/dogs/edit" hx-target="#response">
<input type="hidden" name="dog_id" value="<?= $dogid; ?>"> <input type="hidden" name="dog_id" value="<?= $dogid; ?>">
@ -32,7 +32,7 @@
<option value="L" <?= $dogdata['agility_size']=='L'?'selected':''; ?>>L</option> <option value="L" <?= $dogdata['agility_size']=='L'?'selected':''; ?>>L</option>
</select> </select>
</div> </div>
<button type="submit" name="submit" value="true" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button> <button type="submit" name="submit" value="true" class="btn btn-primary">Submit</button>
</form> </form>
<div id="response"></div> <div id="response"></div>
</div> </div>

View File

@ -1,43 +1,43 @@
<h1 class="text-2xl p-6 text-center">Meine Hunde</h1> <h1">Meine Hunde</h1>
<div class="border-b border-gray-200 shadow overflow-x"> <figure>
<table class="divide-y divide-gray-300 table-auto overflow-scroll w-ful"> <table>
<thead class="bg-gray-50"> <thead>
<tr> <tr>
<?php foreach (array_keys($doggos[0]) as $key) : ?> <?php foreach (array_keys($doggos[0]) as $key) : ?>
<th class="px-6 py-2 text-xs text-gray-500"> <th>
<?= $key ?> <?= $key ?>
</th> </th>
<?php endforeach; ?> <?php endforeach; ?>
<th class="px-6 py-2 text-xs text-gray-500"> <th>
Bearbeiten Bearbeiten
</th> </th>
<th class="px-6 py-2 text-xs text-gray-500"> <th>
Löschen Löschen
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-300"> <tbody>
<?php foreach ($doggos as $dog) : ?> <?php foreach ($doggos as $dog) : ?>
<tr class="whitespace-nowrap"> <tr>
<?php foreach (array_keys($dog) as $key) : ?> <?php foreach (array_keys($dog) as $key) : ?>
<td class="px-6 py-4 text-sm text-gray-500"> <td>
<?= $dog[$key] ?> <?= $dog[$key] ?>
</td> </td>
<?php endforeach; ?> <?php endforeach; ?>
<td class="px-6 py-4"> <td>
<button hx-get="/dogs/edit/<?= $dog['id'] ?>" hx-push-url="/dogs/edit/<?= $dog['id'] ?>" hx-target="#main" class="px-4 py-1 text-sm text-indigo-600 bg-indigo-200 rounded-full">Bearbeiten</button> <button hx-get="/dogs/edit/<?= $dog['id'] ?>" hx-push-url="/dogs/edit/<?= $dog['id'] ?>" hx-target="#main" >Bearbeiten</button>
</td> </td>
<td class="px-6 py-4"> <td>
<button hx-get="/dogs/delete/<?= $dog['id'] ?>" hx-target="#main" class="px-4 py-1 text-sm text-red-400 bg-red-200 rounded-full">Löschen</button> <button hx-get="/dogs/delete/<?= $dog['id'] ?>" hx-target="#main" >Löschen</button>
</td> </td>
</tr> </tr>
<?php endforeach; ?> <?php endforeach; ?>
</tbody> </tbody>
</table> </table>
</div> </figure>

View File

@ -1,6 +1,7 @@
<div class="hidden sm:mb-8 sm:flex sm:justify-center"> <div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"> <div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Currently logged in as: <?= $_SESSION['userid']?:'nobody' ?> Currently logged in as:
<?= $_SESSION['userid']?:'nobody' ?>
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
@ -14,51 +15,44 @@
</div> </div>
</div> </div>
<h1 class="text-2xl p-6 text-center">Admin stuff</h1> <h1>Admin stuff</h1>
<figure>
<div class="container flex justify-center mx-auto"> <table role="grid">
<div class="flex flex-col"> <thead>
<div class="w-full">
<div class="border-b border-gray-200 shadow">
<table class="divide-y divide-gray-300 table-auto overflow-x-scroll w-full">
<thead class="bg-gray-50">
<tr> <tr>
<?php foreach (array_keys($userdata[0]) as $key) : ?> <?php foreach (array_keys($userdata[0]) as $key) : ?>
<th class="px-6 py-2 text-xs text-gray-500"> <th>
<?= $key ?> <?= $key ?>
</th> </th>
<?php endforeach; ?> <?php endforeach; ?>
<th class="px-6 py-2 text-xs text-gray-500"> <th>
Login Login
</th> </th>
<th class="px-6 py-2 text-xs text-gray-500"> <th>
Edit Edit
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-300"> <tbody>
<?php foreach ($userdata as $user) : ?> <?php foreach ($userdata as $user) : ?>
<tr class="whitespace-nowrap"> <tr>
<?php foreach (array_keys($user) as $key) : ?> <?php foreach (array_keys($user) as $key) : ?>
<td class="px-6 py-4 text-sm text-gray-500"> <td class="px-6 py-4 text-sm text-gray-500">
<?= is_array($user[$key])?json_encode($user[$key]):$user[$key] ?> <?= is_array($user[$key])?json_encode($user[$key]):$user[$key] ?>
</td> </td>
<?php endforeach; ?> <?php endforeach; ?>
<td class="px-6 py-4"> <td>
<button name="email" value="<?= $user['email'] ?>" hx-post="/admin/loginas/" class="px-4 py-1 text-sm text-indigo-600 bg-indigo-200 rounded-full">Login as this user</button> <button name="email" value="<?= $user['email'] ?>" hx-post="/admin/loginas/">Login</button>
</td> </td>
<td class="px-6 py-4"> <td>
<button name="email" value="<?= $user['email'] ?>" hx-post="/admin/edituser/" hx-target="#main" class="px-4 py-1 text-sm text-red-400 bg-red-200 rounded-full">Edit</button> <button name="email" value="<?= $user['email'] ?>" hx-post="/admin/edituser/" hx-target="#main">Edit</button>
</td> </td>
</tr> </tr>
<?php endforeach; ?> <?php endforeach; ?>
</tbody> </tbody>
</table> </table>
</div> </figure>
</div>
</div>
</div>

View File

@ -5,24 +5,23 @@
<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>Dogstats</title> <title>Dogstats</title>
<link href="/css/output.css" rel="stylesheet"> <link href="/css/animate.min.css" rel="stylesheet">
<link href="/css/fontawesome.min.css" rel="stylesheet"> <link href="/css/fontawesome.min.css" rel="stylesheet">
<link href="/css/flowbite.min.css" rel="stylesheet"> <link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="bg-white">
<?php include(ROOT."/templates/menu.html") ?> <?php include(ROOT."/templates/menu.html") ?>
<div id="main" hx-get="/" hx-trigger="load" hx-indicator="#spinner"> <main id="main" class="container" hx-get="/" hx-trigger="load" hx-indicator="#spinner">
<i id="spinner" class="fa-solid fa-spinner"></i> <i id="spinner" class="fa-solid fa-spinner"></i>
</div> </main>
</div>
<script src="/js/htmx.min.js"></script> <script src="/js/htmx.min.js"></script>
<script src="/js/flowbite.min.js"></script> <script src="/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@ -1,25 +1,27 @@
<header class="text-gray-600 body-font"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"> <div class="container-fluid">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"> <a class="navbar-brand" href="/home" hx-push-url="/home" hx-get="/home" hx-target="#main">
<img class="h-8 w-auto" src="/imgs/dogstats-50.png" alt=""> <img src="/imgs/dogstats-50.png" alt="Logo" width="50" height="50" class="d-inline-block align-text-top">
<span class="ml-3 text-xl">Dogstats</span> Dogstats
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center"> <span class="navbar-toggler-icon"></span>
<?php foreach(getMenu() as $item) : ?>
<?php if (count($item['submenu'])) : ?>
<button id="dropdownDefaultButton-<?= $item['url'] ?>" data-dropdown-toggle="dropdown-<?= $item['url'] ?>" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
<?= $item['text'] ?>
<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<div id="dropdown-<?= $item['url'] ?>" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton-<?= $item['url'] ?>"> <?php foreach(getMenu() as $item) : ?>
<li <?php if (count($item['submenu'])) : ?>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<?= $item['text']?>
</a>
<ul class="dropdown-menu">
<?php foreach($item['submenu'] as $sub) : ?> <?php foreach($item['submenu'] as $sub) : ?>
<li> <li>
<a href="<?= $sub['action'] ?>" hx-push-url="<?= $sub['action'] ?>" hx-get="<?= $sub['action'] ?>" hx-target="#main" class="<?= $sub['classes']?:'' ?> block px-4 py-2"> <a href="<?= $sub['action'] ?>" hx-push-url="<?= $sub['action'] ?>" hx-get="<?= $sub['action'] ?>" hx-target="#main" class="dropdown-item <?= $sub['classes']?:'' ?>">
<?php if($sub['icon']) : ?> <?php if($sub['icon']) : ?>
<i class="<?= $sub['icon'] ?>"></i> <i class="<?= $sub['icon'] ?>"></i>
<?php endif; ?> <?php endif; ?>
@ -29,14 +31,20 @@
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</div> </li>
<?php else : ?> <?php else : ?>
<a href="/<?= $item['url'] ?>" hx-push-url="/<?= $item['url'] ?>" hx-get="/<?= $item['url'] ?>" hx-target="#main" class="mr-5 hover:text-gray-900"><i class="<?= $item['image'] ?>"></i> <li class="nav-item">
<a class="nav-link" aria-current="page" href="/<?= $item['url'] ?>" hx-push-url="/<?= $item['url'] ?>" hx-get="/<?= $item['url'] ?>" hx-target="#main">
<i class="<?= $item['image'] ?>"></i>
<?= $item['text'] ?> <?= $item['text'] ?>
</a> </a>
</li>
<?php endif; ?> <?php endif; ?>
</li>
<?php endforeach; ?> <?php endforeach; ?>
</nav>
</div> </div>
</header> </div>
</nav>

View File

@ -1,4 +1,4 @@
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert"> <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 animate__animated animate__fadeInDown" role="alert">
<p class="font-bold"><?= $errorTitle ?></p> <p class="font-bold"><?= $errorTitle ?></p>
<p><?= $errorMessage ?></p> <p><?= $errorMessage ?></p>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4" role="alert"> <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 animate__animated animate__fadeInDown" role="alert">
<p class="font-bold"><?= $infoTitle ?></p> <p class="font-bold"><?= $infoTitle ?></p>
<p><?= $infoMessage ?></p> <p><?= $infoMessage ?></p>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert"> <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 animate__animated animate__fadeInDown" role="alert">
<p class="font-bold"><?= $title ?></p> <p class="font-bold"><?= $title ?></p>
<p><?= $message ?></p> <p><?= $message ?></p>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4" role="alert"> <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 animate__animated animate__fadeInDown" role="alert">
<p class="font-bold"><?= $successTitle ?></p> <p class="font-bold"><?= $successTitle ?></p>
<p><?= $successMessage ?></p> <p><?= $successMessage ?></p>
</div> </div>