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

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

@ -1,95 +1,25 @@
<template> <template>
<div class="table-container"> <div>
<div class="table-wrapper">
<table class="tainacan-table is-narrow"> <div class="mappers-container">
<thead> <div
<tr> class="mapper"
<!-- Name --> v-for="mapper in mappers"
<th> :key="mapper.slug"
<div class="th-wrap">{{ $i18n.get('label_name') }}</div> @click="goToMapperEditionPage(mapper.slug)">
</th> <h4>{{ mapper.name }}</h4>
<!-- Description --> <p>{{ mapper.description }}</p>
<th> <b-switch
<div class="th-wrap">{{ $i18n.get('label_description') }}</div> v-model="mapper.enabled"
</th> size="is-small" />
<!-- Actions --> </div>
<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>
<!-- Actions -->
<td
class="actions-cell column-default-width"
:label="$i18n.get('label_actions')">
<div class="actions-container">
<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> </div>
<b-loading
:active="isLoading"
:can-cancel="false"/>
</div> </div>
</template> </template>
@ -109,9 +39,24 @@
</script> </script>
<style scoped lang="scss"> <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 { .mapper {
cursor: default; 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> </style>

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

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

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

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

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

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