Improves demontration area using proper color and font sizes from custom variables.
This commit is contained in:
Mateus Machado Luna
parent
e370752af3
commit
e500b6a4ff
|
|
@ -220,6 +220,7 @@
|
|||
text-align: center;
|
||||
margin: 4px auto; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder {
|
||||
font-size: 1.125em;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -252,73 +253,161 @@
|
|||
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 40px 20px 60px 15px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-text {
|
||||
margin: 15%;
|
||||
width: 80%; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
margin: 4% 12%; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-text {
|
||||
margin: 4px 0;
|
||||
width: 35%;
|
||||
background-color: var(--tainacan-label-color, rgba(200, 200, 200, 0.2)); }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-searchbar {
|
||||
width: 100%; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list .fake-checkbox {
|
||||
display: block;
|
||||
width: 0.4em;
|
||||
height: 0.4em;
|
||||
min-width: 0.4em;
|
||||
min-height: 0.4em;
|
||||
max-width: 0.4em;
|
||||
max-height: 0.4em;
|
||||
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
|
||||
border-radius: 2px;
|
||||
margin-right: 4px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list .fake-text {
|
||||
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
|
||||
width: 54%; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list .fake-link {
|
||||
width: 25%;
|
||||
margin: 3px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filters-heading {
|
||||
position: relative;
|
||||
top: -1.3em;
|
||||
left: -0.3em;
|
||||
background-color: var(--tainacan-heading-color, rgba(200, 200, 200, 0.3));
|
||||
height: 0.2em;
|
||||
width: 28%;
|
||||
border-radius: 2px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto; }
|
||||
flex: 1 1 auto; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters .items {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly; }
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters .pagination {
|
||||
flex: 0 1 5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters .pagination > .fake-text {
|
||||
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.2)); }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-text {
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
height: 5px;
|
||||
width: 15%;
|
||||
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
|
||||
height: 0.2em;
|
||||
width: 24%;
|
||||
min-width: 1.25em;
|
||||
border-radius: 2px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-link {
|
||||
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
|
||||
height: 0.2em;
|
||||
width: 10%;
|
||||
border-radius: 2px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-icon {
|
||||
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.3));
|
||||
height: 0.3em;
|
||||
width: 0.3em;
|
||||
min-height: 0.3em;
|
||||
min-width: 0.3em;
|
||||
max-height: 0.3em;
|
||||
max-width: 0.3em;
|
||||
border-radius: 5px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-searchbar {
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
height: 10px;
|
||||
background-color: var(--tainacan-input-background-color, rgba(200, 200, 200, 0.3));
|
||||
height: 0.8em;
|
||||
width: 18%;
|
||||
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
|
||||
border-radius: 3px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-searchbar .fake-advanced-searchbar {
|
||||
display: block;
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
height: 4px;
|
||||
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
|
||||
height: 0.2em;
|
||||
border-radius: 3px;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
bottom: -14px; }
|
||||
bottom: -0.85em; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-hide-button {
|
||||
display: block;
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
height: 14px;
|
||||
background-color: var(--tainacan-primary, rgba(200, 200, 200, 0.3));
|
||||
height: 0.9em;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 42px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-button {
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
height: 10px;
|
||||
width: 12%;
|
||||
border-radius: 3px; }
|
||||
background-color: var(--tainacan-background-color, white);
|
||||
height: 0.8em;
|
||||
width: 10%;
|
||||
max-width: 3.25em;
|
||||
min-width: 1em;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-button .fake-text {
|
||||
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
|
||||
width: 95%;
|
||||
margin: 0 2px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-button .fake-icon {
|
||||
flex: 1 0 auto;
|
||||
margin: 0 2px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-buttons-group {
|
||||
flex: 0 0 15%;
|
||||
display: flex;
|
||||
justify-content: space-evenly; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item {
|
||||
flex: 0 0 46%;
|
||||
margin: 6px;
|
||||
background-color: var(--tainacan-item-hover-background-color, rgba(200, 200, 200, 0.2)); }
|
||||
flex: 1 0 158px;
|
||||
margin: 12px;
|
||||
height: 78px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item:hover {
|
||||
background-color: var(--tainacan-item-hover-background-color, rgba(200, 200, 200, 0.2)); }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item:hover .fake-item-header {
|
||||
background-color: var(--tainacan-item-heading-hover-background-color, rgba(200, 200, 200, 0.3)); }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-header {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
background-color: var(--tainacan-item-heading-hover-background-color, rgba(200, 200, 200, 0.3)); }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-header .fake-text {
|
||||
background-color: var(--tainacan-heading-color, rgba(200, 200, 200, 0.35)); }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-thumb {
|
||||
background-size: cover;
|
||||
background-color: rgba(59, 159, 180, 0.3);
|
||||
height: 58px;
|
||||
width: 58px;
|
||||
float: left; }
|
||||
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-description {
|
||||
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.15));
|
||||
height: 0.18em;
|
||||
width: 55%;
|
||||
border-radius: 2px;
|
||||
margin: 8px 6px 2px 6px;
|
||||
position: relative;
|
||||
left: 62px; }
|
||||
.wp-block-tainacan-faceted-search .theme-items-list {
|
||||
max-width: 100% !important; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -52,6 +52,7 @@
|
|||
margin: 4px auto;
|
||||
}
|
||||
.items-list-placeholder {
|
||||
font-size: 1.125em;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -88,25 +89,71 @@
|
|||
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 40px 20px 60px 15px;
|
||||
|
||||
.fake-text {
|
||||
margin: 15%;
|
||||
.fake-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
margin: 4% 12%;
|
||||
.fake-text {
|
||||
margin: 4px 0;
|
||||
width: 35%;
|
||||
background-color: var(--tainacan-label-color, rgba(200,200,200, 0.2));
|
||||
}
|
||||
.fake-searchbar {
|
||||
width: 100%;
|
||||
}
|
||||
.fake-checkbox-list {
|
||||
&>div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.fake-checkbox {
|
||||
display: block;
|
||||
width: 0.4em;
|
||||
height: 0.4em;
|
||||
min-width: 0.4em;
|
||||
min-height: 0.4em;
|
||||
max-width: 0.4em;
|
||||
max-height: 0.4em;
|
||||
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.fake-text {
|
||||
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
|
||||
width: 54%;
|
||||
}
|
||||
.fake-link {
|
||||
width: 25%;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fake-filters-heading {
|
||||
position: relative;
|
||||
top: -1.3em;
|
||||
left: -0.3em;
|
||||
background-color: var(--tainacan-heading-color, rgba(200,200,200, 0.3));
|
||||
height: 0.2em;
|
||||
width: 28%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.aside-filters {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
|
||||
.items {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
|
@ -114,35 +161,57 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&>.fake-text {
|
||||
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fake-text {
|
||||
background-color: rgba(200,200,200, 0.3);
|
||||
height: 5px;
|
||||
width: 15%;
|
||||
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
|
||||
height: 0.2em;
|
||||
width: 24%;
|
||||
min-width: 1.25em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.fake-link {
|
||||
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
|
||||
height: 0.2em;
|
||||
width: 10%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.fake-icon {
|
||||
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.3));
|
||||
height: 0.3em;
|
||||
width: 0.3em;
|
||||
min-height: 0.3em;
|
||||
min-width: 0.3em;
|
||||
max-height: 0.3em;
|
||||
max-width: 0.3em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.fake-searchbar {
|
||||
background-color: rgba(200,200,200, 0.3);
|
||||
height: 10px;
|
||||
background-color: var(--tainacan-input-background-color, rgba(200,200,200, 0.3));
|
||||
height: 0.8em;
|
||||
width: 18%;
|
||||
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
|
||||
border-radius: 3px;
|
||||
|
||||
.fake-advanced-searchbar {
|
||||
display: block;
|
||||
background-color: rgba(200,200,200, 0.3);
|
||||
height: 4px;
|
||||
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
|
||||
height: 0.2em;
|
||||
border-radius: 3px;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
bottom: -14px;
|
||||
bottom: -0.85em;
|
||||
}
|
||||
}
|
||||
.fake-hide-button {
|
||||
display: block;
|
||||
background-color: rgba(200,200,200, 0.3);
|
||||
height: 14px;
|
||||
background-color: var(--tainacan-primary, rgba(200,200,200, 0.3));
|
||||
height: 0.9em;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
|
|
@ -150,10 +219,25 @@
|
|||
top: 42px;
|
||||
}
|
||||
.fake-button {
|
||||
background-color: rgba(200,200,200, 0.3);
|
||||
height: 10px;
|
||||
width: 12%;
|
||||
background-color: var(--tainacan-background-color, white);
|
||||
height: 0.8em;
|
||||
width: 10%;
|
||||
max-width: 3.25em;
|
||||
min-width: 1em;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fake-text {
|
||||
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
|
||||
width: 95%;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.fake-icon {
|
||||
flex: 1 0 auto;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
.fake-buttons-group {
|
||||
flex: 0 0 15%;
|
||||
|
|
@ -161,17 +245,44 @@
|
|||
justify-content: space-evenly;
|
||||
}
|
||||
.fake-item {
|
||||
flex: 0 0 46%;
|
||||
margin: 6px;
|
||||
background-color: var(--tainacan-item-hover-background-color, rgba(200,200,200, 0.2));
|
||||
|
||||
flex: 1 0 180px;
|
||||
margin: 12px;
|
||||
height: 78px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--tainacan-item-hover-background-color, rgba(200,200,200, 0.2));
|
||||
.fake-item-header {
|
||||
background-color: var(--tainacan-item-heading-hover-background-color, rgba(200,200,200, 0.3));
|
||||
}
|
||||
}
|
||||
.fake-item-header {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
background-color: var(--tainacan-item-heading-hover-background-color, rgba(200,200,200, 0.3));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px;
|
||||
|
||||
.fake-text {
|
||||
background-color: var(--tainacan-heading-color, rgba(200,200,200, 0.35));
|
||||
}
|
||||
}
|
||||
.fake-item-thumb {
|
||||
background-size: cover;
|
||||
background-color: rgba(random(255), random(255), random(255), 0.3);
|
||||
height: 58px;
|
||||
width: 58px;
|
||||
float: left;
|
||||
}
|
||||
.fake-item-description {
|
||||
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.15));
|
||||
height: 0.18em;
|
||||
width: 55%;
|
||||
border-radius: 2px;
|
||||
margin: 8px 6px 2px 6px;
|
||||
position: relative;
|
||||
left: 62px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -444,16 +444,13 @@ registerBlockType('tainacan/faceted-search', {
|
|||
</Placeholder>
|
||||
) :
|
||||
(
|
||||
<div>
|
||||
<div
|
||||
style={{ fontSize: (baseFontSize - 2) + 'px' }}
|
||||
class="preview-warning">
|
||||
<div style={{ fontSize: (baseFontSize - 2) + 'px' }}>
|
||||
<div class="preview-warning">
|
||||
{ __('Warning: this is just a demonstration. To see the items list, either preview or publish your post.', 'tainacan') }
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
'--tainacan-background-color': backgroundColor,
|
||||
'font-size': baseFontSize + 'px'
|
||||
'--tainacan-background-color': backgroundColor
|
||||
}}
|
||||
class="items-list-placeholder">
|
||||
<div class="search-control">
|
||||
|
|
@ -464,24 +461,22 @@ registerBlockType('tainacan/faceted-search', {
|
|||
</span>
|
||||
: null
|
||||
}
|
||||
{
|
||||
!hideSortByButton ? <span class="fake-button"></span> : null
|
||||
}
|
||||
<span class="fake-button"></span>
|
||||
<span class="fake-button"><div class="fake-text"></div></span>
|
||||
<span class="fake-button"> { !hideSortByButton ? <div class="fake-text"></div> : null }<div class="fake-icon"></div><div class="fake-text"></div></span>
|
||||
{
|
||||
!showInlineViewModeOptions ?
|
||||
<span class="fake-button"></span>
|
||||
<span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span>
|
||||
:
|
||||
<div class="fake-buttons-group">
|
||||
{ Array(3).fill().map( () => <div class="fake-button"></div> )}
|
||||
{ showFullscreenWithViewModes ? <span class="fake-button"></span> : null }
|
||||
{ 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>
|
||||
}
|
||||
{
|
||||
!showFullscreenWithViewModes ? <span class="fake-button"></span> : null
|
||||
!showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
|
||||
}
|
||||
{
|
||||
!hideExposersButton ? <span class="fake-button"></span> : null
|
||||
!hideExposersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
|
||||
}
|
||||
</div>
|
||||
<div class="below-search-control">
|
||||
|
|
@ -493,19 +488,55 @@ registerBlockType('tainacan/faceted-search', {
|
|||
flexBasis: filtersAreaWidth + '%'
|
||||
}}
|
||||
class="filters">
|
||||
{ Array(8).fill().map( () => <span class="fake-text"></span> )}
|
||||
<div class="fake-filters-heading"></div>
|
||||
{ Array(2).fill().map( () => {
|
||||
return <div class="fake-filter">
|
||||
<span class="fake-text"></span>
|
||||
<span class="fake-searchbar"></span>
|
||||
</div>
|
||||
} )}
|
||||
<div class="fake-filter">
|
||||
<span class="fake-text"></span>
|
||||
<div class="fake-checkbox-list">
|
||||
{ Array(4).fill().map( () => {
|
||||
return <div>
|
||||
<span class="fake-checkbox"></span>
|
||||
<span class="fake-text"></span>
|
||||
</div>
|
||||
} ) }
|
||||
<div class="fake-link"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fake-filter">
|
||||
<span class="fake-text"></span>
|
||||
<span class="fake-searchbar"></span>
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div class="aside-filters">
|
||||
<div class="items">
|
||||
{ Array(6).fill().map( () => <div class="fake-item"><span class="fake-item-header"></span></div> ) }
|
||||
{ Array(6).fill().map( () => {
|
||||
return <div class="fake-item">
|
||||
<div class="fake-item-header">
|
||||
<div class="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> ) }
|
||||
</div>
|
||||
} ) }
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span class="fake-text"></span>
|
||||
{ !hideItemsPerPageButton ? <span class="fake-button"></span> : null }
|
||||
{ !hideGoToPageButton ? <span class="fake-button"></span> : null }
|
||||
<span class="fake-searchbar"></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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue