extensive refactor push to continue to liberate applets from dashboard; new _applets.html & .gear.html template partials for use across all -board views; all applets.html sections have been liberated into their own _applet-<applet-name>.html template partials in their respective templates/apps/*board/_partials/ dirs; gameboard.html & home.html greatly simplified; .gear-btn describes gear menu now, #id_<*board nickname>*gear IDs abandoned; as such, .gear-btn styling moved from _dashboard.scss to _base.scss; new applets.js file contains related initGearMenus scripts, which no longer waits for window reload; new apps.applets.utils file manages applet_context() fn; new gameboard.js file but currently empty (false start); updates across all sorts of ITs & dash- & gameboard FTs
This commit is contained in:
Disco DeDisco
17
src/templates/apps/dashboard/_partials/_applet-my-lists.html
Normal file
17
src/templates/apps/dashboard/_partials/_applet-my-lists.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<section
|
||||
id="id_applet_my_lists"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<a href="{% url 'my_lists' user.id %}" class="my-lists-main">My lists:</a>
|
||||
<div class="my-lists-container">
|
||||
<ul>
|
||||
{% for list in recent_lists %}
|
||||
<li>
|
||||
<a href="{{ list.get_absolute_url }}">{{ list.name }}</a>
|
||||
</li>
|
||||
{% empty %}
|
||||
<li>No lists yet.</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,8 @@
|
||||
<section
|
||||
id="id_applet_new_list"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<h2>Start a new to-do list</h2>
|
||||
{% url "new_list" as form_action %}
|
||||
{% include "apps/dashboard/_partials/_form.html" with form=form form_action=form_action %}
|
||||
</section>
|
||||
21
src/templates/apps/dashboard/_partials/_applet-palette.html
Normal file
21
src/templates/apps/dashboard/_partials/_applet-palette.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<section
|
||||
id="id_applet_palette"
|
||||
class="palette"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<div class="palette-scroll">
|
||||
{% for palette in palettes %}
|
||||
<div class="palette-item">
|
||||
<div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
|
||||
{% if not palette.locked %}
|
||||
<form method="POST" action="{% url "set_palette" %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span class="btn btn-disabled">×</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
23
src/templates/apps/dashboard/_partials/_applet-username.html
Normal file
23
src/templates/apps/dashboard/_partials/_applet-username.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<section
|
||||
id="id_applet_username"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<form method="POST" action="{% url "set_profile" %}">
|
||||
{% csrf_token %}
|
||||
<div class="username-field">
|
||||
<span class="username-at">@</span>
|
||||
<input
|
||||
id="id_new_username"
|
||||
name="username"
|
||||
required
|
||||
value="{{ user.username|default:'' }}"
|
||||
autocomplete="off"
|
||||
placeholder="username"
|
||||
data-original="{{ user.username|default:'' }}"
|
||||
oninput="this.closest('form').querySelector('.save-btn').hidden = (this.value === this.dataset.original)"
|
||||
onblur="this.scrollLeft = 0"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-confirm save-btn" hidden>OK</button>
|
||||
</form>
|
||||
</section>
|
||||
@@ -0,0 +1,7 @@
|
||||
<section
|
||||
id="id_applet_wallet"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<span>Writs: {{ user.wallet.writs }}</span>
|
||||
<a href="{% url "wallet" %}" class="wallet-manage-link">Manage Wallet</a>
|
||||
</section>
|
||||
@@ -1,10 +1,11 @@
|
||||
{% load lyric_extras %}
|
||||
|
||||
<div id="id_applets_container">
|
||||
<div id="id_applet_menu" style="display:none;">
|
||||
<div id="id_dash_applet_menu" style="display:none;">
|
||||
<form
|
||||
hx-post="{% url "toggle_applets" %}"
|
||||
hx-target="#id_applets_container"
|
||||
hx-swap="outerHTML"
|
||||
hx-post="{% url "toggle_applets" %}"
|
||||
hx-target="#id_applets_container"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
{% csrf_token %}
|
||||
{% for entry in applets %}
|
||||
@@ -20,95 +21,9 @@
|
||||
{% endfor %}
|
||||
<div class="menu-btns">
|
||||
<button type="submit" class="btn btn-confirm">OK</button>
|
||||
<button type="button" id="id_applet_menu_cancel" class="btn btn-cancel">NVM</button>
|
||||
<button type="button" id="id_applet_menu_cancel" class="btn btn-cancel applet-menu-cancel">NVM</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% for entry in applets %}
|
||||
{% if entry.visible %}
|
||||
{% if entry.applet.slug == "wallet" %}
|
||||
<section
|
||||
id="id_applet_wallet"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<span>Writs: {{ user.wallet.writs }}</span>
|
||||
<a href="{% url "wallet" %}" class="wallet-manage-link">Manage Wallet</a>
|
||||
</section>
|
||||
{% elif entry.applet.slug == "new-list" %}
|
||||
<section
|
||||
id="id_applet_new_list"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<h2>Start a new to-do list</h2>
|
||||
{% url "new_list" as form_action %}
|
||||
{% include "apps/dashboard/_partials/_form.html" with form=form form_action=form_action %}
|
||||
</section>
|
||||
{% elif entry.applet.slug == "my-lists" %}
|
||||
<section
|
||||
id="id_applet_my_lists"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<a href="{% url 'my_lists' user.id %}" class="my-lists-main">My lists:</a>
|
||||
<div class="my-lists-container">
|
||||
<ul>
|
||||
{% for list in recent_lists %}
|
||||
<li>
|
||||
<a href="{{ list.get_absolute_url }}">{{ list.name }}</a>
|
||||
</li>
|
||||
{% empty %}
|
||||
<li>No lists yet.</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{% elif entry.applet.slug == "username" %}
|
||||
<section
|
||||
id="id_applet_username"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<form method="POST" action="{% url "set_profile" %}">
|
||||
{% csrf_token %}
|
||||
<div class="username-field">
|
||||
<span class="username-at">@</span>
|
||||
<input
|
||||
id="id_new_username"
|
||||
name="username"
|
||||
required
|
||||
value="{{ user.username|default:'' }}"
|
||||
autocomplete="off"
|
||||
placeholder="username"
|
||||
data-original="{{ user.username|default:'' }}"
|
||||
oninput="this.closest('form').querySelector('.save-btn').hidden = (this.value === this.dataset.original)"
|
||||
onblur="this.scrollLeft = 0"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-confirm save-btn" hidden>OK</button>
|
||||
</form>
|
||||
</section>
|
||||
{% elif entry.applet.slug == "palette" %}
|
||||
<section
|
||||
id="id_applet_palette"
|
||||
class="palette"
|
||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||
>
|
||||
<div class="palette-scroll">
|
||||
{% for palette in palettes %}
|
||||
<div class="palette-item">
|
||||
<div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
|
||||
{% if not palette.locked %}
|
||||
<form method="POST" action="{% url "set_palette" %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span class="btn btn-disabled">×</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "apps/applets/_partials/_applets.html" %}
|
||||
</div>
|
||||
@@ -2,6 +2,5 @@
|
||||
<script>
|
||||
window.onload = () => {
|
||||
initialize("#id_text");
|
||||
initGearMenu();
|
||||
};
|
||||
</script>
|
||||
@@ -11,9 +11,7 @@
|
||||
{% block content %}
|
||||
{% if user.is_authenticated %}
|
||||
<div id="id_dash_content">
|
||||
<button id="id_dash_gear">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
</button>
|
||||
{% include "apps/applets/_partials/_gear.html" with menu_id="id_dash_applet_menu" %}
|
||||
{% include "apps/dashboard/_partials/_applets.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user