diginaut/digimarks
1
0
Fork 0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-06 22:05:09 +01:00
Code Issues Releases Wiki Activity

Better (semantic) HTML structure, load indicator in nav

Browse Source
This commit is contained in:
Michiel Scholten
2025-05-06 16:59:58 +02:00
parent 5d71250408
commit d28228fc03
2 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/digimarks/templates/base.html
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>

101
src/digimarks/templates/user_index.html
View File

@@ -2,59 +2,64 @@
{% 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">
<ul>
<li>digimarks</li>
<li>
<button x-data @click="$store.digimarks.toggleTagPage()"
:class="$store.digimarks.show_tags && 'active'">tags
</button>
</li>
<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>
</nav>
</header>
<nav class="menu"> <main>
<ul> <section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition.opacity>
<li>digimarks</li> <h1 x-bind:title="$store.digimarks.userKey">Bookmarks</h1>
<li>
<button x-data @click="$store.digimarks.toggleTagPage()" <p>
:class="$store.digimarks.show_tags && 'active'">tags <button @click="$store.digimarks.sortAlphabetically()"
:class="$store.digimarks.sort_title_asc && 'active'">a-z &darr;
</button> </button>
</li> <button @click="$store.digimarks.sortAlphabetically('desc')"
<li> :class="$store.digimarks.sort_title_desc && 'active'">z-a &uarr;
<button x-data>add bookmark</button> </button>
</li> <button @click="$store.digimarks.sortCreated()"
</ul> :class="$store.digimarks.sort_created_asc && 'active'">date &darr;
<input x-model="$store.digimarks.search" placeholder="Search..."> </button>
</nav> <button @click="$store.digimarks.sortCreated('desc')"
</header> :class="$store.digimarks.sort_created_desc && 'active'">date &uarr;
<main x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()" </button>
x-data=""> </p>
<p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p> <ul x-cloak>
<div x-show="$store.digimarks.loading">Loading...</div> <template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id">
<li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
</template>
</ul>
</section>
<section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition> <section x-cloak x-show="$store.digimarks.show_tags" x-transition.opacity>
<p> <h1>Tags</h1>
<button @click="$store.digimarks.sortAlphabetically()"
:class="$store.digimarks.sort_title_asc && 'active'">a-z &darr;
</button>
<button @click="$store.digimarks.sortAlphabetically('desc')"
:class="$store.digimarks.sort_title_desc && 'active'">z-a &uarr;
</button>
<button @click="$store.digimarks.sortCreated()"
:class="$store.digimarks.sort_created_asc && 'active'">date &darr;
</button>
<button @click="$store.digimarks.sortCreated('desc')"
:class="$store.digimarks.sort_created_desc && 'active'">date &uarr;
</button>
</p>
<ul x-cloak> <ul>
<template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id"> <template x-for="tag in $store.digimarks.filteredTags" :key="tag">
<li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li> <li x-text="tag"></li>
</template> </template>
</ul> </ul>
</section> </section>
</main>
<section x-cloak x-show="$store.digimarks.show_tags" x-transition> </article>
<ul>
<template x-for="tag in $store.digimarks.filteredTags" :key="tag">
<li x-text="tag"></li>
</template>
</ul>
</section>
</main>
{% endblock %} {% endblock %}