Adjusts cards, list and records view mode to avoid negative margin.

This commit is contained in:
mateuswetah 2021-06-08 21:20:14 -03:00
parent 3305acd5bd
commit 37bf797045
11 changed files with 12 additions and 25 deletions

View File

@ -386,8 +386,7 @@
<!-- Title --> <!-- Title -->
<div <div
:style="{ :style="{
'padding-left': !collectionId || $route.query.readmode || !($route.query.iframemode || collection && collection.current_user_can_bulk_edit) ? '0.5em !important' : '2.75em', 'padding-left': !collectionId || $route.query.readmode || !($route.query.iframemode || collection && collection.current_user_can_bulk_edit) ? '0.5em !important' : '2.75em'
'margin-bottom': item.current_user_can_edit && !$route.query.iframemode ? '-26px' : '0px'
}" }"
class="metadata-title"> class="metadata-title">
<p <p
@ -568,8 +567,7 @@
<div <div
class="metadata-title" class="metadata-title"
:style="{ :style="{
'padding-left': !collectionId || !($route.query.iframemode || collection && collection.current_user_can_bulk_edit) || $route.query.readmode ? '1.5em !important' : '2.75em', 'padding-left': !collectionId || !($route.query.iframemode || collection && collection.current_user_can_bulk_edit) || $route.query.readmode ? '1.5em !important' : '2.75em'
'margin-bottom': item.current_user_can_edit || $route.query.iframemode ? '-27px' : '0px'
}"> }">
<p <p
v-tooltip="{ v-tooltip="{

View File

@ -29,14 +29,6 @@
} }
} }
} }
#items-list-area {
.tainacan-record {
.metadata-title { min-height: 68px; }
}
.tainacan-card {
.metadata-title { margin-bottom: 0; }
}
}
} }
#tainacan-admin-app.tainacan-admin-read-mode { #tainacan-admin-app.tainacan-admin-read-mode {

View File

@ -70,6 +70,7 @@
float: right; float: right;
top: calc(-1 * var(--tainacan-container-padding)); top: calc(-1 * var(--tainacan-container-padding));
bottom: 0; bottom: 0;
margin-bottom: -26px;
padding-right: 12px; padding-right: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -130,7 +131,6 @@
.metadata-title { .metadata-title {
flex-shrink: 0; flex-shrink: 0;
padding: 0.6em 5em 0.5em 2.75em; padding: 0.6em 5em 0.5em 2.75em;
margin-bottom: -26px;
min-height: 40px; min-height: 40px;
position: relative; position: relative;
font-size: 1em !important; font-size: 1em !important;

View File

@ -38,6 +38,7 @@
float: right; float: right;
top: calc(-1 * var(--tainacan-container-padding)); top: calc(-1 * var(--tainacan-container-padding));
bottom: 0; bottom: 0;
margin-bottom: -25px;
padding-right: 12px; padding-right: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -97,7 +98,6 @@
.metadata-title { .metadata-title {
flex-shrink: 0; flex-shrink: 0;
padding: 0.5em 4.75em 0.5em 2.75em; padding: 0.5em 4.75em 0.5em 2.75em;
margin-bottom: -25px;
min-height: 40px; min-height: 40px;
position: relative; position: relative;
font-size: 1em !important; font-size: 1em !important;

View File

@ -45,6 +45,7 @@
bottom: 0; bottom: 0;
padding-right: 12px; padding-right: 12px;
//width: 80px; //width: 80px;
margin-bottom: -25px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
visibility: hidden; visibility: hidden;
@ -93,7 +94,6 @@
.metadata-title { .metadata-title {
flex-shrink: 0; flex-shrink: 0;
padding: 0.5em 4.75em 0.5em 2.75em; padding: 0.5em 4.75em 0.5em 2.75em;
margin-bottom: -25px;
font-size: 1.0em !important; font-size: 1.0em !important;
min-height: 40px; min-height: 40px;
position: relative; position: relative;

View File

@ -185,15 +185,15 @@ registerBlockType('tainacan/carousel-collections-list', {
<div class="collection-items-grid"> <div class="collection-items-grid">
<img <img
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div> </div>
: :

View File

@ -210,7 +210,7 @@ registerBlockType('tainacan/carousel-items-list', {
target="_blank"> target="_blank">
<img <img
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) } src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
srcset={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) } srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null } { !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
</a> </a>

View File

@ -181,15 +181,15 @@ registerBlockType('tainacan/carousel-terms-list', {
<div class="term-items-grid"> <div class="term-items-grid">
<img <img
src={ termItems[0] ? thumbHelper.getSrc(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ termItems[0] ? thumbHelper.getSrc(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ termItems[0] ? thumbHelper.getSrcSet(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ termItems[0] ? thumbHelper.getSrcSet(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ termItems[0] && termItems[0].thumbnail_alt ? termItems[0].thumbnail_alt : (termItems[0] && termItems[0].name ? termItems[0].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ termItems[0] && termItems[0].thumbnail_alt ? termItems[0].thumbnail_alt : (termItems[0] && termItems[0].name ? termItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ termItems[1] ? thumbHelper.getSrc(termItems[1]['thumbnail'], 'tainacan-medium', termItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ termItems[1] ? thumbHelper.getSrc(termItems[1]['thumbnail'], 'tainacan-medium', termItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ termItems[1] ? thumbHelper.getSrcSet(termItems[1]['thumbnail'], 'tainacan-medium', termItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ termItems[1] ? thumbHelper.getSrcSet(termItems[1]['thumbnail'], 'tainacan-medium', termItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ termItems[1] && termItems[1].thumbnail_alt ? termItems[1].thumbnail_alt : (termItems[1] && termItems[1].name ? termItems[1].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ termItems[1] && termItems[1].thumbnail_alt ? termItems[1].thumbnail_alt : (termItems[1] && termItems[1].name ? termItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ termItems[2] ? thumbHelper.getSrc(termItems[2]['thumbnail'], 'tainacan-medium', termItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ termItems[2] ? thumbHelper.getSrc(termItems[2]['thumbnail'], 'tainacan-medium', termItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ termItems[2] ? thumbHelper.getSrcSet(termItems[2]['thumbnail'], 'tainacan-medium', termItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ termItems[2] ? thumbHelper.getSrcSet(termItems[2]['thumbnail'], 'tainacan-medium', termItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ termItems[2] && termItems[2].thumbnail_alt ? termItems[2].thumbnail_alt : (termItems[2] && termItems[2].name ? termItems[2].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ termItems[2] && termItems[2].thumbnail_alt ? termItems[2].thumbnail_alt : (termItems[2] && termItems[2].name ? termItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div> </div>
: :

View File

@ -171,7 +171,6 @@ export default {
.tainacan-cards-container .tainacan-card .metadata-title { .tainacan-cards-container .tainacan-card .metadata-title {
padding: 0.6em 0.75em; padding: 0.6em 0.75em;
margin-bottom: 0px;
} }
</style> </style>

View File

@ -129,7 +129,6 @@ export default {
.tainacan-list-container .tainacan-list .metadata-title { .tainacan-list-container .tainacan-list .metadata-title {
padding: 0.5em 0.875em; padding: 0.5em 0.875em;
margin-bottom: 0px;
} }
</style> </style>

View File

@ -209,7 +209,6 @@ export default {
.tainacan-records-container .tainacan-record .metadata-title { .tainacan-records-container .tainacan-record .metadata-title {
padding: 0.6em 0.875em; padding: 0.6em 0.875em;
margin-bottom: 0px;
} }
</style> </style>