1
0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-06 23:05:10 +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> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body> <body>
{% block pagecontent %} {% block pagecontent %}
<div id="container" x-data=""> <div id="container" x-data="">
@@ -27,7 +26,6 @@
<!-- Scripts --> <!-- Scripts -->
<script src="/static/js/digimarks.js?v={{ version }}"></script> <script src="/static/js/digimarks.js?v={{ version }}"></script>
{% block extrajs %}{% endblock %} {% block extrajs %}{% endblock %}
</body> </body>

View File

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