1
0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-06 22:05:09 +01:00

Better (semantic) HTML structure, load indicator in nav

This commit is contained in:
2025-05-06 16:59:58 +02:00
parent 5d71250408
commit d28228fc03
2 changed files with 53 additions and 50 deletions

View File

@@ -17,7 +17,6 @@
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
{% block pagecontent %}
<div id="container" x-data="">
@@ -27,7 +26,6 @@
<!-- Scripts -->
<script src="/static/js/digimarks.js?v={{ version }}"></script>
{% block extrajs %}{% endblock %}
</body>

View File

@@ -2,9 +2,11 @@
{% block title %}Bookmarks{% endblock %}
{% block pageheader %}Bookmarks{% endblock %}
{% block pagecontent %}
<article
x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
x-data="">
<header>
<nav class="menu">
<ul>
<li>digimarks</li>
@@ -16,17 +18,16 @@
<li>
<button x-data>add bookmark</button>
</li>
<li><input x-model="$store.digimarks.search" placeholder="Search..."></li>
<li x-show="$store.digimarks.loading">&orarr;</li>
</ul>
<input x-model="$store.digimarks.search" placeholder="Search...">
</nav>
</header>
<main x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
x-data="">
<p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
<div x-show="$store.digimarks.loading">Loading...</div>
<main>
<section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition.opacity>
<h1 x-bind:title="$store.digimarks.userKey">Bookmarks</h1>
<section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition>
<p>
<button @click="$store.digimarks.sortAlphabetically()"
:class="$store.digimarks.sort_title_asc && 'active'">a-z &darr;
@@ -49,7 +50,9 @@
</ul>
</section>
<section x-cloak x-show="$store.digimarks.show_tags" x-transition>
<section x-cloak x-show="$store.digimarks.show_tags" x-transition.opacity>
<h1>Tags</h1>
<ul>
<template x-for="tag in $store.digimarks.filteredTags" :key="tag">
<li x-text="tag"></li>
@@ -57,4 +60,6 @@
</ul>
</section>
</main>
</article>
{% endblock %}