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

More improvements to map view mode. #693.

This commit is contained in:
mateuswetah 2023-01-20 09:50:47 -03:00
parent e4ef19842e
commit f0929ad628
4 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1531,7 +1531,7 @@
v-for="(itemLocation, index) of itemsLocations"
:key="index"
:lat-lng="itemLocation.location"
:opacity="selectedMarkerIndexes.length > 0 && !selectedMarkerIndexes.includes(index) ? 0.35 : 1.0"
:opacity="(mapSelectedItemId && itemLocation.item.id != mapSelectedItemId) ? 0.35 : 1.0"
@click="showItemByLocation(index)">
<l-tooltip>
<div
@ -1595,7 +1595,7 @@
<l-control
:disable-scroll-propagation="true"
:disable-click-propagation="true"
v-if="selectedMarkerIndexes.length"
v-if="selectedMarkerIndexes.length || mapSelectedItemId"
position="topleft"
class="tainacan-records-container tainacan-records-container--map">
<button
@ -1614,20 +1614,15 @@
</button>
<transition-group
tag="ul"
name="item-appear">
name="appear">
<li
:key="item.id"
:data-tainacan-item-id="item.id"
v-for="item of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex] && itemsLocations[aSelectedMarkerIndex].item.id == anItem.id))">
<div
:class="{
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
}"
class="tainacan-record">
v-for="item of items.filter(anItem => mapSelectedItemId == anItem.id)">
<div class="tainacan-record">
<!-- Title -->
<div
class="metadata-title">
<div class="metadata-title">
<span
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
class="icon has-text-gray"
@ -1688,7 +1683,7 @@
<a
id="button-show-location"
v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)"
:aria-label="$i18n.get('label_show_item_location_on_map')"
:aria-label="$i18n.get('label_show_item_location_on_map')"
@click.prevent.stop="showLocationsByItem(item)">
<span
v-if="selectedGeocoordinateMetadatum.slug"
@ -1878,7 +1873,8 @@ export default {
longitude: -51.31668,
mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
mapTileAttribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
selectedMarkerIndexes: []
selectedMarkerIndexes: [],
mapSelectedItemId: false
}
},
computed: {
@ -2431,6 +2427,7 @@ export default {
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
},
clearSelectedMarkers() {
this.mapSelectedItemId = false;
this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
@ -2440,13 +2437,16 @@ export default {
}
},
showItemByLocation(index) {
this.mapSelectedItemId = this.itemsLocations[index].item.id;
this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index);
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
},
showLocationsByItem(item) {
this.mapSelectedItemId = item.id;
this.selectedMarkerIndexes = [];
const selectedLocationsByItem = this.itemsLocations.filter((anItemLocation, index) => {
if (anItemLocation.item.id == item.id)
this.selectedMarkerIndexes.push(index);

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

@ -1,14 +1,14 @@
.tainacan-leaflet-map-container {
display: flex;
flex-wrap: nowrap;
border: 1px solid var(--tainacan-input-border-color);
border-radius: 3px;
height: 60vh;
#tainacan-admin-view-mode-map,
#tainacan-view-mode-map {
position: relative;
border: none;
border-left: 1px solid var(--tainacan-input-border-color);
float: right;
/deep/ .leaflet-marker-pane {
filter: hue-rotate(-22deg);
@ -58,7 +58,8 @@
}
.tainacan-records-container--map {
height: calc(60vh - 72px);
height: auto;
max-height: calc(60vh - 72px);
overflow-y: auto;
overflow-x: hidden;
width: 286px;
@ -123,14 +124,11 @@
}
}
&.non-located-item {
opacity: 0.35;
&:hover,
&:focus {
opacity: 1.0;
}
#button-show-location {
color: var(--tainacan-secondary);
cursor: pointer;
}
.tainacan-record-thumbnail {
margin: 0 0 0.75rem 1rem !important;
}
@ -158,7 +156,8 @@
height: 60vh;
overflow-y: auto;
overflow-x: hidden;
display: inline-block;
&>li {
width: 100%;
@ -169,11 +168,10 @@
border-bottom: 1px solid var(--tainacan-item-hover-background-color);
&.non-located-item {
opacity: 0.45;
opacity: 0.35;
&:hover,
&:focus {
background-color: var(--tainacan-item-background-color);
opacity: 1.0;
}
}
@ -283,6 +281,7 @@
}
.metadata-title {
background-color: var(---tainacan-item-heading-hover-background-color) !important;
p { text-decoration: none !important; }
.slideshow-icon {
transform: scale(1.0);
@ -295,13 +294,14 @@
}
@media screen and (max-width: 960px) {
flex-wrap: wrap;
#tainacan-admin-view-mode-map,
#tainacan-view-mode-map,
.tainacan-map-cards-container {
width: 100% !important;
max-width: 100%;
float: none;
display: block;
}
#tainacan-admin-view-mode-map,

2
src/views/admin/scss/_view-mode-records.scss
View File

@ -163,6 +163,7 @@
.list-metadata {
padding: var(--tainacan-container-padding);
padding-top: 0.5em;
flex: 1;
font-size: 1em;
color: var(--tainacan-info-color);
@ -171,6 +172,7 @@
.metadata-label {
margin: 0 0 0.5em 0;
padding-top: 0;
font-size: 0.75em;
font-weight: 700;
color: var(--tainacan-info-color);

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

@ -4,22 +4,10 @@
<!-- Empty result placeholder, rendered in the parent component -->
<slot />
<!-- SKELETON LOADING -->
<div
v-if="isLoading"
class="tainacan-records-container--skeleton">
<div
:key="item"
v-for="item in 12"
class="skeleton" />
</div>
<!-- MAP VIEW MODE -->
<div class="tainacan-leaflet-map-container">
<ul
v-if="!isLoading"
class="tainacan-map-cards-container">
<ul class="tainacan-map-cards-container">
<li
role="listitem"
:aria-setsize="totalItems"
@ -170,7 +158,7 @@
<l-control
:disable-scroll-propagation="true"
:disable-click-propagation="true"
v-if="selectedMarkerIndexes.length"
v-if="selectedMarkerIndexes.length || mapSelectedItemId"
position="topleft"
class="tainacan-records-container tainacan-records-container--map">
<button
@ -189,13 +177,13 @@
</button>
<transition-group
tag="ul"
name="item-appear">
name="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 == anItem.id))">
v-for="(item, index) of items.filter(anItem => mapSelectedItemId == anItem.id)">
<a
:href="getItemLink(item.url, index)"
:class="{
@ -219,12 +207,13 @@
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
id="button-show-location"
class="icon"
style="margin:0px 2px 0px 0px;"
style="margin: -1px 4px 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;"
style="width: 1.125em;height: 1.125em;"
viewBox="0 0 24 24">
<path
fill="currentColor"
@ -353,7 +342,8 @@ export default {
longitude: -51.31668,
mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
mapTileAttribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
selectedMarkerIndexes: []
selectedMarkerIndexes: [],
mapSelectedItemId: false
}
},
computed: {
@ -480,6 +470,7 @@ export default {
return '';
},
clearSelectedMarkers() {
this.mapSelectedItemId = false;
this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
@ -489,13 +480,16 @@ export default {
}
},
showItemByLocation(index) {
this.mapSelectedItemId = this.itemsLocations[index].item.id;
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, paddingTopLeft: [0, 286] });
},
showLocationsByItem(item) {
this.mapSelectedItemId = item.id;
this.selectedMarkerIndexes = [];
const selectedLocationsByItem = this.itemsLocations.filter((anItemLocation, index) => {
if (anItemLocation.item.id == item.id)
this.selectedMarkerIndexes.push(index);