tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes to admin-side display of card. #692.

This commit is contained in:
mateuswetah 2023-01-18 12:04:51 -03:00
parent 9a720991aa
commit 48346bcdf1
3 changed files with 219 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/admin/components/lists/items-list.vue
View File

@ -1432,6 +1432,20 @@
v-if="selectedMarkerIndexes.length"
position="topleft"
class="tainacan-records-container tainacan-records-container--map">
<button
:aria-label="$i18n.get('label_clean')"
class="tainacan-records-close-button"
@click="clearSelectedMarkers()"
v-tooltip="{
content: $i18n.get('label_clean'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
<span class="icon">
<i class="tainacan-icon tainacan-icon-close" />
</span>
</button>
<transition-group
tag="ul"
name="item-appear">
@ -1441,42 +1455,13 @@
v-for="item of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex] && itemsLocations[aSelectedMarkerIndex].item.id == anItem.id))">
<div
:class="{
'selected-record': getSelectedItemChecked(item.id) == true,
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
}"
class="tainacan-record">
<!-- Checkbox -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
<div
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
:class="{ 'is-selecting': isSelectingItems }"
class="record-checkbox">
<label
tabindex="0"
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
<input
v-if="!$adminOptions.itemsSingleSelectionMode"
type="checkbox"
:checked="getSelectedItemChecked(item.id)"
@input="setSelectedItemChecked(item.id)">
<input
v-else
type="radio"
name="item-single-selection"
:value="item.id"
v-model="singleItemSelection">
<span class="check" />
<span class="control-label" />
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</label>
</div>
<!-- Title -->
<div
class="metadata-title"
:style="{
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
}">
class="metadata-title">
<span
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
class="icon has-text-gray"
@ -1528,6 +1513,7 @@
@click.right="onRightClickItem($event, item)"
v-html="item.title != undefined ? item.title : ''" />
</div>
<!-- Actions -->
<div
v-if="!$adminOptions.hideItemsListActionAreas"
@ -1831,7 +1817,6 @@
</li>
</ul>
</div>
</div>
</div>
</template>

53
src/views/admin/scss/_view-mode-map.scss
View File

@ -47,22 +47,45 @@
}
.tainacan-records-container--map {
height: 60vh;
height: calc(60vh - 72px);
overflow-y: auto;
overflow-x: hidden;
width: 300px;
max-width: 300px;
float: none;
position: initial;
font-size: 1rem;
padding-top: 10px;
padding-bottom: 24px;
.tainacan-records-close-button {
background-color: var(--tainacan-background-color);
border-radius: 100%;
width: 1rem;
height: 1rem;
border: none;
position: absolute;
left: 320px;
cursor: pointer;
padding: 0.75em;
display: flex;
justify-content: center;
align-content: center;
.icon {
height: 0.125em;
}
}
&>li,
&>ul>li {
max-width: 300px;
width: 100%;
.tainacan-record {
margin-bottom: 0.125rem;
max-width: 100%;
max-width: 300px;
width: 100%;
box-shadow: 0px 0px 12px -10px #000;
border: 2px solid rgba(0,0,0,0.2);
opacity: 1.0;
@ -72,6 +95,16 @@
background-color: var(--tainacan-background-color);
}
.metadata-title {
padding: 0.5em 6.75em 0.5em 0.75em;
p {
white-space: normal;
overflow: visible;
line-height: 1.5em;
}
}
&.non-located-item {
opacity: 0.35;
@ -80,10 +113,12 @@
opacity: 1.0;
}
}
.tainacan-record-item-thumbnail {
margin: 0 0 0.75rem 1rem;
}
.tainacan-record-item-thumbnail,
img {
max-width: 60px;
max-width: 75px;
}
.media .list-metadata {
@ -145,7 +180,7 @@
.actions-area {
position: relative;
float: right;
top: calc(-1 * var(--tainacan-container-padding));
top: calc(-0.25em * var(--tainacan-container-padding));
bottom: 0;
padding-right: 12px;
//width: 80px;
@ -165,7 +200,7 @@
&:hover .actions-area {
visibility: visible;
opacity: 1.0;
top: calc(-1 * 1.5em - var(--tainacan-container-padding));
top: calc(-0.875em - var(--tainacan-container-padding));
a {
opacity: 1;
@ -173,7 +208,6 @@
}
.tainacan-map-card-thumbnail {
max-width: 40px;
margin-top: -0.5em;
margin-left: auto;
}
.tainacan-map-card-item-thumbnail,
@ -186,15 +220,14 @@
}
.metadata-title {
flex-shrink: 0;
padding: 0.75em 1.125em;
padding: 0.25em 1.125em;
font-size: 1.0em !important;
min-height: 40px;
position: relative;
white-space: wrap;
display: flex;
gap: 0.75rem;
min-width: 100%;
align-items: flex-start;
align-items: center;
color: var(--tainacan-heading-color);
transition: background-color 0.3s ease;

233
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
View File

@ -12,7 +12,6 @@
<div
:key="item"
v-for="item in 12"
:style="{'min-height': randomHeightForRecordsItem() + 'px' }"
class="skeleton" />
</div>
@ -98,26 +97,153 @@
</section>
</div>
</l-control>
<l-control
:disable-scroll-propagation="false"
:disable-click-propagation="false"
v-if="selectedMarkerIndexes.length"
position="topleft"
class="tainacan-records-container tainacan-records-container--map">
<transition-group
tag="ul"
name="item-appear">
<li
:aria-setsize="totalItems"
:aria-posinset="getPosInSet(index)"
:data-tainacan-item-id="item.id"
:key="item.id"
v-for="(item, index) of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == item.id))">
<a
:href="getItemLink(item.url, index)"
:class="{
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
}"
class="tainacan-record">
<!-- JS-side hook for extra content -->
<div
v-if="hasBeforeHook()"
class="faceted-search-hook faceted-search-hook-item-before"
v-html="getBeforeHook(item)" />
<!-- Title -->
<div class="metadata-title">
<span
v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id) && selectedGeocoordinateMetadatum.slug"
v-tooltip="{
content: $i18n.get('label_show_item_location_on_map'),
autoHide: true,
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon"
style="margin:0px 2px 0px 0px;"
:aria-label="$i18n.get('label_show_item_location_on_map')"
@click.prevent.stop="showLocationsByItem(item)">
<svg
style="width: 1.5em;height: 1.5em;"
viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
</svg>
</span>
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: item.metadata != undefined ? renderMetadata(item, column) : '',
html: true,
autoHide: false,
placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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: {
shown: 500,
hide: 100,
},
content: $i18n.get('label_see_on_fullscreen'),
placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
@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="(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>
<!-- JS-side hook for extra content -->
<div
v-if="hasAfterHook()"
class="faceted-search-hook faceted-search-hook-item-after"
v-html="getAfterHook(item)" />
</a>
</li>
</transition-group>
</l-control>
</l-map>
<transition-group
<ul
v-if="!isLoading"
tag="ul"
class="tainacan-records-container tainacan-records-container--map"
name="item-appear">
class="tainacan-map-cards-container">
<li
role="listitem"
:aria-setsize="totalItems"
:aria-posinset="getPosInSet(index)"
:data-tainacan-item-id="item.id"
:key="item.id"
v-for="(item, index) of items"
v-show="!selectedMarkerIndexes.length || selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == item.id)">
<a
:href="getItemLink(item.url, index)"
v-for="(item, index) of items">
<div
@click.prevent.stop="showLocationsByItem(item)"
:class="{
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
}"
class="tainacan-record">
class="tainacan-map-card">
<!-- JS-side hook for extra content -->
<div
@ -180,52 +306,14 @@
</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="(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>
<!-- JS-side hook for extra content -->
<div
v-if="hasAfterHook()"
class="faceted-search-hook faceted-search-hook-item-after"
v-html="getAfterHook(item)" />
</a>
</div>
</li>
</transition-group>
</ul>
</div>
</div>
</div>
@ -336,12 +424,7 @@ export default {
}
}
let selectedItemId = false;
if ( this.selectedMarkerIndexes.length > 0 )
selectedItemId = locations[this.selectedMarkerIndexes[0]].item.id;
return selectedItemId ? locations.filter((aLocation) => aLocation.item.id == selectedItemId) : locations;
return locations;
},
geocoordinateMetadata() {
let geocoordinateMetadata = [];
@ -370,9 +453,9 @@ export default {
setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
else
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
}
}, 500)
},
@ -388,11 +471,6 @@ export default {
}
},
methods: {
randomHeightForRecordsItem() {
let min = (70*this.amountOfDisplayedMetadata)*0.8;
let max = (70*this.amountOfDisplayedMetadata)*1.2;
return Math.floor(Math.random()*(max-min+1)+min);
},
getItemImageHeight(imageWidth, imageHeight) {
let itemWidth = 120;
return (imageHeight*itemWidth)/imageWidth;
@ -407,16 +485,16 @@ export default {
this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
else
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
}
},
showItemByLocation(index) {
this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index);
// if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
// this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12 });
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
},
showLocationsByItem(item) {
this.selectedMarkerIndexes = [];
@ -425,12 +503,21 @@ export default {
this.selectedMarkerIndexes.push(index);
return anItemLocation.item.id == item.id;
})
// if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
// if (selectedLocationsByItem.length > 1)
// this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
// else
// this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
// }
if ( selectedLocationsByItem.length) {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (selectedLocationsByItem.length > 1)
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
else
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
}
} else {
this.$buefy.snackbar.open({
message: this.$i18n.get('info_non_located_item'),
type: 'is-warning',
duration: 3000
});
}
}
}
}