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

Finishes responsiviness and placeholder dealing on collection header gutenberg side.

This commit is contained in:
Mateus Machado Luna 2019-05-08 14:12:24 -03:00
parent 3325b0cd03
commit 807cf6aca7
4 changed files with 107 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/assets/css/tainacan-gutenberg-blocks-style.css
View File

@ -414,18 +414,28 @@
width: 100%;
align-items: stretch; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name {
width: 45.83%;
padding: 1rem 110px 1rem 1rem;
width: auto;
min-width: 350px;
flex-grow: 1;
padding: 1rem 100px 1rem 1rem;
text-align: right;
line-height: 1.5rem;
flex-shrink: 0;
min-height: 165px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #454647; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name h3 {
color: white; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name span.label {
font-weight: normal;
font-size: 1rem; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name.only-collection-name {
justify-content: center;
padding: 1rem; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name.only-collection-name h3 {
text-align: center;
font-size: 1.75rem; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-thumbnail {
height: 145px;
width: 145px;
@ -435,12 +445,33 @@
border: 4px solid white;
margin: 10px;
flex-shrink: 0;
position: absolute;
left: calc(45.83% - 80px); }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header {
width: 100%;
position: relative;
margin-left: -155px;
left: 84px; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image {
width: auto;
min-width: 150px;
min-height: 165px;
flex-grow: 2;
background-size: cover;
background-position: center; }
background-position: center;
background-color: #dbdbdb; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header {
flex-wrap: wrap-reverse; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name {
width: 100% !important;
min-width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 64px 1rem 0rem 1rem; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-name h3 {
margin-bottom: 1rem; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-thumbnail {
left: calc(-50% + 78px) !important;
top: -78px !important; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image {
background-color: transparent; } }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
width: 100%;
display: flex;

2
src/assets/css/tainacan-gutenberg-blocks-style.css.map
View File

File diff suppressed because one or more lines are too long

49
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss
View File

@ -18,22 +18,32 @@
align-items: stretch;
.collection-name {
width: 45.83%;
width: auto;
min-width: 350px;
flex-grow: 1;
padding: 1rem 100px 1rem 1rem;
text-align: right;
line-height: 1.5rem;
flex-shrink: 0;
min-height: 165px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #454647;
h3 { color: white; }
span.label {
font-weight: normal;
font-size: 1rem;
}
&.only-collection-name {
justify-content: center;
padding: 1rem;
h3 {
text-align: center;
font-size: 1.75rem;
}
}
}
.collection-thumbnail {
height: 145px;
@ -44,13 +54,38 @@
border: 4px solid white;
margin: 10px;
flex-shrink: 0;
position: absolute;
left: calc(45.83% - 80px);
position: relative;
margin-left: -155px;
left: 84px;
}
.collection-header {
width: 100%;
.collection-header-image {
width: auto;
min-width: 150px;
min-height: 165px;
flex-grow: 2;
background-size: cover;
background-position: center;
background-color: #dbdbdb;
}
@media only screen and (max-width: 1024px) {
flex-wrap: wrap-reverse;
.collection-name {
width: 100% !important;
min-width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 64px 1rem 0rem 1rem;
h3 { margin-bottom: 1rem; }
}
.collection-thumbnail {
left: calc(-50% + 78px) !important;
top: -78px !important;
}
.collection-header-image {
background-color: transparent;
}
}
}

35
src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
View File

@ -454,7 +454,7 @@ registerBlockType('tainacan/dynamic-items-list', {
{
showCollectionHeader ?
<div> {
isLoadingCollection ?
<div class="spinner-container">
@ -462,22 +462,37 @@ registerBlockType('tainacan/dynamic-items-list', {
</div>
:
<div class="dynamic-items-collection-header">
<div class="collection-name">
<div
style={{
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1rem' : '',
width: collection && collection.header_image ? '' : '100%'
}}
className={
'collection-name ' +
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
}>
<h3>
<span class="label">{ __('Collection', 'tainacan') }</span><br/>
{ collection && collection.name ? collection.name : '' }
</h3>
</div>
{
collection && collection.thumbnail ?
<div class="collection-thumbnail" style={{ backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')' }}/>
collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ?
<div
class="collection-thumbnail"
style={{
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
}}/>
: null
}
{
collection && collection.header_image ?
<div class="collection-header" style={{ backgroundImage: 'url(' + collection.header_image + ')' }}/>
: null
}
}
<div
class="collection-header-image"
style={{
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
minHeight: collection && collection.header_image ? '' : '80px',
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
}}/>
</div>
}
</div>