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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/assets/css/tainacan-gutenberg-blocks-style.css
View File

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

2
src/assets/css/tainacan-gutenberg-blocks-style.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "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"], "sources": ["../../gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss"],
"names": [], "names": [],
"file": "tainacan-gutenberg-blocks-style.css" "file": "tainacan-gutenberg-blocks-style.css"

4
src/gutenberg-blocks/tainacan-terms/terms-list/index.js
View File

@ -216,7 +216,7 @@ registerBlockType('tainacan/terms-list', {
icon={( icon={(
<img <img
width={148} 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"/> alt="Tainacan Logo"/>
)} )}
/>) : null />) : null
@ -236,7 +236,7 @@ registerBlockType('tainacan/terms-list', {
) } ) }
</Autocomplete> */} </Autocomplete> */}
<ul class="terms-list">{ terms }</ul> <ul class="terms-list-edit">{ terms }</ul>
</div> </div>
); );
}, },

73
src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss
View File

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