From ca0a72ec6c3a5b9b4165d78049a71261f3abf6bc Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 28 May 2020 11:47:33 -0300 Subject: [PATCH] Adds placeholder review for the form block. --- compile-sass.sh | 4 +- ...n-gutenberg-block-item-submission-form.css | 201 +++++++++++ ...tenberg-block-item-submission-form.css.map | 7 + .../item-submission-form/index.js | 46 ++- .../item-submission-form.scss | 324 ++++++++---------- 5 files changed, 390 insertions(+), 192 deletions(-) create mode 100644 src/assets/css/tainacan-gutenberg-block-item-submission-form.css create mode 100644 src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map diff --git a/compile-sass.sh b/compile-sass.sh index 62e087d2f..cdfdc2787 100644 --- a/compile-sass.sh +++ b/compile-sass.sh @@ -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 diff --git a/src/assets/css/tainacan-gutenberg-block-item-submission-form.css b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css new file mode 100644 index 000000000..f3e8e630b --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map new file mode 100644 index 000000000..41f126c4b --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map @@ -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" +} diff --git a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js index d785cddf8..063e36582 100644 --- a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js +++ b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js @@ -336,7 +336,51 @@ registerBlockType('tainacan/item-submission-form', { '--tainacan-primary': primaryColor, '--tainacan-secondary': secondaryColor }} - class="items-list-placeholder"> + class="item-submission-form-placeholder"> +
+
+ +
+ + + +
+ +
+
+
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+ { Array(12).fill().map( () => { + return
+ + +
+ } )} +
+
+
+
+ + + +
diff --git a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss index 5730cee37..c2e94c450 100644 --- a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss +++ b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss @@ -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; + } + } } }