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

Adds placeholder review for the form block.

This commit is contained in:
mateuswetah 2020-05-28 11:47:33 -03:00
parent 6347a5e6ac
commit ca0a72ec6c
5 changed files with 390 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
compile-sass.sh
View File

@ -35,7 +35,9 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/views/gutenberg-blocks/t
sass -E 'UTF-8' --cache-location .tmp/sass-cache-13 src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss:src/assets/css/tainacan-gutenberg-block-faceted-search.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-14 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-14 src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
echo "Compilação do Sass Concluído!"
exit 0

201
src/assets/css/tainacan-gutenberg-block-item-submission-form.css Normal file
View File

@ -0,0 +1,201 @@
.wp-block-tainacan-item-submission-form {
margin: 2em auto; }
.wp-block-tainacan-item-submission-form .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
.wp-block-tainacan-item-submission-form .preview-warning {
width: 100%;
font-size: 0.875em;
font-style: italic;
color: var(--tainacan-block-gray4, #555758);
text-align: center;
margin: 4px auto; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder {
padding: 0 4.1666667%;
font-size: 1.125em;
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
border-radius: 4px;
border: 1px solid rgba(200, 200, 200, 0.3);
overflow: hidden; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .form-columns {
display: flex; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .form-columns > div:first-child {
margin-right: 4.1666667%; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-text {
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
height: 0.2em;
width: 24%;
min-width: 1.25em;
border-radius: 2px;
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-text.section-label {
margin-top: 1em;
height: 0.25em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-link {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
height: 0.2em;
width: 10%;
border-radius: 2px;
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-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;
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-image {
background-size: cover;
background-color: var(--tainacan-gray2, rgba(200, 200, 200, 0.3));
height: 3em;
width: 3em;
min-height: 3em;
min-width: 3em;
max-height: 3em;
max-width: 3em;
border-radius: 2px;
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-tooltip {
background-color: var(--tainacan-primary, rgba(200, 200, 200, 0.1));
position: absolute;
height: 0.75em;
width: 4em;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
top: -0.75em;
left: 1em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-tooltip .fake-link {
width: 100%;
margin: 0 4px 0 8px; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-tooltip:before {
content: "";
display: block;
position: absolute;
left: 12px;
width: 0;
height: 0;
border-style: solid; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-tooltip:before {
border-color: var(--tainacan-primary) transparent transparent transparent;
border-right-width: 7px;
border-top-width: 6px;
border-left-width: 7px;
bottom: -8px; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-input {
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;
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
padding: 0.3em 0.5em;
height: 0.8em;
width: 10%;
max-width: 3.25em;
min-width: 1em;
margin-left: 6px;
border-radius: 3px;
display: flex;
align-items: center;
margin-right: auto; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button .fake-text {
background-color: var(--tainacan-background-color, white);
width: 95%;
margin: 0 2px; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button .fake-icon {
flex: 1 0 auto;
margin: 0 2px; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button.outline {
border: 2px solid var(--tainacan-input-border-color rgba(200, 200, 200, 0.3));
background-color: var(--tainacan-background-color, white); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button.outline .fake-text {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.1)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-switch {
padding: 0.5em;
display: flex;
align-items: center; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-switch .fake-icon {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
width: 1.5em;
height: 0.5em;
border-radius: 1em;
max-height: 1em;
max-width: 1em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-switch .fake-text {
margin-left: 0.5em;
width: 24%;
max-width: 4em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .documents-section {
display: flex;
justify-content: space-between;
padding: 0.5em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .documents-section .fake-circle {
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .documents-section .fake-circle .fake-icon {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .documents-section .fake-circle:hover {
background-color: var(--tainacan-primary, rgba(200, 200, 200, 0.2)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .thumbnail-section {
padding: 0.5em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .thumbnail-section .fake-image {
height: 3.5em;
width: 3.5em;
min-height: 3.5em;
min-width: 3.5em;
max-height: 3.5em;
max-width: 3.5em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .attachments-section {
padding: 0.5em;
display: flex;
flex-wrap: wrap;
justify-content: flex-start; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .attachments-section .fake-image {
margin-right: 0.25em;
margin-bottom: 0.25em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .metadata-section {
width: 100%;
padding: 0.5em 1em;
display: flex;
flex-wrap: nowrap;
flex-direction: column; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .metadata-section .fake-metadata {
display: flex;
flex-direction: column;
flex-wrap: nowrap; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .metadata-section .fake-metadata .fake-input {
width: 100%;
max-width: 100%;
margin: 0.2em 0 0.4em 0; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .form-footer {
padding: 1em 0 2em 0;
display: flex;
align-items: center;
justify-content: space-between; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .form-footer > .fake-text {
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .form-footer .fake-button {
margin: 0 1em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .form-footer .fake-button.outline {
margin-left: auto; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-submission-form.css.map */

7
src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "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",
"sources": ["../../views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss"],
"names": [],
"file": "tainacan-gutenberg-block-item-submission-form.css"
}

46
src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js
View File

@ -336,7 +336,51 @@ registerBlockType('tainacan/item-submission-form', {
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
class="items-list-placeholder">
class="item-submission-form-placeholder">
<div class="form-columns">
<div>
<span class="fake-text section-label"></span>
<div class="documents-section">
<span class="fake-circle"><span class="fake-icon"></span></span>
<span class="fake-circle"><span class="fake-icon"></span></span>
<span class="fake-circle"><span class="fake-icon"></span></span>
</div>
<span class="fake-text section-label"></span>
<div class="thumbnail-section">
<div
style={{
backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : ''
}}
class="fake-image"></div>
</div>
<span class="fake-text section-label"></span>
<div class="attachments-section">
<div class="fake-image"></div>
<div class="fake-image"></div>
<div class="fake-image"></div>
<div class="fake-image"></div>
</div>
<span class="fake-text section-label"></span>
<div class="fake-switch"><span class="fake-icon"></span><span class="fake-text"></span></div>
</div>
<div style={{ flexGrow: '1' }}>
<span class="fake-text section-label"></span>
<div class="metadata-section">
{ Array(12).fill().map( () => {
return <div class="fake-metadata">
<span class="fake-text"></span>
<span class="fake-input"></span>
</div>
} )}
</div>
</div>
</div>
<div class="form-footer">
<span class="fake-text"></span>
<span class="fake-button outline"><span class="fake-text"></span></span>
<span class="fake-button"><span class="fake-text"></span></span>
</div>
</div>
</div>

324
src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss
View File

@ -1,6 +1,6 @@
@import '../../gutenberg-blocks-variables.scss';
.wp-block-tainacan-faceted-search {
.wp-block-tainacan-item-submission-form {
margin: 2em auto;
// Spinner
@ -21,9 +21,9 @@
text-align: center;
margin: 4px auto;
}
.items-list-placeholder {
.item-submission-form-placeholder {
padding: 0 4.1666667%;
font-size: 1.125em;
min-height: 500px;
width: 100%;
display: flex;
flex-wrap: nowrap;
@ -32,128 +32,33 @@
border: 1px solid rgba(200,200,200, 0.3);
overflow: hidden;
.search-control,
.filters,
.items,
.pagination {
background-color: var(--tainacan-background-color, white);
border: 1px solid rgba(200,200,200, 0.3);
padding: 12px;
margin: 0px;
border-radius: 1px;
}
.search-control {
flex: 0 0 15%;
.form-columns {
display: flex;
justify-content: space-between;
align-items: center;
}
.below-search-control {
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex: 1 0 auto;
.filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
flex-direction: column;
padding: 40px 20px 60px 15px;
.fake-filter {
display: flex;
flex-direction: column;
width: 80%;
margin: 5% 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;
&:nth-child(odd) .fake-text {
width: 60%;
}
}
.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 1 auto;
.items {
flex: 1 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: flex-start;
}
.pagination {
flex: 0 1 5%;
display: flex;
justify-content: space-between;
align-items: center;
&>.fake-text {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.2));
}
}
&>div:first-child {
margin-right: 4.1666667%;
}
}
.fake-text {
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
height: 0.2em;
width: 24%;
min-width: 1.25em;
border-radius: 2px;
display: inline-block;
&.section-label {
margin-top: 1em;
height: 0.25em;
}
}
.fake-link {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
height: 0.2em;
width: 10%;
border-radius: 2px;
display: inline-block;
}
.fake-icon {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.3));
@ -164,6 +69,19 @@
max-height: 0.3em;
max-width: 0.3em;
border-radius: 5px;
display: inline-block;
}
.fake-image {
background-size: cover;
background-color: var(--tainacan-gray2, rgba(200,200,200, 0.3));
height: 3em;
width: 3em;
min-height: 3em;
min-width: 3em;
max-height: 3em;
max-width: 3em;
border-radius: 2px;
display: inline-block;
}
.fake-tooltip {
background-color: var(--tainacan-primary, rgba(200,200,200, 0.1));
@ -199,42 +117,17 @@
bottom: -8px;
}
}
.fake-searchbar {
.fake-input {
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: var(--tainacan-secondary, rgba(200,200,200, 0.3));
height: 0.2em;
border-radius: 3px;
width: 70%;
position: relative;
bottom: -0.85em;
}
}
.fake-hide-button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--tainacan-primary, rgba(200,200,200, 0.1));
height: 0.9em;
width: 0.9em;
font-size: 0.75em;
border-radius: 3px;
position: absolute;
left: 0px;
top: 42px;
.fake-icon {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
}
display: inline-block;
}
.fake-button {
background-color: var(--tainacan-background-color, white);
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
padding: 0.3em 0.5em;
height: 0.8em;
width: 10%;
max-width: 3.25em;
@ -246,7 +139,7 @@
margin-right: auto;
.fake-text {
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
background-color: var(--tainacan-background-color, white);
width: 95%;
margin: 0 2px;
}
@ -254,62 +147,113 @@
flex: 1 0 auto;
margin: 0 2px;
}
}
.fake-buttons-group {
flex: 0 0 15%;
display: flex;
justify-content: space-evenly;
}
.fake-item {
background-color: var(--tainacan-item-background-color, white);
flex: 1 0 180px;
margin: 12px;
height: 78px;
&.fake-item-hovered,
&: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 {
height: 20px;
width: 100%;
position: relative;
top: 0;
display: flex;
align-items: center;
padding: 6px;
&.outline {
border: 2px solid var(--tainacan-input-border-color rgba(200,200,200, 0.3));
background-color: var(--tainacan-background-color, white);
.fake-text {
background-color: var(--tainacan-heading-color, rgba(200,200,200, 0.35));
}
}
.fake-item-thumb {
background-size: cover;
background-color: var(--tainacan-input-border-color, rgba(200,200,200, 0.1));
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: 60%;
border-radius: 2px;
margin: 8px 6px 2px 6px;
position: relative;
left: 62px;
&:nth-child(odd) {
width: 50%;
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.1));
}
}
}
}
.fake-switch {
padding: 0.5em;
display: flex;
align-items: center;
.theme-items-list {
max-width: 100% !important;
.fake-icon {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
width: 1.5em;
height: 0.5em;
border-radius: 1em;
max-height: 1em;
max-width: 1em;
}
.fake-text {
margin-left: 0.5em;
width: 24%;
max-width: 4em;
}
}
.documents-section {
display: flex;
justify-content: space-between;
padding: 0.5em;
.fake-circle {
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
.fake-icon {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
}
&:hover {
background-color: var(--tainacan-primary, rgba(200,200,200, 0.2));
}
}
}
.thumbnail-section {
padding: 0.5em;
.fake-image {
height: 3.5em;
width: 3.5em;
min-height: 3.5em;
min-width: 3.5em;
max-height: 3.5em;
max-width: 3.5em;
}
}
.attachments-section {
padding: 0.5em;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.fake-image {
margin-right: 0.25em;
margin-bottom: 0.25em;
}
}
.metadata-section {
width: 100%;
padding: 0.5em 1em;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
.fake-metadata {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
.fake-input {
width: 100%;
max-width: 100%;
margin: 0.2em 0 0.4em 0;
}
}
}
.form-footer {
padding: 1em 0 2em 0;
display: flex;
align-items: center;
justify-content: space-between;
&>.fake-text {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.3));
}
.fake-button {
margin: 0 1em;
}
.fake-button.outline {
margin-left: auto;
}
}
}
}