Bundle of a11y improvements based on latest tests.
This commit is contained in:
mateuswetah
parent
931612237d
commit
590a5a54d9
|
|
@ -24,6 +24,7 @@
|
|||
letter-spacing: normal !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-wrap: normal;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
class="is-hidden-mobile"
|
||||
id="menu-compress-button"
|
||||
:style="{ top: menuCompressButtonTop }"
|
||||
@click="isMenuCompressed = !isMenuCompressed">
|
||||
@click="isMenuCompressed = !isMenuCompressed"
|
||||
:aria-label="$i18n.get('label_shrink_menu')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_shrink_menu'),
|
||||
|
|
|
|||
|
|
@ -184,12 +184,17 @@
|
|||
<b-checkbox
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
:value="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)"/>
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</b-checkbox>
|
||||
<b-radio
|
||||
v-else
|
||||
name="item-single-selection"
|
||||
:native-value="item.id"
|
||||
v-model="singleItemSelection"/>
|
||||
v-model="singleItemSelection"
|
||||
:aria-label="$i18n.get('label_select_item')">
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</b-radio>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
|
|
@ -337,8 +342,9 @@
|
|||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -462,12 +468,16 @@
|
|||
<b-checkbox
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
:value="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)"/>
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</b-checkbox>
|
||||
<b-radio
|
||||
v-else
|
||||
name="item-single-selection"
|
||||
:native-value="item.id"
|
||||
v-model="singleItemSelection"/>
|
||||
v-model="singleItemSelection">
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</b-radio>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
|
|
@ -667,8 +677,9 @@
|
|||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -882,12 +893,13 @@
|
|||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody role="list">
|
||||
<tr
|
||||
:class="{
|
||||
'selected-row': getSelectedItemChecked(item.id) == true,
|
||||
'highlighted-item': highlightedItem == item.id
|
||||
}"
|
||||
role="listitem"
|
||||
:key="index"
|
||||
:data-tainacan-item-id="item.id"
|
||||
v-for="(item, index) of items">
|
||||
|
|
@ -900,12 +912,16 @@
|
|||
<b-checkbox
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
:value="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)"/>
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</b-checkbox>
|
||||
<b-radio
|
||||
v-else
|
||||
name="item-single-selection"
|
||||
:native-value="item.id"
|
||||
v-model="singleItemSelection"/>
|
||||
v-model="singleItemSelection">
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</b-radio>
|
||||
</td>
|
||||
<td
|
||||
v-if="isOnAllItemsTabs"
|
||||
|
|
@ -1141,15 +1157,18 @@
|
|||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
type="checkbox"
|
||||
:checked="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
@input="setSelectedItemChecked(item.id)"
|
||||
:aria-label="$i18n.get('label_select_item')">
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
v-model="singleItemSelection"
|
||||
:aria-label="$i18n.get('label_select_item')">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
class="repository-label">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getCollectionsPath()">
|
||||
:to="$routerHelper.getCollectionsPath()"
|
||||
:aria-label="$i18n.get('repository')">
|
||||
<span v-if="!isMenuCompressed">{{ $i18n.get('repository') }}</span>
|
||||
<span
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<div class="back-button is-hidden-mobile">
|
||||
<button
|
||||
@click="$router.go(-1)"
|
||||
class="button is-turquoise4">
|
||||
class="button is-turquoise4"
|
||||
:aria-label="$i18n.get('back')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-previous"/>
|
||||
</span>
|
||||
|
|
@ -17,7 +18,8 @@
|
|||
<div class="back-button is-hidden-tablet level-item">
|
||||
<button
|
||||
@click="$router.go(-1)"
|
||||
class="button is-turquoise4">
|
||||
class="button is-turquoise4"
|
||||
:aria-label="$i18n.get('back')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-previous"/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,14 @@
|
|||
class="level-item home-area">
|
||||
<router-link
|
||||
tag="a"
|
||||
to="/">
|
||||
to="/"
|
||||
:aria-label="$i18n.get('label_plugin_home_page')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_plugin_home_page'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
classes: ['tainacan-tooltip', 'repository-header-tooltips', 'tooltip']
|
||||
classes: ['tainacan-tooltip', 'repository-header-tooltips', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-home has-text-blue5"/>
|
||||
|
|
@ -24,7 +25,8 @@
|
|||
<div class="level-item logo-area">
|
||||
<router-link
|
||||
tag="a"
|
||||
to="/">
|
||||
to="/"
|
||||
:aria-label="$i18n.get('label_plugin_home_page')">
|
||||
<img
|
||||
class="tainacan-logo"
|
||||
alt="Tainacan Logo"
|
||||
|
|
@ -38,7 +40,8 @@
|
|||
class="is-hidden-tablet">
|
||||
<button
|
||||
@click="$router.push($routerHelper.getItemsPath())"
|
||||
class="button is-small is-white level-item">
|
||||
class="button is-small is-white level-item"
|
||||
:aria-label="$i18n.get('search')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-search"/>
|
||||
</span>
|
||||
|
|
@ -70,7 +73,8 @@
|
|||
<button
|
||||
v-if="!$adminOptions.hideTainacanHeaderProcessesPopup"
|
||||
@click="showProcesses = !showProcesses"
|
||||
class="button is-small is-white level-item">
|
||||
class="button is-small is-white level-item"
|
||||
:aria-label="$i18n.get('processes')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('processes'),
|
||||
|
|
@ -87,7 +91,8 @@
|
|||
@closeProcessesPopup="showProcesses = false"/>
|
||||
<a
|
||||
class="level-item"
|
||||
:href="wordpressAdmin">
|
||||
:href="wordpressAdmin"
|
||||
:aria-label="$i18n.get('label_wordpress_admin_page')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_wordpress_admin_page'),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
class="back-button is-hidden-mobile">
|
||||
<button
|
||||
@click="$router.go(-1)"
|
||||
class="button is-turquoise4">
|
||||
class="button is-turquoise4"
|
||||
:aria-label="$i18n.get('back')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-previous"/>
|
||||
</span>
|
||||
|
|
@ -60,7 +61,8 @@
|
|||
@click="openAvailableExportersModal"
|
||||
class="button"
|
||||
id="exporter-collection-button"
|
||||
v-if="!isRepositoryLevel && !$adminOptions.hideRepositorySubheaderExportButton">
|
||||
v-if="!isRepositoryLevel && !$adminOptions.hideRepositorySubheaderExportButton"
|
||||
:aria-label="$i18n.get('exporters')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-export"/>
|
||||
</span>
|
||||
|
|
@ -82,11 +84,11 @@
|
|||
target="_blank"
|
||||
v-if="!isRepositoryLevel && collection && collection.url && !$adminOptions.hideRepositorySubheaderViewCollectionButton"
|
||||
class="button"
|
||||
id="view-collection-button">
|
||||
id="view-collection-button"
|
||||
:aria-label="$i18n.get('label_view_collection_on_website')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
|
||||
</span>
|
||||
<!-- {{ $i18n.get('label_view_collection_on_website') }} -->
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -105,16 +107,15 @@
|
|||
target="_blank"
|
||||
v-if="isRepositoryLevel && !$adminOptions.hideRepositorySubheaderViewCollectionsButton"
|
||||
class="button"
|
||||
id="view-repository-button">
|
||||
id="view-repository-button"
|
||||
:aria-label="$i18n.get('label_view_repository')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
|
||||
</span>
|
||||
<!-- {{ $i18n.get('label_view_collection_on_website') }} -->
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,12 @@
|
|||
:class="{ 'tainacan-modal-content': isModal }"
|
||||
:tabindex="isModal ? -1 : 0"
|
||||
:aria-modal="isModal"
|
||||
:aria-labelledby="'checkbox-radio-filter--title-' + filter.id"
|
||||
ref="CheckboxRadioFilterInput">
|
||||
<header
|
||||
v-if="isModal"
|
||||
class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
|
||||
<h2 :id="'checkbox-radio-filter--title-' + filter.id">{{ $i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
|
||||
<hr>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<b-select
|
||||
:loading="isLoadingMetadata"
|
||||
:placeholder="$i18n.get('instruction_select_a_metadatum')"
|
||||
:aria-label="$i18n.get('instruction_select_a_metadatum')"
|
||||
:disabled="advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index]"
|
||||
:value="(advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index] ) ? advancedSearchQuery[searchCriterion.type][searchCriterion.index].key : null"
|
||||
@input="addMetadatumToAdvancedSearchQuery(
|
||||
|
|
@ -61,7 +62,9 @@
|
|||
:loading="isLoadingMetadata"
|
||||
v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]"
|
||||
@input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
|
||||
:value="advancedSearchQuery.metaquery[searchCriterion.index].compare">
|
||||
:value="advancedSearchQuery.metaquery[searchCriterion.index].compare"
|
||||
:placeholder="$i18n.get('label_criterion_to_compare')"
|
||||
:aria-label="$i18n.get('label_criterion_to_compare')">
|
||||
<option
|
||||
v-for="(comparator, key) in getComparators(searchCriterion)"
|
||||
:key="key"
|
||||
|
|
@ -72,7 +75,9 @@
|
|||
:loading="isLoadingMetadata"
|
||||
v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
|
||||
@input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
|
||||
:value="advancedSearchQuery.taxquery[searchCriterion.index].operator">
|
||||
:value="advancedSearchQuery.taxquery[searchCriterion.index].operator"
|
||||
:placeholder="$i18n.get('label_criterion_to_compare')"
|
||||
:aria-label="$i18n.get('label_criterion_to_compare')">
|
||||
<option
|
||||
v-for="(comparator, key) in getComparators(searchCriterion)"
|
||||
:key="key"
|
||||
|
|
@ -82,7 +87,8 @@
|
|||
<b-input
|
||||
v-else
|
||||
type="text"
|
||||
disabled />
|
||||
disabled
|
||||
:aria-label="$i18n.get('label_disabled')" />
|
||||
</b-field>
|
||||
|
||||
<!-- Inputs -->
|
||||
|
|
@ -93,6 +99,8 @@
|
|||
step="any"
|
||||
@input="addValueToAdvancedSearchQuery($event, searchCriterion)"
|
||||
:value="advancedSearchQuery.metaquery[searchCriterion.index].value"
|
||||
:placeholder="$i18n.get('label_string_to_search_for')"
|
||||
:aria-label="$i18n.get('label_string_to_search_for')"
|
||||
/>
|
||||
<input
|
||||
v-else-if="searchCriterion.type == 'metaquery' && getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'date'"
|
||||
|
|
@ -101,23 +109,28 @@
|
|||
v-mask="dateMask"
|
||||
@input="addValueToAdvancedSearchQuery($event.target.value, searchCriterion)"
|
||||
:placeholder="dateFormat"
|
||||
type="text" >
|
||||
type="text"
|
||||
:aria-label="$i18n.get('label_date_to_search_for')" >
|
||||
<b-input
|
||||
v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
|
||||
:value="advancedSearchQuery.taxquery[searchCriterion.index].terms"
|
||||
@input="addValueToAdvancedSearchQuery($event, searchCriterion)"
|
||||
type="text" />
|
||||
type="text"
|
||||
:placeholder="$i18n.get('label_number_to_search_for')"
|
||||
:aria-label="$i18n.get('label_number_to_search_for')" />
|
||||
<b-input
|
||||
v-else
|
||||
type="text"
|
||||
disabled />
|
||||
disabled
|
||||
:aria-label="$i18n.get('label_disabled')" />
|
||||
</b-field>
|
||||
|
||||
<div class="field">
|
||||
<button
|
||||
@click.prevent="removeCriterion(searchCriterion)"
|
||||
class="button is-white is-pulled-right has-text-secondary"
|
||||
type="button">
|
||||
type="button"
|
||||
:aria-label="$i18n.get('remove_search_criterion')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('remove_search_criterion'),
|
||||
|
|
@ -135,7 +148,9 @@
|
|||
|
||||
<!-- Add button -->
|
||||
<div class="add-link-advanced-search">
|
||||
<a @click="addSearchCriteria">
|
||||
<a
|
||||
role="button"
|
||||
@click="addSearchCriteria">
|
||||
<span class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-add"/>
|
||||
</span>
|
||||
|
|
@ -145,6 +160,7 @@
|
|||
}}
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
v-if="Object.keys(advancedSearchQuery.taxquery).length > 0 || Object.keys(advancedSearchQuery.metaquery).length > 0"
|
||||
@click="clearSearch();">
|
||||
<span class="icon">
|
||||
|
|
@ -168,6 +184,7 @@
|
|||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
aria-controls="items-list-results"
|
||||
type="submit"
|
||||
:disabled="!hasUpdatedSearch"
|
||||
@click.prevent="performAdvancedSearch"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<aside :aria-busy="isLoadingFilters">
|
||||
<aside
|
||||
aria-labelledby="filters-label-landmark"
|
||||
:aria-busy="isLoadingFilters">
|
||||
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
|
|
|
|||
|
|
@ -13,18 +13,17 @@
|
|||
:bread-crumb-items="[{ path: '', label: this.$i18n.get('items') }]"/>
|
||||
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<h3
|
||||
id="search-control-landmark"
|
||||
class="sr-only">
|
||||
{{ $i18n.get('label_sort_visualization') }}
|
||||
</h3>
|
||||
<div
|
||||
aria-labelledby="search-control-landmark"
|
||||
role="region"
|
||||
ref="search-control"
|
||||
class="search-control"
|
||||
:style="( $adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || $adminOptions.itemsSearchSelectionMode ) ? '--tainacan-container-padding: 6px;' : ''">
|
||||
|
||||
<h3
|
||||
id="search-control-landmark"
|
||||
class="sr-only">
|
||||
{{ $i18n.get('label_sort_visualization') }}
|
||||
</h3>
|
||||
<!-- <b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingMetadata"/> -->
|
||||
|
|
@ -432,7 +431,6 @@
|
|||
<!-- SIDEBAR WITH FILTERS -->
|
||||
<b-modal
|
||||
role="region"
|
||||
aria-labelledby="filters-label-landmark"
|
||||
id="filters-modal"
|
||||
ref="filters-modal"
|
||||
:active.sync="isFiltersModalActive"
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@
|
|||
|
||||
&:hover {
|
||||
background-color: var(--tainacan-item-hover-background-color) !important;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.selected-list-item {
|
||||
background-color: var(--tainacan-turquoise1);
|
||||
|
|
|
|||
|
|
@ -31,100 +31,83 @@
|
|||
role="list"
|
||||
v-if="!isLoading && items.length > 0"
|
||||
class="tainacan-cards-container">
|
||||
<!-- <div> -->
|
||||
<a
|
||||
<div
|
||||
role="listitem"
|
||||
:key="index"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:data-tainacan-item-id="item.id"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-card"
|
||||
:href="getItemLink(item.url, index)">
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.title != undefined ? item.title : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div
|
||||
v-if="!shouldHideItemsThumbnail"
|
||||
class="card-thumbnail">
|
||||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="list-metadata media-body">
|
||||
<!-- Description -->
|
||||
v-for="(item, index) of items">
|
||||
<a
|
||||
href="getItemLink(item.url, index)"
|
||||
class="tainacan-card">
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`,
|
||||
content: item.title != undefined ? item.title : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
class="metadata-description"
|
||||
v-html="item.description != undefined && item.description != '' ? getLimitedDescription(item.description) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`" />
|
||||
<br>
|
||||
<!-- Author and Creation Date-->
|
||||
<!-- <p
|
||||
}"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
hide: 100,
|
||||
},
|
||||
content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
|
||||
html: false,
|
||||
autoHide: false,
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, index) in displayedMetadata"
|
||||
:key="index"
|
||||
v-if="column.metadatum == 'row_author' || column.metadatum == 'row_creation'"
|
||||
class="metadata-author-creation">
|
||||
{{ column.metadatum == 'row_author' ? $i18n.get('info_created_by') + ' ' + item[column.slug] : $i18n.get('info_date') + ' ' + item[column.slug] }}
|
||||
</p>
|
||||
-->
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<!-- </div> -->
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div
|
||||
v-if="!shouldHideItemsThumbnail"
|
||||
class="card-thumbnail">
|
||||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="list-metadata media-body">
|
||||
<!-- Description -->
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`,
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
class="metadata-description"
|
||||
v-html="item.description != undefined && item.description != '' ? getLimitedDescription(item.description) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`" />
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,81 +32,84 @@
|
|||
role="list"
|
||||
v-if="!isLoading && items.length > 0"
|
||||
class="tainacan-list-container">
|
||||
<a
|
||||
<div
|
||||
role="listitem"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:data-tainacan-item-id="item.id"
|
||||
:href="getItemLink(item.url, index)"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-list">
|
||||
<a :href="getItemLink(item.url, index)">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div
|
||||
class="tainacan-list-thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-list-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
<!-- <img
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"> -->
|
||||
</div>
|
||||
<div class="list-metadata media-body">
|
||||
<span
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div
|
||||
class="tainacan-list-thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-list-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
<!-- <img
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"> -->
|
||||
</div>
|
||||
<div class="list-metadata media-body">
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,46 +38,51 @@
|
|||
:cols="masonryCols"
|
||||
:gutter="25"
|
||||
class="tainacan-masonry-container">
|
||||
<a
|
||||
<div
|
||||
role="listitem"
|
||||
:data-tainacan-item-id="item.id"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-masonry-item"
|
||||
:href="getItemLink(item.url, index)">
|
||||
v-for="(item, index) of items">
|
||||
<a
|
||||
|
||||
class="tainacan-masonry-item"
|
||||
:href="getItemLink(item.url, index)">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p v-html="item.title != undefined ? item.title : ''" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p v-html="item.title != undefined ? item.title : ''" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-masonry-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
</a>
|
||||
<!-- Thumbnail -->
|
||||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-masonry-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</masonry>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,86 +38,89 @@
|
|||
:cols="masonryCols"
|
||||
:gutter="30"
|
||||
class="tainacan-records-container">
|
||||
<a
|
||||
<div
|
||||
role="listitem"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:data-tainacan-item-id="item.id"
|
||||
:href="getItemLink(item.url, index)"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-record">
|
||||
<!-- <div :href="getItemLink(item.url, index)"> -->
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div class="list-metadata media-body">
|
||||
<div
|
||||
class="tainacan-record-thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-record-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
<div
|
||||
:style="{
|
||||
minHeight: getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px',
|
||||
marginTop: '-' + getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'
|
||||
}" />
|
||||
</div>
|
||||
<span
|
||||
v-for="(item, index) of items">
|
||||
<a
|
||||
:href="getItemLink(item.url, index)"
|
||||
class="tainacan-record">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div class="list-metadata media-body">
|
||||
<div
|
||||
class="tainacan-record-thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-record-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
<div
|
||||
:style="{
|
||||
minHeight: getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px',
|
||||
marginTop: '-' + getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'
|
||||
}" />
|
||||
</div>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</masonry>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,13 +84,19 @@
|
|||
v-if="isSlideshowViewModeEnabled"
|
||||
class="actions-header">
|
||||
|
||||
<span class="sr-only">
|
||||
{{ $i18n.get('label_actions_column') }}
|
||||
</span>
|
||||
<!-- nothing to show on header for actions cell-->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody role="list">
|
||||
<tr
|
||||
:data-tainacan-item-id="item.id"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(item, index) of items">
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@ export const viewModesMixin = {
|
|||
},
|
||||
starSlideshowFromHere(index) {
|
||||
this.$router.replace({ query: {...this.$route.query, ...{'slideshow-from': index } }}).catch((error) => this.$console.log(error));
|
||||
},
|
||||
getPosInSet(index) {
|
||||
if (Number(this.queries.paged) !== NaN && Number(this.queries.perpage) !== NaN)
|
||||
return ((Number(this.queries.paged) - 1) * Number(this.queries.perpage)) + index + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,19 +8,25 @@
|
|||
'is-fullscreen': registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen
|
||||
}"
|
||||
aria-live="polite">
|
||||
<h2
|
||||
id="items-list-container-landmark"
|
||||
class="sr-only">
|
||||
{{ $i18n.get('label_items_list') }}
|
||||
</h2>
|
||||
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<h3
|
||||
id="search-control-landmark"
|
||||
class="sr-only">
|
||||
{{ $i18n.get('label_sort_visualization') }}
|
||||
</h3>
|
||||
<div
|
||||
:aria-label="$i18n.get('label_sort_visualization')"
|
||||
role="region"
|
||||
ref="search-control"
|
||||
v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
|
||||
class="search-control">
|
||||
|
||||
<h3
|
||||
id="search-control-landmark"
|
||||
class="sr-only">
|
||||
{{ $i18n.get('label_sort_visualization') }}
|
||||
</h3>
|
||||
|
||||
<!-- <b-loading
|
||||
:is-full-page="false"
|
||||
|
|
@ -264,12 +270,11 @@
|
|||
:inline="showInlineViewModeOptions"
|
||||
:mobile-modal="true"
|
||||
position="is-bottom-left"
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
aria-role="list"
|
||||
trap-focus>
|
||||
<button
|
||||
class="button is-white"
|
||||
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
|
||||
:aria-label="$i18n.get('label_view_mode') + (registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : '')"
|
||||
slot="trigger">
|
||||
<span
|
||||
class="gray-icon view-mode-icon"
|
||||
|
|
@ -354,7 +359,6 @@
|
|||
<template v-if="!hideFilters">
|
||||
<b-modal
|
||||
role="region"
|
||||
aria-labelledby="filters-label-landmark"
|
||||
id="filters-modal"
|
||||
ref="filters-modal"
|
||||
:active.sync="isFiltersModalActive"
|
||||
|
|
@ -420,7 +424,7 @@
|
|||
<h3
|
||||
id="items-list-landmark"
|
||||
class="sr-only">
|
||||
{{ $i18n.get('label_items_list') }}
|
||||
{{ $i18n.get('label_items_list_results') }}
|
||||
</h3>
|
||||
|
||||
<!-- This is used by intersection observers to set filters menu as fixed -->
|
||||
|
|
|
|||
|
|
@ -399,6 +399,7 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'label_show_filters' => __( 'Show filters panel', 'tainacan' ),
|
||||
'label_select_all_items' => __( 'Select all items', 'tainacan' ),
|
||||
'label_select_all' => __( 'Select all', 'tainacan' ),
|
||||
'label_select_item' => __( 'Select item', 'tainacan' ),
|
||||
'label_untrash_selected_items' => __( 'Restore from trash', 'tainacan' ),
|
||||
'label_value_not_provided' => __( 'No value provided.', 'tainacan' ),
|
||||
'label_description_not_provided' => __( 'No description provided.', 'tainacan' ),
|
||||
|
|
@ -462,6 +463,7 @@ return apply_filters( 'tainacan-i18n', [
|
|||
/* translators: The slides/slideshow fullscreen view mode */
|
||||
'label_slides' => __( 'Slides', 'tainacan' ),
|
||||
'label_items_list' => __( 'Items List', 'tainacan' ),
|
||||
'label_items_list_results' => __( 'Items list results', 'tainacan' ),
|
||||
'label_list_pagination' => __( 'List pagination', 'tainacan' ),
|
||||
'label_sort_visualization' => __( 'Sorting and visualization control', 'tainacan' ),
|
||||
'label_tainacan_api' => __( 'Tainacan API', 'tainacan' ),
|
||||
|
|
@ -613,6 +615,10 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'label_default_orderby' => __( 'Initial default sorting', 'tainacan' ),
|
||||
'label_close_search' => __( 'Close search', 'tainacan' ),
|
||||
'label_remove_all_criteria' => __( 'Remove all criteria', 'tainacan' ),
|
||||
'label_string_to_search_for' => __( 'String to search for', 'tainacan' ),
|
||||
'label_number_to_search_for' => __( 'Number to search for', 'tainacan' ),
|
||||
'label_date_to_search_for' => __( 'Date to search for', 'tainacan' ),
|
||||
'label_criterion_to_compare' => __( 'Criterion to compare', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue