diff --git a/src/components/ZoteroQueryComponent.vue b/src/components/ZoteroQueryComponent.vue index 696a3e1303beb65a9230cc260f8b236892cf9bfa..574c62b7fd2d24221e6054d0fa1e72ac78852888 100644 --- a/src/components/ZoteroQueryComponent.vue +++ b/src/components/ZoteroQueryComponent.vue @@ -1,6 +1,6 @@ <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()">ᐸ</a> + <div class="zotero-pager">Page + <a role="button" class="next-prev-btn" :class="{'active': currentPage !== 1}" @click="previousPage()">ᐸ</a> <span>{{currentPage}}/{{getTotalPages}}</span> - <a role="button" class="next-prev-btn" @click="nextPage()">ᐳ</a> + <a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">ᐳ</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>