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:
@@ -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>
|
||||||
|
|||||||
@@ -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">↻</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 ↓
|
:class="$store.digimarks.sort_title_asc && 'active'">a-z ↓
|
||||||
@@ -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 %}
|
||||||
|
|||||||
Reference in New Issue
Block a user