experiments/bees-knees
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enable toggling button to switch between originals/improvements

Browse source
This commit is contained in:
Marty Oehme 2025-06-08 21:29:22 +02:00
parent ba578b3c22
commit e5ab5dfc48
Signed by: Marty
GPG key ID: 4E535BC19C61886E
3 changed files with 33 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/style.css
View file

@ -8,6 +8,10 @@ body {
background: #f4f4f9;
}
.hidden {
display: none;
}
.card {
border: 1px solid #ccc;
padding: 10px;
@ -81,6 +85,10 @@ body {
padding: 5px;
}
.fab-options li.hidden {
display: none;
}
.fab-label {
padding: 2px 5px;
align-self: center;

20
templates/floating_button.html
View file

@ -1,23 +1,33 @@
<div class="fab-holder">
<div class="fab-holder" x-data="{ showing_improvements: true }">
<div class="main-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-info"></i>
</div>
</div>
<ul class="fab-options">
<li hx-get="/originals" hx-target="#content">
<li
hx-get="/originals"
hx-target="#content"
x-bind:class="showing_improvements ? '' : 'hidden'"
x-on:click="showing_improvements = ! showing_improvements"
>
<span class="fab-label">Show Originals</span>
<div class="option-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-file-alt"></i>
<i class="fas fa-frown"></i>
</div>
</div>
</li>
<li hx-get="/improvements" hx-target="#content">
<li
hx-get="/improvements"
hx-target="#content"
x-bind:class="showing_improvements ? 'hidden' : ''"
x-on:click="showing_improvements = ! showing_improvements"
>
<span class="fab-label">Show Improved</span>
<div class="option-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-file"></i>
<i class="fas fa-smile"></i>
</div>
</div>
</li>

5
templates/index.html
View file

@ -14,12 +14,15 @@
<body>
<h1>The Pollen Prophet</h1>
<h2>Making funny since 2025 what ought not bee.</h2>
<div class="article" x-data="{ showing_improvements: true }">
<div
hx-get="/improvements"
hx-target="#content"
hx-trigger="load"
hx-trigger="revealed"
id="content"
:class="showing_improvements ? '' : 'hidden'"
></div>
{% include "floating_button.html" %}
</div>
</body>
</html>