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

Continues mappers single page and styles importers cards. #783.

This commit is contained in:
mateuswetah 2023-09-15 12:09:13 -03:00
parent 2efa64692e
commit 8f03ff3e2a
5 changed files with 56 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/admin/components/lists/mappers-list.vue
View File

@ -1,95 +1,25 @@
<template>
<div class="table-container">
<div class="table-wrapper">
<table class="tainacan-table is-narrow">
<thead>
<tr>
<!-- Name -->
<th>
<div class="th-wrap">{{ $i18n.get('label_name') }}</div>
</th>
<!-- Description -->
<th>
<div class="th-wrap">{{ $i18n.get('label_description') }}</div>
</th>
<!-- Actions -->
<th class="actions-header">
&nbsp;
<!-- nothing to show on header for actions cell-->
</th>
</tr>
</thead>
<tbody v-if="!isLoading">
<template v-for="(mapper, index) of mappers">
<tr :key="index">
<!-- Name -->
<td
class="column-default-width column-main-content"
:label="$i18n.get('label_name')"
:aria-label="$i18n.get('label_name') + ': ' + mapper.name">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 120,
},
content: mapper.name,
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
{{ mapper.name }}
</p>
</td>
<!-- Description -->
<td
class="table-creation column-large-width"
:label="$i18n.get('label_description')"
:aria-label="$i18n.get('label_description') + ': ' + mapper.description">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 120,
},
content: mapper.description,
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-html="mapper.description"/>
</td>
<div>
<!-- Actions -->
<td
class="actions-cell column-default-width"
:label="$i18n.get('label_actions')">
<div class="actions-container">
<div class="mappers-container">
<div
class="mapper"
v-for="mapper in mappers"
:key="mapper.slug"
@click="goToMapperEditionPage(mapper.slug)">
<h4>{{ mapper.name }}</h4>
<p>{{ mapper.description }}</p>
<b-switch
v-model="mapper.enabled"
size="is-small" />
<a
id="button-edit"
:aria-label="$i18n.get('edit')"
@click.prevent.stop="goToMapperEditionPage(mapper.slug)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<b-loading
:active="isLoading"
:can-cancel="false"/>
</div>
</template>
@ -109,9 +39,24 @@
</script>
<style scoped lang="scss">
.mappers-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 20px;
.table-container .table-wrapper table.tainacan-table tbody tr {
cursor: default;
.mapper {
border: 1px solid var(--tainacan-gray2);
padding: 15px;
min-height: 100px;
cursor: pointer;
background-color: var(--tainacan-item-background-color);
transition: border 0.3s ease, background-color 0.15s ease;
&:hover {
background-color: var(--tainacan-item-hover-background-color);
border: 1px solid var(--tainacan-gray3);
}
}
}
</style>

12
src/views/admin/pages/lists/available-exporters-page.vue
View File

@ -59,17 +59,21 @@
<style lang="scss" scoped>
.exporter-types-container {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 20px;
.exporter-type {
border: 1px solid var(--tainacan-gray2);
padding: 15px;
margin: 20px;
min-height: 100px;
cursor: pointer;
transition: border 0.3s ease;
background-color: var(--tainacan-item-background-color);
transition: border 0.3s ease, background-color 0.15s ease;
&:hover {
background-color: var(--tainacan-item-hover-background-color);
border: 1px solid var(--tainacan-gray3);
}
}

15
src/views/admin/pages/lists/available-importers-page.vue
View File

@ -59,20 +59,21 @@ export default {
<style lang="scss" scoped>
.importer-types-container {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 20px;
.importer-type {
border: 1px solid var(--tainacan-gray2);
padding: 15px;
margin: 20px;
min-height: 100px;
cursor: pointer;
max-width: 20%;
flex-grow: 1;
flex-basis: 20%;
transition: border 0.3s ease;
background-color: var(--tainacan-item-background-color);
transition: border 0.3s ease, background-color 0.15s ease;
&:hover {
background-color: var(--tainacan-item-hover-background-color);
border: 1px solid var(--tainacan-gray3);
}
}

4
src/views/admin/pages/lists/mappers-page.vue
View File

@ -1,11 +1,9 @@
<template>
<div :class="{ 'repository-level-page page-container': isRepositoryLevel }">
<tainacan-title
:bread-crumb-items="[{ path: '', label: $i18n.get('mappers') }]"/>
<tainacan-title :bread-crumb-items="[{ path: '', label: $i18n.get('mappers') }]"/>
<template v-if="isRepositoryLevel">
<p>{{ $i18n.get('info_repository_metadata_inheritance') }}</p>
<br>
</template>
<div>

2
src/views/admin/scss/tainacan-admin.scss
View File

@ -131,7 +131,7 @@ a:hover {
overflow-x: hidden;
&>p {
font-size: 0.8125em;
font-size: 0.875em;
}
}
html.is-clipped .page-container:not(.is-filters-menu-open) {