Fixes usage of some wrong tags in react.

This commit is contained in:
mateuswetah 2024-04-02 16:31:07 -03:00
parent 98b9e0a862
commit 3e0d01033c
31 changed files with 228 additions and 224 deletions

View File

@ -238,10 +238,10 @@ export default class CollectionsModal extends React.Component {
)
}
</ul>
{ this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }
</div>
)
: this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
: this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collections found.', 'tainacan') }</p>
</div>
@ -269,7 +269,7 @@ export default class CollectionsModal extends React.Component {
</li>
)
}
{ this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }
</ul>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>

View File

@ -88,7 +88,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
id={ isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id }
href={ collection.url }>
{ ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
<div class="collection-items-grid">
<div className="collection-items-grid">
<img
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
@ -424,12 +424,12 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div>
{ isSelected && collections.length ?
<div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
<div className="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
: null
}
{ collections.length ? (
@ -445,7 +445,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
</ul>
</div>
<button
class="swiper-button-prev"
className="swiper-button-prev"
slot="button-prev"
style={{ cursor: 'not-allowed' }}>
<svg
@ -464,7 +464,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
</svg>
</button>
<button
class="swiper-button-next"
className="swiper-button-next"
slot="button-next"
style={{ cursor: 'not-allowed' }}>
<svg

View File

@ -103,7 +103,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
<a
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url }>
<div class="items-list-item--image-wrap">
<div className="items-list-item--image-wrap">
<img
src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
@ -580,13 +580,13 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
<div> {
isLoadingCollection ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div>
:
<a
href={ collection.url ? collection.url : '' }
class="carousel-items-collection-header">
className="carousel-items-collection-header">
<div
style={{
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
@ -599,21 +599,21 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
}>
<h3 style={{ color: collectionTextColor ? collectionTextColor : '' }}>
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }<br/></span> : null }
{ showCollectionLabel ? <span className="label">{ __('Collection', 'tainacan') }<br/></span> : null }
{ collection && collection.name ? collection.name : '' }
</h3>
</div>
{
collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ?
<div
class="collection-thumbnail"
className="collection-thumbnail"
style={{
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
}}/>
: null
}
<div
class="collection-header-image"
className="collection-header-image"
style={{
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
minHeight: collection && collection.header_image ? '' : '80px',
@ -667,12 +667,12 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div>
{ isSelected && items.length ?
<div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
<div className="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
: null
}
{ items.length ? (
@ -692,7 +692,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
</ul>
</div>
<button
class="swiper-button-prev"
className="swiper-button-prev"
slot="button-prev"
style={{ cursor: 'not-allowed' }}>
<svg
@ -711,7 +711,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
</svg>
</button>
<button
class="swiper-button-next"
className="swiper-button-next"
slot="button-next"
style={{ cursor: 'not-allowed' }}>
<svg

View File

@ -89,7 +89,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }
href={ term.url }>
{ ( !showTermThumbnail && Array.isArray(termItems) ) ?
<div class="term-items-grid">
<div className="term-items-grid">
<img
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` }
@ -433,12 +433,12 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div>
{ isSelected && terms.length ?
<div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
<div className="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
: null
}
{ terms.length ? (
@ -454,7 +454,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
</ul>
</div>
<button
class="swiper-button-prev"
className="swiper-button-prev"
slot="button-prev"
style={{ cursor: 'not-allowed' }}>
<svg
@ -473,7 +473,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
</svg>
</button>
<button
class="swiper-button-next"
className="swiper-button-next"
slot="button-next"
style={{ cursor: 'not-allowed' }}>
<svg

View File

@ -240,10 +240,10 @@ export default class CollectionsModal extends React.Component {
)
}
</ul>
{ this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }
</div>
)
: this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
: this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collections found.', 'tainacan') }</p>
</div>
@ -271,7 +271,7 @@ export default class CollectionsModal extends React.Component {
</li>
)
}
{ this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }
</ul>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>

View File

@ -32,9 +32,9 @@ export default function({ attributes, setAttributes, isSelected }) {
<button
onClick={ () => removeCollectionOfId(collection.id) }
type="button"
class="components-button has-icon"
className="components-button has-icon"
aria-label={__('Remove', 'tainacan')}>
<span class="dashicon dashicons dashicons-no-alt" />
<span className="dashicon dashicons dashicons-no-alt" />
</button>
<a
id={ isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id }

View File

@ -886,13 +886,13 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
<div> {
isLoadingCollection ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div>
:
<a
href={ collection.url ? collection.url : '' }
class="dynamic-items-collection-header">
className="dynamic-items-collection-header">
<div
style={{
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
@ -905,21 +905,21 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
}>
<h3 style={{ color: collectionTextColor ? collectionTextColor : '' }}>
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }<br/></span> : null }
{ showCollectionLabel ? <span className="label">{ __('Collection', 'tainacan') }<br/></span> : null }
{ collection && collection.name ? collection.name : '' }
</h3>
</div>
{
collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ?
<div
class="collection-thumbnail"
className="collection-thumbnail"
style={{
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
}}/>
: null
}
<div
class="collection-header-image"
className="collection-header-image"
style={{
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
minHeight: collection && collection.header_image ? '' : '80px',
@ -933,12 +933,12 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
{
showSearchBar ?
<div class="dynamic-items-search-bar">
<div className="dynamic-items-search-bar">
<Button
onClick={ () => { order = 'asc'; setAttributes({ order: order }); setContent(); }}
className={order == 'asc' ? 'sorting-button-selected' : ''}
label={__('Sort ascending', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg width="24" height="24" viewBox="-2 -4 20 20">
<path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7 h8.3V10.8z"/>
@ -950,7 +950,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
onClick={ () => { order = 'desc'; setAttributes({ order: order }); setContent(); }}
className={order == 'desc' ? 'sorting-button-selected' : ''}
label={__('Sort descending', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg width="24" height="24" viewBox="-2 -4 20 20">
<path d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
@ -961,10 +961,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
<Button
onClick={ () => { setContent(); }}
label={__('Search', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg width="24" height="24" viewBox="-2 -4 20 20">
<path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
<path className="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
@ -980,10 +980,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
onChange={ (value) => { _.debounce(applySearchString(value), 300); } }
type="text"/>
<Button
class="previous-button"
className="previous-button"
disabled
label={__('Previous page', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg
width="30"
@ -998,10 +998,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
</span>
</Button>
<Button
class="next-button"
className="next-button"
disabled
label={__('Next page', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg
width="30"
@ -1062,7 +1062,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div>

View File

@ -353,7 +353,7 @@ export default class CollectionModal extends React.Component {
}
</div>
</div>
) : this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
) : this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>

View File

@ -227,7 +227,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
onClick={ onToggle }
aria-expanded={ isOpen }>
{ __('Items list source', 'tainacan') }
<span class="components-dropdown-menu__indicator"></span>
<span className="components-dropdown-menu__indicator"></span>
</ToolbarButton>
) }
renderContent={ ( { onToggle } ) => (
@ -808,7 +808,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
) :
(
<div style={{ fontSize: (baseFontSize - 2) + 'px' }}>
<div class="preview-warning">
<div className="preview-warning">
{ __('Warning: this is just a demonstration. To see the items list, either preview or publish your post.', 'tainacan') }
</div>
<div
@ -828,139 +828,139 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
class="items-list-placeholder">
<div class="search-control">
className="items-list-placeholder">
<div className="search-control">
{
!hideSearch ?
<span class="fake-searchbar">
{ !hideAdvancedSearch ? <span class="fake-advanced-searchbar"></span> : null }
<span className="fake-searchbar">
{ !hideAdvancedSearch ? <span className="fake-advanced-searchbar"></span> : null }
</span>
: null
}
{
showFiltersButtonInsideSearchControl && !hideHideFiltersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
showFiltersButtonInsideSearchControl && !hideHideFiltersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
}
{
!hideDisplayedMetadataButton ?
<span class="fake-button"><div class="fake-text"></div></span>
<span className="fake-button"><div className="fake-text"></div></span>
:null
}
{
!hideSortingArea ?
<span class="fake-button"> { !hideSortByButton ? <div class="fake-text"></div> : null }<div class="fake-icon"></div><div class="fake-text"></div></span>
<span className="fake-button"> { !hideSortByButton ? <div className="fake-text"></div> : null }<div className="fake-icon"></div><div className="fake-text"></div></span>
:null
}
{
!showInlineViewModeOptions ?
<span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span>
<span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span>
:
<div class="fake-buttons-group">
{ Array(3).fill().map( () => <div class="fake-button"><div class="fake-icon"></div></div> )}
{ showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div></span> : null }
<div className="fake-buttons-group">
{ Array(3).fill().map( () => <div className="fake-button"><div className="fake-icon"></div></div> )}
{ showFullscreenWithViewModes ? <span className="fake-button"><div className="fake-icon"></div></span> : null }
</div>
}
{
!showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
!showFullscreenWithViewModes ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
}
{
!hideExposersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
!hideExposersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
}
</div>
<div class="below-search-control">
{ !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span class="fake-hide-button"><div class="fake-icon"></div></span> : null }
<div className="below-search-control">
{ !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span className="fake-hide-button"><div className="fake-icon"></div></span> : null }
{
!hideFilters && !filtersAsModal && !startWithFiltersHidden ?
<div
style={{
flexBasis: filtersAreaWidth + '%'
}}
class="filters">
<div class="fake-filters-heading"></div>
className="filters">
<div className="fake-filters-heading"></div>
{ Array(2).fill().map( () => {
return <div class="fake-filter">
<span class="fake-text"></span>
<span class="fake-searchbar"></span>
return <div className="fake-filter">
<span className="fake-text"></span>
<span className="fake-searchbar"></span>
</div>
} )}
<div class="fake-filter">
<span class="fake-text"></span>
<div class="fake-checkbox-list">
<div className="fake-filter">
<span className="fake-text"></span>
<div className="fake-checkbox-list">
{ Array(4).fill().map( () => {
return <div>
<span class="fake-checkbox"></span>
<span class="fake-text"></span>
<span className="fake-checkbox"></span>
<span className="fake-text"></span>
</div>
} ) }
<div class="fake-link"></div>
<div className="fake-link"></div>
</div>
</div>
<div class="fake-filter">
<span class="fake-text"></span>
<span class="fake-searchbar"></span>
<div className="fake-filter">
<span className="fake-text"></span>
<span className="fake-searchbar"></span>
</div>
<div class="fake-filter">
<span class="fake-text"></span>
<div class="fake-checkbox-list">
<div className="fake-filter">
<span className="fake-text"></span>
<div className="fake-checkbox-list">
{ Array(2).fill().map( () => {
return <div>
<span class="fake-checkbox"></span>
<span class="fake-text"></span>
<span className="fake-checkbox"></span>
<span className="fake-text"></span>
</div>
} ) }
<div class="fake-link"></div>
<div className="fake-link"></div>
</div>
</div>
</div>
: null
}
<div class="aside-filters">
<div className="aside-filters">
<div className={ 'items' + (hideItemsThumbnail ? ' items-without-thumbnail' : '') }>
{ Array(5).fill().map( () => {
return <div class="fake-item">
<div class="fake-item-header">
<div class="fake-text"></div>
return <div className="fake-item">
<div className="fake-item-header">
<div className="fake-text"></div>
</div>
<div
style={{
backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : ''
}}
class="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
className="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div className="fake-item-description"></div> ) }
</div>
} ) }
<div class="fake-item fake-item-hovered">
<div class="fake-item-header">
<div class="fake-tooltip"><div class="fake-link"></div></div>
<div class="fake-text"></div>
<div className="fake-item fake-item-hovered">
<div className="fake-item-header">
<div className="fake-tooltip"><div className="fake-link"></div></div>
<div className="fake-text"></div>
</div>
<div
style={{
backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : ''
}}
class="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
className="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div className="fake-item-description"></div> ) }
</div>
{ Array(2).fill().map( () => {
return <div class="fake-item">
<div class="fake-item-header">
<div class="fake-text"></div>
return <div className="fake-item">
<div className="fake-item-header">
<div className="fake-text"></div>
</div>
<div
style={{
backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : ''
}}
class="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
className="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div className="fake-item-description"></div> ) }
</div>
} ) }
</div>
{ !hidePaginationArea ?
<div class="pagination">
<span class="fake-text"></span>
{ !hideItemsPerPageButton ? <span class="fake-button"><div class="fake-text"></div></span> : null }
{ !hideGoToPageButton ? <span class="fake-button"><div class="fake-text"></div></span> : null }
<div class="fake-buttons-group">
{ Array(6).fill().map( () => <div class="fake-link"></div> ) }
<div className="pagination">
<span className="fake-text"></span>
{ !hideItemsPerPageButton ? <span className="fake-button"><div className="fake-text"></div></span> : null }
{ !hideGoToPageButton ? <span className="fake-button"><div className="fake-text"></div></span> : null }
<div className="fake-buttons-group">
{ Array(6).fill().map( () => <div className="fake-link"></div> ) }
</div>
</div>
: null }

View File

@ -325,10 +325,10 @@ export default class TermModal extends React.Component {
} } />
}
</ul>
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> : null }
</div>
)
: this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
: this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
</div>
@ -350,7 +350,7 @@ export default class TermModal extends React.Component {
} } />
}
</ul>
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> : null }
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalTerms.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTerms + " " + __('terms', 'tainacan') + "."}</p>
{
@ -365,7 +365,7 @@ export default class TermModal extends React.Component {
}
</div>
</div>
) : this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
) : this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
</div>
@ -448,7 +448,7 @@ export default class TermModal extends React.Component {
</div>
) :
this.state.isLoadingTaxonomies ? (
<div class="spinner-container"><Spinner /></div>
<div className="spinner-container"><Spinner /></div>
) :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
@ -485,7 +485,7 @@ export default class TermModal extends React.Component {
}
</div>
</div>
) : this.state.isLoadingTaxonomies ? <div class="spinner-container"><Spinner /></div> :
) : this.state.isLoadingTaxonomies ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
</div>

View File

@ -147,7 +147,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
<span>{ facet.label ? facet.label : '' }</span>
{
facet.total_items ?
<span class="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>
<span className="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>
{ itemsCountStyle === 'below' ?
( facet.total_items != 1 ? (facet.total_items + ' ' + __('items', 'tainacan' )) : (facet.total_items + ' ' + __('item', 'tainacan' )) )
:
@ -182,19 +182,19 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
</a>
{ appendChildTerms && facet.total_children > 0 ?
isLoadingChildTerms == facetId ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div>
:
( childFacetsObject[facetId] && childFacetsObject[facetId].visible ?
<ul class="child-term-facets">
<ul className="child-term-facets">
{
childFacetsObject[facetId].facets.length ?
childFacetsObject[facetId].facets.map((aChildTermFacet) => {
return prepareFacet(aChildTermFacet);
})
:
<p class="no-child-facet-found">{ __( 'The child terms of this facet do not contain items.', 'tainacan' )}</p>
<p className="no-child-facet-found">{ __( 'The child terms of this facet do not contain items.', 'tainacan' )}</p>
}
</ul>
: null )
@ -790,14 +790,14 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
{
showSearchBar ?
<div class="facets-search-bar">
<div className="facets-search-bar">
<Button
onClick={ () => { setContent(); }}
label={__('Search', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg width="24" height="24" viewBox="-2 -4 20 20">
<path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
<path className="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
@ -866,7 +866,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div>
@ -901,10 +901,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
{ showLoadMore && facets.length > 0 && !isLoading ?
<button
class="show-more-button"
className="show-more-button"
disabled
label={__('Show more', 'tainacan')}>
<span class="icon">
<span className="icon">
<i>
<svg
width="24"

View File

@ -364,7 +364,7 @@ export default class MetadataModal extends React.Component {
<div>
<div className="modal-radio-list">
<p class="modal-radio-area-label">{__('Repository', 'tainacan')}</p>
<p className="modal-radio-area-label">{__('Repository', 'tainacan')}</p>
<RadioControl
className={'repository-radio-option'}
selected={ this.state.temporaryCollectionId }
@ -373,7 +373,7 @@ export default class MetadataModal extends React.Component {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
<hr/>
<p class="modal-radio-area-label">{__('Collections', 'tainacan')}</p>
<p className="modal-radio-area-label">{__('Collections', 'tainacan')}</p>
<RadioControl
selected={ this.state.temporaryCollectionId }
options={

View File

@ -215,7 +215,7 @@ export default class ParentTermModal extends React.Component {
<div>
<div className="modal-radio-list">
<p class="modal-radio-area-label">{__('Non specific term', 'tainacan')}</p>
<p className="modal-radio-area-label">{__('Non specific term', 'tainacan')}</p>
<RadioControl
className={'repository-radio-option'}
selected={ this.state.temporaryFacetId != null ? this.state.temporaryFacetId : ''}
@ -227,7 +227,7 @@ export default class ParentTermModal extends React.Component {
this.setState({ temporaryFacetId: aFacetId});
} } />
<hr/>
<p class="modal-radio-area-label">{__('Terms', 'tainacan')}</p>
<p className="modal-radio-area-label">{__('Terms', 'tainacan')}</p>
<RadioControl
selected={ this.state.temporaryFacetId }
options={

View File

@ -383,7 +383,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
{ itemId || templateMode ? (
<div className={ 'item-gallery-edit-container' }>
<div class="preview-warning">{__('Warning: this is just a demonstration. To see the gallery in action, either preview or publish your post.', 'tainacan') }</div>
<div className="preview-warning">{__('Warning: this is just a demonstration. To see the gallery in action, either preview or publish your post.', 'tainacan') }</div>
<ServerSideRender
block="tainacan/item-gallery"
attributes={ attributes }

View File

@ -282,13 +282,13 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
(item.title.description && !self.options.hide_media_description)
)
) {
innerHTML += '<div class="pswp__caption-inner">';
innerHTML += '<div className="pswp__caption-inner">';
if (item.title.caption && !self.options.hide_media_caption)
innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
innerHTML += '<span className="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
if (item.title.description && !self.options.hide_media_description)
innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
innerHTML += '<span className="pswp__description">' + item.title.description.innerHTML + '</span>';
innerHTML += '</div>';
}

View File

@ -263,7 +263,7 @@ export default function ({ attributes, setAttributes, isSelected }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div className={ 'item-metadata-sections-edit-container' }>

View File

@ -6,9 +6,9 @@
viewBox="0 0 6 6"
height="24px"
width="24px">
<Path d="m1.2849 0.84891c-0.085556 0-0.15764 0.029712-0.21631 0.088379-0.058667 0.058667-0.087891 0.13075-0.087891 0.21631v0.76611c0 0.083111 0.030686 0.1552 0.091797 0.21631l1.0669 1.0669c0.026889 0.026889 0.058548 0.049295 0.095215 0.066406 0.039111 0.017111 0.079538 0.025391 0.12109 0.025391 0.041556 0 0.080521-0.00828 0.11719-0.025391 0.039111-0.017111 0.072232-0.039518 0.099121-0.066406l0.7627-0.7627c0.058667-0.058667 0.087891-0.13075 0.087891-0.21631 0-0.085556-0.029224-0.15764-0.087891-0.21631l-1.0708-1.0703c-0.058667-0.058667-0.12929-0.088379-0.2124-0.088379zm0.21924 0.30469c0.00391-1.815e-4 0.00775 0 0.011719 0 0.063556 0 0.11762 0.022891 0.16162 0.069336 0.044 0.044 0.065918 0.098066 0.065918 0.16162 0 0.063556-0.021918 0.11713-0.065918 0.16113s-0.098066 0.065918-0.16162 0.065918c-0.063555 0-0.11859-0.021918-0.16504-0.065918-0.044-0.044-0.065918-0.097577-0.065918-0.16113 0-0.063556 0.021918-0.11762 0.065918-0.16162 0.043542-0.043542 0.09474-0.066615 0.15332-0.069336z" stroke-width=".25"/>
<Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" stroke-width=".25223"/>
<Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" stroke-width=".25223"/>
<Path d="m1.2849 0.84891c-0.085556 0-0.15764 0.029712-0.21631 0.088379-0.058667 0.058667-0.087891 0.13075-0.087891 0.21631v0.76611c0 0.083111 0.030686 0.1552 0.091797 0.21631l1.0669 1.0669c0.026889 0.026889 0.058548 0.049295 0.095215 0.066406 0.039111 0.017111 0.079538 0.025391 0.12109 0.025391 0.041556 0 0.080521-0.00828 0.11719-0.025391 0.039111-0.017111 0.072232-0.039518 0.099121-0.066406l0.7627-0.7627c0.058667-0.058667 0.087891-0.13075 0.087891-0.21631 0-0.085556-0.029224-0.15764-0.087891-0.21631l-1.0708-1.0703c-0.058667-0.058667-0.12929-0.088379-0.2124-0.088379zm0.21924 0.30469c0.00391-1.815e-4 0.00775 0 0.011719 0 0.063556 0 0.11762 0.022891 0.16162 0.069336 0.044 0.044 0.065918 0.098066 0.065918 0.16162 0 0.063556-0.021918 0.11713-0.065918 0.16113s-0.098066 0.065918-0.16162 0.065918c-0.063555 0-0.11859-0.021918-0.16504-0.065918-0.044-0.044-0.065918-0.097577-0.065918-0.16113 0-0.063556 0.021918-0.11762 0.065918-0.16162 0.043542-0.043542 0.09474-0.066615 0.15332-0.069336z" strokeWidth=".25"/>
<Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" strokeWidth=".25223"/>
<Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" strokeWidth=".25223"/>
</SVG>
);

View File

@ -218,7 +218,7 @@ export default function ({ attributes, setAttributes, isSelected }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div className={ 'item-metadata-sections-edit-container' }>

View File

@ -6,10 +6,10 @@
viewBox="0 0 6 6"
height="24px"
width="24px">
<Path d="m1.2849 0.84891c-0.085556 0-0.15764 0.029712-0.21631 0.088379-0.058667 0.058667-0.087891 0.13075-0.087891 0.21631v0.76611c0 0.083111 0.030686 0.1552 0.091797 0.21631l1.0669 1.0669c0.026889 0.026889 0.058548 0.049295 0.095215 0.066406 0.039111 0.017111 0.079538 0.025391 0.12109 0.025391 0.041556 0 0.080521-0.00828 0.11719-0.025391 0.039111-0.017111 0.072232-0.039518 0.099121-0.066406l0.7627-0.7627c0.058667-0.058667 0.087891-0.13075 0.087891-0.21631 0-0.085556-0.029224-0.15764-0.087891-0.21631l-1.0708-1.0703c-0.058667-0.058667-0.12929-0.088379-0.2124-0.088379zm0.21924 0.30469c0.00391-1.815e-4 0.00775 0 0.011719 0 0.063556 0 0.11762 0.022891 0.16162 0.069336 0.044 0.044 0.065918 0.098066 0.065918 0.16162 0 0.063556-0.021918 0.11713-0.065918 0.16113s-0.098066 0.065918-0.16162 0.065918c-0.063555 0-0.11859-0.021918-0.16504-0.065918-0.044-0.044-0.065918-0.097577-0.065918-0.16113 0-0.063556 0.021918-0.11762 0.065918-0.16162 0.043542-0.043542 0.09474-0.066615 0.15332-0.069336z" stroke-width=".25"/>
<Path d="m2.7444 1.1095 0.17272-0.099996s0.031904-0.0143 0.085176-0.010025c0.046428 0.003726 0.072053 0.029979 0.072053 0.029979l0.97841 0.97841c0.061111 0.061111 0.091667 0.13322 0.091667 0.21633 0 0.085553-0.029333 0.15766-0.088 0.21633l-0.73575 0.73575s-0.033678 0.042018-0.088029 0.047173c-0.063189 0.00599-0.098573-0.020678-0.098573-0.020678l-0.16231-0.094919 0.87267-0.88367z" stroke-width=".25"/>
<Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" stroke-width=".25223"/>
<Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" stroke-width=".25223"/>
<Path d="m1.2849 0.84891c-0.085556 0-0.15764 0.029712-0.21631 0.088379-0.058667 0.058667-0.087891 0.13075-0.087891 0.21631v0.76611c0 0.083111 0.030686 0.1552 0.091797 0.21631l1.0669 1.0669c0.026889 0.026889 0.058548 0.049295 0.095215 0.066406 0.039111 0.017111 0.079538 0.025391 0.12109 0.025391 0.041556 0 0.080521-0.00828 0.11719-0.025391 0.039111-0.017111 0.072232-0.039518 0.099121-0.066406l0.7627-0.7627c0.058667-0.058667 0.087891-0.13075 0.087891-0.21631 0-0.085556-0.029224-0.15764-0.087891-0.21631l-1.0708-1.0703c-0.058667-0.058667-0.12929-0.088379-0.2124-0.088379zm0.21924 0.30469c0.00391-1.815e-4 0.00775 0 0.011719 0 0.063556 0 0.11762 0.022891 0.16162 0.069336 0.044 0.044 0.065918 0.098066 0.065918 0.16162 0 0.063556-0.021918 0.11713-0.065918 0.16113s-0.098066 0.065918-0.16162 0.065918c-0.063555 0-0.11859-0.021918-0.16504-0.065918-0.044-0.044-0.065918-0.097577-0.065918-0.16113 0-0.063556 0.021918-0.11762 0.065918-0.16162 0.043542-0.043542 0.09474-0.066615 0.15332-0.069336z" strokeWidth=".25"/>
<Path d="m2.7444 1.1095 0.17272-0.099996s0.031904-0.0143 0.085176-0.010025c0.046428 0.003726 0.072053 0.029979 0.072053 0.029979l0.97841 0.97841c0.061111 0.061111 0.091667 0.13322 0.091667 0.21633 0 0.085553-0.029333 0.15766-0.088 0.21633l-0.73575 0.73575s-0.033678 0.042018-0.088029 0.047173c-0.063189 0.00599-0.098573-0.020678-0.098573-0.020678l-0.16231-0.094919 0.87267-0.88367z" strokeWidth=".25"/>
<Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" strokeWidth=".25223"/>
<Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" strokeWidth=".25223"/>
</SVG>
);

View File

@ -293,7 +293,7 @@ export default function ({ attributes, setAttributes, isSelected }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div className={ 'item-metadata-edit-container' }>

View File

@ -589,7 +589,7 @@ export default function ({ attributes, setAttributes }) {
) : (
<div style={{ fontSize: (baseFontSize - 2) + 'px' }}>
<div class="preview-warning">
<div className="preview-warning">
{ __('Warning: this is just a demonstration. To see the submission form, either preview or publish your post.', 'tainacan') }
</div>
<div
@ -603,7 +603,7 @@ export default function ({ attributes, setAttributes }) {
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
class="item-submission-form-placeholder">
className="item-submission-form-placeholder">
<div>
{
@ -612,25 +612,25 @@ export default function ({ attributes, setAttributes }) {
<div>
{ documentSectionLabel ?
<span>
<span style={{ display: 'flex', alignItems: 'baseline', marginBottom: '5px' }}><span class="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }</span>
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
<span style={{ display: 'flex', alignItems: 'baseline', marginBottom: '5px' }}><span className="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span className="fake-text fake-help-button"></span> : null }</span>
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span className="fake-text fake-text-help-description"></span></div> : null }
</span>
: null }
{ [ hideFileModalButton, hideTextModalButton, hideLinkModalButton ].filter((option) => { return option == false }).length > 1 ?
<div class="documents-section">
{ hideFileModalButton ? null : <span class="fake-circle"><span class="fake-icon"></span></span> }
{ hideTextModalButton ? null : <span class="fake-circle"><span class="fake-icon"></span></span> }
{ hideLinkModalButton ? null : <span class="fake-circle"><span class="fake-icon"></span></span> }
<div className="documents-section">
{ hideFileModalButton ? null : <span className="fake-circle"><span className="fake-icon"></span></span> }
{ hideTextModalButton ? null : <span className="fake-circle"><span className="fake-icon"></span></span> }
{ hideLinkModalButton ? null : <span className="fake-circle"><span className="fake-icon"></span></span> }
</div>
: (
(!hideFileModalButton && hideTextModalButton && hideLinkModalButton) ?
<div class="fake-image-uploader"></div>
<div className="fake-image-uploader"></div>
: (
(hideFileModalButton && !hideTextModalButton && hideLinkModalButton) ?
<span class="fake-textarea"></span>
<span className="fake-textarea"></span>
: (
(hideFileModalButton && hideTextModalButton && !hideLinkModalButton) ?
<span class="fake-input" style={{ width: '100%' }}></span>
<span className="fake-input" style={{ width: '100%' }}></span>
: null
)
)
@ -643,11 +643,11 @@ export default function ({ attributes, setAttributes }) {
<div style={{ display: 'flex', flexDirection: 'column' }}>
{ !thumbnailSectionLabel ?
<span>
<span style={{ display: 'flex', alignItems: 'baseline' }}><span class="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }</span>
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
<span style={{ display: 'flex', alignItems: 'baseline' }}><span className="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span className="fake-text fake-help-button"></span> : null }</span>
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span className="fake-text fake-text-help-description"></span></div> : null }
</span>
: null }
<div class="fake-switch"><span class="fake-icon"></span><span class="fake-text"></span></div>
<div className="fake-switch"><span className="fake-icon"></span><span className="fake-text"></span></div>
</div>
) : null
}
@ -657,12 +657,12 @@ export default function ({ attributes, setAttributes }) {
{ !attachmentsSectionLabel ?
<span
style={{ position: 'relative' }}
class="fake-text section-label">
<div class="fake-tooltip"><div class="fake-link"></div></div>
className="fake-text section-label">
<div className="fake-tooltip"><div className="fake-link"></div></div>
</span>
: null }
<div class="attachments-section">
<div class="fake-image-uploader"></div>
<div className="attachments-section">
<div className="fake-image-uploader"></div>
</div>
</div>
) : null
@ -671,45 +671,45 @@ export default function ({ attributes, setAttributes }) {
showAllowCommentsSection ?
(
<div>
<span style={{ display: 'flex', alignItems: 'baseline' }}><span class="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }</span>
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
<div class="fake-switch"><span class="fake-icon"></span><span class="fake-text"></span></div>
<span style={{ display: 'flex', alignItems: 'baseline' }}><span className="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span className="fake-text fake-help-button"></span> : null }</span>
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span className="fake-text fake-text-help-description"></span></div> : null }
<div className="fake-switch"><span className="fake-icon"></span><span className="fake-text"></span></div>
</div>
) : null }
</div>
<div style={{ flexGrow: '1' }}>
{ metadataSectionLabel ?
<div class="fake-text section-label"></div>
<div className="fake-text section-label"></div>
: null }
{ !hideCollapses && !isLayoutSteps ?
<div class="fake-link"></div>
<div className="fake-link"></div>
: null }
{ isLayoutSteps ?
<div class="fake-steps">
<div class="fake-step"/>
<div class="fake-step"/>
<div class="fake-step"/>
<div className="fake-steps">
<div className="fake-step"/>
<div className="fake-step"/>
<div className="fake-step"/>
</div>
: null }
<div class="metadata-section">
<div className="metadata-section">
{ enabledMetadata.length ?
enabledMetadata.map( (isEnabled) => {
return isEnabled ?
<div class={ 'fake-metadata' + (!hideCollapses ? ' has-collapse' : '') }>
{ !hideCollapses ? <span class="fake-collapse-arrow"></span> : null }
<div className={ 'fake-metadata' + (!hideCollapses ? ' has-collapse' : '') }>
{ !hideCollapses ? <span className="fake-collapse-arrow"></span> : null }
<span style={{ lineHeight: '0em' }}>
<span class="fake-text"></span>{ !hideMetadataTypes ? <span class="fake-text fake-text-info"></span> : null }{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
<span className="fake-text"></span>{ !hideMetadataTypes ? <span className="fake-text fake-text-info"></span> : null }{ !hideHelpButtons && !helpInfoBellowLabel ? <span className="fake-text fake-help-button"></span> : null }
{ (!hideHelpButtons && helpInfoBellowLabel) ? <div><span className="fake-text fake-text-help-description"></span></div> : null }
</span>
<span class="fake-input"></span>
<span className="fake-input"></span>
</div>
: null
}) :
Array(12).fill().map( () => {
return <div class={ 'fake-metadata' + (!hideCollapses ? ' has-collapse' : '') }>
{ !hideCollapses ? <span class="fake-collapse-arrow"></span> : null }
<span class="fake-text"></span>
<span class="fake-input"></span>
return <div className={ 'fake-metadata' + (!hideCollapses ? ' has-collapse' : '') }>
{ !hideCollapses ? <span className="fake-collapse-arrow"></span> : null }
<span className="fake-text"></span>
<span className="fake-input"></span>
</div>
})
}
@ -717,8 +717,8 @@ export default function ({ attributes, setAttributes }) {
</div>
{ showTermsAgreementCheckbox ?
<div class="fake-checkbox-confirmation">
<span class="fake-checkbox"></span>
<div className="fake-checkbox-confirmation">
<span className="fake-checkbox"></span>
<RichText
{ ...blockProps }
tagName="p"
@ -730,10 +730,10 @@ export default function ({ attributes, setAttributes }) {
: null
}
<div class="form-footer">
<span class="fake-button outline"><span class="fake-text"></span></span>
<span class="fake-text"></span>
<span class="fake-button"><span class="fake-text"></span></span>
<div className="form-footer">
<span className="fake-button outline"><span className="fake-text"></span></span>
<span className="fake-text"></span>
<span className="fake-button"><span className="fake-text"></span></span>
</div>
</div>
</div>

View File

@ -362,7 +362,7 @@ export default class ItemsModal extends React.Component {
}
</div>
</div>
) : this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
) : this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>

View File

@ -1,5 +1,5 @@
const { __ } = wp.i18n;
const { useEffect } = wp.element;
const { useBlockProps, BlockControls, AlignmentControl } = wp.blockEditor;
export default function ({ attributes, setAttributes, context }) {
@ -24,8 +24,10 @@ export default function ({ attributes, setAttributes, context }) {
if (context['tainacan/metadataSectionDescription'])
sectionDescription = context['tainacan/metadataSectionDescription'];
if ( context['tainacan/metadataSectionId'] || context['tainacan/metadataSectionDescription'] )
setAttributes({ sectionId, sectionDescription });
useEffect(() => {
if ( context['tainacan/metadataSectionId'] || context['tainacan/metadataSectionDescription'] )
setAttributes({ sectionId, sectionDescription });
}, [ context ]);
return <>
<BlockControls group="block">

View File

@ -8,7 +8,7 @@
width="24px">
<Path d="m0.9834 3.7637v0.37842h1.8848v-0.37842h-1.8848zm2.1602 0v0.37842h1.8755v-0.37842h-1.8755z"/>
<Path d="m0.9834 4.7729v0.37793h1.0845v-0.37793h-1.0845zm1.3599 0v0.37793h0.91016v-0.37793h-0.91016z"/>
<G stroke-width=".25">
<G strokeWidth=".25">
<Path d="m2.3397 2.6393q0-0.13997-0.094401-0.22624-0.092773-0.086263-0.43131-0.19043-0.33691-0.10579-0.5485-0.26855-0.20996-0.16439-0.20996-0.44922 0-0.28646 0.23112-0.47038 0.23275-0.18555 0.60872-0.18555 0.40202 0 0.62825 0.21484 0.22624 0.21322 0.22624 0.50944h-0.41016q0-0.17415-0.10905-0.28483-0.10905-0.1123-0.34017-0.1123-0.21647 0-0.32064 0.094401-0.10254 0.092773-0.10254 0.23275 0 0.13346 0.1237 0.22135 0.1237 0.086263 0.37272 0.1595 0.40202 0.11719 0.59407 0.29297 0.19368 0.17578 0.19368 0.45898 0 0.29948-0.22949 0.47363-0.22786 0.17415-0.61361 0.17415-0.22786 0-0.44108-0.083008-0.21159-0.083008-0.34993-0.24902-0.13672-0.16602-0.13672-0.41667h0.41178q0 0.22461 0.14811 0.32389 0.14974 0.099284 0.36784 0.099284 0.21484 0 0.32227-0.087891 0.10905-0.08789 0.10905-0.23112z"/>
</G>
</SVG>

View File

@ -1,6 +1,6 @@
const { __ } = wp.i18n;
const { ToolbarDropdownMenu, SVG, Path, __experimentalHeading: Heading } = wp.components;
const { useEffect } = wp.element;
const { useBlockProps, BlockControls, AlignmentControl } = wp.blockEditor;
const levelToPath = {
@ -35,8 +35,10 @@ export default function ({ attributes, setAttributes, context }) {
if (context['tainacan/metadataSectionName'])
sectionName = context['tainacan/metadataSectionName'];
if ( context['tainacan/metadataSectionId'] || context['tainacan/metadataSectionName'] )
setAttributes({ sectionId, sectionName });
useEffect(() => {
if ( context['tainacan/metadataSectionId'] || context['tainacan/metadataSectionName'] )
setAttributes({ sectionId, sectionName });
}, [ context ]);
return <>

View File

@ -1,16 +1,16 @@
const { SVG, Path, G } = wp.components;
const { SVG, Path, G } = wp.components;
export default (
export default (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6 6"
height="24px"
width="24px">
<Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" stroke-width=".25223"/>
<Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" stroke-width=".25223"/>
<G stroke-width=".25">
<Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" strokeWidth=".25223"/>
<Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" strokeWidth=".25223"/>
<G strokeWidth=".25">
<Path d="m2.3397 2.6393q0-0.13997-0.094401-0.22624-0.092773-0.086263-0.43131-0.19043-0.33691-0.10579-0.5485-0.26855-0.20996-0.16439-0.20996-0.44922 0-0.28646 0.23112-0.47038 0.23275-0.18555 0.60872-0.18555 0.40202 0 0.62825 0.21484 0.22624 0.21322 0.22624 0.50944h-0.41016q0-0.17415-0.10905-0.28483-0.10905-0.1123-0.34017-0.1123-0.21647 0-0.32064 0.094401-0.10254 0.092773-0.10254 0.23275 0 0.13346 0.1237 0.22135 0.1237 0.086263 0.37272 0.1595 0.40202 0.11719 0.59407 0.29297 0.19368 0.17578 0.19368 0.45898 0 0.29948-0.22949 0.47363-0.22786 0.17415-0.61361 0.17415-0.22786 0-0.44108-0.083008-0.21159-0.083008-0.34993-0.24902-0.13672-0.16602-0.13672-0.41667h0.41178q0 0.22461 0.14811 0.32389 0.14974 0.099284 0.36784 0.099284 0.21484 0 0.32227-0.087891 0.10905-0.08789 0.10905-0.23112z"/>
</G>
</SVG>
);
);

View File

@ -216,7 +216,7 @@ export default function ({ attributes, setAttributes, isSelected }) {
}
{ isLoading ?
<div class="spinner-container">
<div className="spinner-container">
<Spinner />
</div> :
<div>

View File

@ -57,16 +57,16 @@ export default function({ attributes, setAttributes, isSelected }) {
}}>
<div
style={{ color: collectionTextColor ? collectionTextColor : '' }}
class="search-bar-collection-header-title">
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }</span> : null }
className="search-bar-collection-header-title">
{ showCollectionLabel ? <span className="label">{ __('Collection', 'tainacan') }</span> : null }
<h3
class="has-text-color"
className="has-text-color"
style={{ fontSize: collectionTextSize ? collectionTextSize + 'rem' : '2rem' }}>
{ collectionName ? collectionName : '' }
</h3>
</div>
{ collectionId && collectionSlug ?
<div class="tainacan-search-container">
<div className="tainacan-search-container">
<form
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
className={
@ -84,9 +84,9 @@ export default function({ attributes, setAttributes, isSelected }) {
placeholder={ placeholderText }
/>
<button
class="button"
className="button"
type="submit">
<span class="icon">
<span className="icon">
<i>
<svg
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
@ -130,9 +130,9 @@ export default function({ attributes, setAttributes, isSelected }) {
placeholder={ placeholderText }
/>
<button
class="button"
className="button"
type="submit">
<span class="icon">
<span className="icon">
<i>
<svg
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
@ -398,7 +398,7 @@ export default function({ attributes, setAttributes, isSelected }) {
alt="Tainacan Logo"/>
)}>
<p>
<span class="icon">
<span className="icon">
<i>
<svg width="24" height="24" viewBox="-2 -2 20 20">
<path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
@ -446,16 +446,16 @@ export default function({ attributes, setAttributes, isSelected }) {
}}>
<div
style={{ color: collectionTextColor ? collectionTextColor : '' }}
class="search-bar-collection-header-title">
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }</span> : null }
className="search-bar-collection-header-title">
{ showCollectionLabel ? <span className="label">{ __('Collection', 'tainacan') }</span> : null }
<h3
class="has-text-color"
className="has-text-color"
style={{ fontSize: collectionTextSize ? collectionTextSize + 'rem' : '2rem' }}>
{ collectionName ? collectionName : '' }
</h3>
</div>
{ collectionId && collectionSlug ?
<div class="tainacan-search-container">
<div className="tainacan-search-container">
<div
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
className={
@ -471,9 +471,9 @@ export default function({ attributes, setAttributes, isSelected }) {
placeholder={ placeholderText }
/>
<button
class="button"
className="button"
onClick={(event) => { event.preventDefault(); return false; }}>
<span class="icon">
<span className="icon">
<i>
<svg
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
@ -501,7 +501,7 @@ export default function({ attributes, setAttributes, isSelected }) {
}
{ collectionId && collectionSlug && !showCollectionHeader ?
<div class="tainacan-search-container">
<div className="tainacan-search-container">
<div
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
className={
@ -517,8 +517,8 @@ export default function({ attributes, setAttributes, isSelected }) {
placeholder={ placeholderText }
/>
<button
class="button">
<span class="icon">
className="button">
<span className="icon">
<i>
<svg
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}

View File

@ -266,7 +266,7 @@ export default class SearchBarModal extends React.Component {
<div>
<div className="modal-radio-list">
<p class="modal-radio-area-label">{__('Repository', 'tainacan')}</p>
<p className="modal-radio-area-label">{__('Repository', 'tainacan')}</p>
<RadioControl
className={'repository-radio-option'}
selected={ this.state.temporaryCollectionId }
@ -275,7 +275,7 @@ export default class SearchBarModal extends React.Component {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
<hr/>
<p class="modal-radio-area-label">{__('Collections', 'tainacan')}</p>
<p className="modal-radio-area-label">{__('Collections', 'tainacan')}</p>
<RadioControl
selected={ this.state.temporaryCollectionId }
options={

View File

@ -31,9 +31,9 @@ export default function({ attributes, setAttributes, isSelected }){
<button
onClick={ () => removeTermOfId(term.id) }
type="button"
class="components-button has-icon"
className="components-button has-icon"
aria-label={__('Remove', 'tainacan')}>
<span class="dashicon dashicons dashicons-no-alt" />
<span className="dashicon dashicons dashicons-no-alt" />
</button>
<a
id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }

View File

@ -377,10 +377,10 @@ export default class TermsModal extends React.Component {
)
}
</ul>
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> : null }
</div>
)
: this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
: this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
</div>
@ -409,7 +409,7 @@ export default class TermsModal extends React.Component {
)
}
</ul>
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
{ this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> : null }
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalTerms.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTerms + " " + __('terms', 'tainacan') + "."}</p>
{
@ -424,7 +424,7 @@ export default class TermsModal extends React.Component {
}
</div>
</div>
) : this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
) : this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
</div>
@ -507,7 +507,7 @@ export default class TermsModal extends React.Component {
</div>
) :
this.state.isLoadingTaxonomies ? (
<div class="spinner-container"><Spinner /></div>
<div className="spinner-container"><Spinner /></div>
) :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
@ -544,7 +544,7 @@ export default class TermsModal extends React.Component {
}
</div>
</div>
) : this.state.isLoadingTaxonomies ? <div class="spinner-container"><Spinner /></div> :
) : this.state.isLoadingTaxonomies ? <div className="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
</div>