Better styling for editor version of block.

This commit is contained in:
Mateus Machado Luna 2019-01-30 12:14:32 -02:00
parent 29634a4275
commit 1758a2d861
4 changed files with 114 additions and 20 deletions

View File

@ -10,27 +10,68 @@
column-count: 4;
column-gap: 7rem;
column-rule: none; }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-terms-list ul.terms-list-edit {
-moz-column-count: 3;
-moz-column-gap: 4rem;
-moz-column-rule: none;
-webkit-column-ount: 3;
-webkit-column-gap: 4rem;
-webkit-column-rule: none;
column-count: 3;
column-gap: 4rem;
column-rule: none; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-terms-list ul.terms-list {
-moz-column-count: 3;
-moz-column-gap: 0;
-moz-column-gap: 4rem;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-gap: 4rem;
-webkit-column-rule: none;
column-count: 3;
column-gap: 4rem;
column-rule: none; } }
@media only screen and (max-width: 490px) {
.wp-block-tainacan-terms-list ul.terms-list {
column-rule: none; }
.wp-block-tainacan-terms-list ul.terms-list-edit {
-moz-column-count: 2;
-moz-column-gap: 0;
-moz-column-gap: 2rem;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-webkit-column-gap: 2rem;
-webkit-column-rule: none;
column-count: 2;
column-gap: 2rem;
column-rule: none; } }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-terms-list ul.terms-list {
-moz-column-count: 2;
-moz-column-gap: 2rem;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 2rem;
-webkit-column-rule: none;
column-count: 2;
column-gap: 2rem;
column-rule: none; }
.wp-block-tainacan-terms-list ul.terms-list-edit {
-moz-column-count: 1;
-moz-column-gap: 1rem;
-moz-column-rule: none;
-webkit-column-count: 1;
-webkit-column-gap: 1rem;
-webkit-column-rule: none;
column-count: 1;
column-gap: 1rem;
column-rule: none; } }
@media only screen and (max-width: 490px) {
.wp-block-tainacan-terms-list ul.terms-list {
-moz-column-count: 1;
-moz-column-gap: 1rem;
-moz-column-rule: none;
-webkit-column-count: 1;
-webkit-column-gap: 1rem;
-webkit-column-rule: none;
column-count: 1;
column-gap: 1rem;
column-rule: none; } }
/*# sourceMappingURL=tainacan-gutenberg-blocks-style.css.map */

View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAAA,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,CAAC;MAClB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,CAAC;MACrB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,CAAC;MAClB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,CAAC;MACrB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI",
"mappings": "AAAA,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,gDAAmB;IACf,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,0CAA2C;IAEvC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAKzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI",
"sources": ["../../gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss"],
"names": [],
"file": "tainacan-gutenberg-blocks-style.css"

View File

@ -216,7 +216,7 @@ registerBlockType('tainacan/terms-list', {
icon={(
<img
width={148}
src={`${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg`}
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
alt="Tainacan Logo"/>
)}
/>) : null
@ -236,7 +236,7 @@ registerBlockType('tainacan/terms-list', {
) }
</Autocomplete> */}
<ul class="terms-list">{ terms }</ul>
<ul class="terms-list-edit">{ terms }</ul>
</div>
);
},

View File

@ -14,33 +14,86 @@
column-rule: none;
}
@media only screen and (max-width: 768px) {
ul.terms-list-edit {
-moz-column-count: 3;
-moz-column-gap: 4rem;
-moz-column-rule: none;
-webkit-column-ount: 3;
-webkit-column-gap: 4rem;
-webkit-column-rule: none;
column-count: 3;
column-gap: 4rem;
column-rule: none;
}
@media only screen and (max-width: 1024px) {
ul.terms-list {
-moz-column-count: 3;
-moz-column-gap: 0;
-moz-column-gap: 4rem;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-gap: 4rem;
-webkit-column-rule: none;
column-count: 3;
column-gap: 4rem;
column-rule: none;
}
}
@media only screen and (max-width: 490px) {
ul.terms-list {
ul.terms-list-edit {
-moz-column-count: 2;
-moz-column-gap: 0;
-moz-column-gap: 2rem;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-webkit-column-gap: 2rem;
-webkit-column-rule: none;
column-count: 2;
column-gap: 2rem;
column-rule: none;
}
}
@media only screen and (max-width: 768px) {
ul.terms-list {
-moz-column-count: 2;
-moz-column-gap: 2rem;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 2rem;
-webkit-column-rule: none;
column-count: 2;
column-gap: 2rem;
column-rule: none;
}
ul.terms-list-edit {
-moz-column-count: 1;
-moz-column-gap: 1rem;
-moz-column-rule: none;
-webkit-column-count: 1;
-webkit-column-gap: 1rem;
-webkit-column-rule: none;
column-count: 1;
column-gap: 1rem;
column-rule: none;
}
}
@media only screen and (max-width: 490px) {
ul.terms-list {
-moz-column-count: 1;
-moz-column-gap: 1rem;
-moz-column-rule: none;
-webkit-column-count: 1;
-webkit-column-gap: 1rem;
-webkit-column-rule: none;
column-count: 1;
column-gap: 1rem;
column-rule: none;
}
}
}