Show bookmarks in a grid

src/digimarks/static/css/digimarks.css

@@ -15,3 +15,18 @@ button:hover {
 button:focus {
     border-color: #d57803;
 }
+
+.cards {
+    grid-column-gap: 1rem;
+    grid-row-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+.card {
+    background-color: #fff;
+    border: 1px solid #d5d9d9;
+    border-radius: 8px;
+    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
+    /*margin: 1em;*/
+    padding: 1em;
+}

src/digimarks/static/css/digui.css

@@ -3,6 +3,8 @@
  * v0.0.1
  */
 
+/* Main structure */
+
 body {
     height: 125vh;
     font-family: sans-serif;
@@ -45,6 +47,7 @@ header li a {
     background-color: #cccccc;
 }
 
+/* Buttons */
 button {
     background-color: #fff;
     border: 1px solid #d5d9d9;
@@ -76,3 +79,12 @@ button:focus {
     box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
     outline: 0;
 }
+
+/* Cards */
+.cards {
+    display: grid;
+}
+
+.card {
+    display: inline-grid;
+}

src/digimarks/static/js/digimarks.js

@@ -10,6 +10,8 @@ document.addEventListener('alpine:init', () => {
         tags: [],
 
         show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
+        show_bookmarks_list: Alpine.$persist(true).as('show_bookmarks_list'),
+        show_bookmarks_cards: Alpine.$persist(false).as('show_bookmarks_cards'),
         show_tags: Alpine.$persist(false).as('show_tags'),
 
         /* Loading indicator */
@@ -36,6 +38,7 @@ document.addEventListener('alpine:init', () => {
                 // this.countDownTimer();
             }, 1000);
         },
+
         async loadCache() {
             if (this.userKey in this.cache) {
                 console.log('Loading bookmarks from cache for user "' + this.userKey + '"');
@@ -77,6 +80,7 @@ document.addEventListener('alpine:init', () => {
 
             this.loading = false;
         },
+
         get filteredBookmarks() {
             // return this.cache[this.userKey]['bookmarks'].filter(
             //     i => i.title.includes(this.search)
@@ -91,6 +95,7 @@ document.addEventListener('alpine:init', () => {
                 i => i.match(new RegExp(this.search, "i"))
             )
         },
+
         async sortAlphabetically(order = 'asc') {
             this.sort_created_asc = false;
             this.sort_created_desc = false;
@@ -117,19 +122,15 @@ document.addEventListener('alpine:init', () => {
                 this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
             }
         },
+
         async toggleTagPage() {
             console.log('Toggle tag page');
             this.show_bookmarks = !this.show_bookmarks;
             this.show_tags = !this.show_bookmarks;
-            /*
-            if (this.show_bookmarks) {
-                this.show_tags = true;
-                this.show_bookmarks = false;
-            } else {
-                this.show_bookmarks = true;
-                this.show_tags = false;
-            }
-             */
+        },
+        async toggleListOrGrid() {
+            this.show_bookmarks_list = !this.show_bookmarks_list;
+            this.show_bookmarks_cards = !this.show_bookmarks_list;
         }
     })
 });

src/digimarks/templates/user_index.html

@@ -41,13 +41,26 @@
                     <button @click="$store.digimarks.sortCreated('desc')"
                             :class="$store.digimarks.sort_created_desc && 'active'">date &uarr;
                     </button>
+                    <button @click="$store.digimarks.toggleListOrGrid()"
+                            :class="$store.digimarks.show_bookmarks_cards && 'active'">list or grid
+                    </button>
                 </p>
 
-                <ul x-cloak>
+                <ul x-cloak x-show="$store.digimarks.show_bookmarks_list">
                     <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 x-cloak x-show="$store.digimarks.show_bookmarks_cards" class="cards">
+                    <template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id">
+                        <div class="card">
+                            <div x-show="bookmark.starred">*</div>
+{#                            <img x-show="bookmark.favicon" x-bind:src="'/static/favicons/' + bookmark.favicon">#}
+                            <a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a>
+                        </div>
+                    </template>
+                </section>
             </section>
 
             <section x-cloak x-show="$store.digimarks.show_tags" x-transition.opacity>