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; background: #f4f4f9;
} }
.hidden {
display: none;
}
.card { .card {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
@ -81,6 +85,10 @@ body {
padding: 5px; padding: 5px;
} }
.fab-options li.hidden {
display: none;
}
.fab-label { .fab-label {
padding: 2px 5px; padding: 2px 5px;
align-self: center; 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="main-btn fab-icon-holder">
<div class="icon"> <div class="icon">
<i class="fas fa-info"></i> <i class="fas fa-info"></i>
</div> </div>
</div> </div>
<ul class="fab-options"> <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> <span class="fab-label">Show Originals</span>
<div class="option-btn fab-icon-holder"> <div class="option-btn fab-icon-holder">
<div class="icon"> <div class="icon">
<i class="fas fa-file-alt"></i> <i class="fas fa-frown"></i>
</div> </div>
</div> </div>
</li> </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> <span class="fab-label">Show Improved</span>
<div class="option-btn fab-icon-holder"> <div class="option-btn fab-icon-holder">
<div class="icon"> <div class="icon">
<i class="fas fa-file"></i> <i class="fas fa-smile"></i>
</div> </div>
</div> </div>
</li> </li>

17
templates/index.html
View file

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