affichage résultats : titre, clé, type ouvrage

src/components/ZoteroQueryComponent.vue

 <template>
     <div class="zotero-query-component">
-        <h2>Zotero Client <a role="button" @click="isConfigVisible=!isConfigVisible">⚙</a></h2>
+        <h2>Zotero Client <a role="button" @click="isConfigVisible=!isConfigVisible" title="Afficher/masquer la configuration">⚙</a></h2>
         <div class="zotero-config-pane" v-if="isConfigVisible">
             <div>
                 <label>Type de collection</label>
@@ -31,15 +31,19 @@
 
         <template v-if="entries">
             <h3>Résultats <span class="results-count">{{nbResults}}</span></h3>
-            <div class="zotero-pager">
-                <a role="button" class="next-prev-btn" @click="previousPage()">&#5176;</a>
+            <div class="zotero-pager">Page 
+                <a role="button" class="next-prev-btn" :class="{'active': currentPage !== 1}" @click="previousPage()">&#5176;</a>
                 <span>{{currentPage}}/{{getTotalPages}}</span>
-                <a role="button" class="next-prev-btn" @click="nextPage()">&#5171;</a>
+                <a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">&#5171;</a>
             </div>
             <div class="zotero-entries">
                 <ul>
-                    <li v-for="entry in entries" :key="'entry-' + entry.key">
-                        {{entry.key}}
+                    <li class="zotero-entry" v-for="entry in entries" :key="'entry-' + entry.key">
+                        <ul>
+                            <li class="zotero-title">{{entry.data.title}}</li>
+                            <li class="zotero-type">{{entry.data.itemType}}</li>
+                            <li class="zotero-item-key">{{entry.key}}</li>
+                        </ul>
                     </li>
                 </ul>
             </div>
@@ -60,7 +64,7 @@
                 groupOrUserID: '427575',
                 entries: null,
                 isFetching: false,
-                isConfigVisible: true,
+                isConfigVisible: false,
                 start:0,
                 currentPage:1,
                 pageLength: 10,
@@ -117,7 +121,10 @@
         height: var(--input-height);
     }
 
-    h1 {}
+    h2 a:hover {
+        color : darkgray;
+    }
+
     a[role=button], button{
         cursor: pointer;
     }
@@ -135,6 +142,8 @@
 
     .zotero-entries ul{
         list-style-type: square;
+        margin-bottom : 15px;
+        padding-left: 15px;
     }
 
     .results-count{
@@ -151,11 +160,34 @@
         background-color: gainsboro;
         padding:15px;
         margin-bottom: 15px;
+        font-size: 0.8em;
     }
 
     .zotero-query-btn{
         margin-left: 15px;
     }
 
+    .next-prev-btn {
+        visibility: hidden;
+    }
+    .next-prev-btn.active{
+        visibility: visible;
+    }
+
+    .zotero-entry ul{
+        list-style-type: none;
+    }
+
+    .zotero-type{
+        color: #888;
+    }
+
+    .zotero-title{
+        font-style: italic;
+    }
+
+    .zotero-item-key{
+        font-size: 0.7em;
+    }
 
 </style>