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:
@@ -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>
|
||||
|
||||
@@ -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">↻</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 ↓
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user