Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing stacking problem with bullets

Browse Source
This commit is contained in:
Antoine M 2023-10-12 16:08:09 +02:00
parent be58962c50
commit 1fd37d8323
7 changed files with 85 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/focused-schema/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b356fc975525a09b1752'); <?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '01f12954d4948ce2f9fa');

4
blocks/focused-schema/build/index.js
View File

@ -481,7 +481,9 @@ function save({
style: { style: {
top: `${focusBullet.y * 100}%`, top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%` left: `${focusBullet.x * 100}%`
} },
"data-postion-x": focusBullet.x * 100,
"data-postion-y": focusBullet.y * 100
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "homegrade-blocks-focus-point-bullet__index" className: "homegrade-blocks-focus-point-bullet__index"
}, index + 1)); }, index + 1));

2
blocks/focused-schema/build/index.js.map
View File

File diff suppressed because one or more lines are too long

44
blocks/focused-schema/build/style-index.css
View File

@ -39,14 +39,14 @@
margin-right: 0.5em; margin-right: 0.5em;
font-weight: 700; font-weight: 700;
} }
.homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet {
.homegrade-blocks-focus-point-bullet {
position: absolute !important; position: absolute !important;
border-radius: 50%; border-radius: 50%;
transition: scale 0.2s ease-in-out; transition: scale 0.2s ease-in-out;
z-index: 10; z-index: 1;
transform: translateX(-50%);
} }
.homegrade-blocks-focus-point-bullet__index { .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__index {
font-weight: 700; font-weight: 700;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -59,27 +59,34 @@
align-items: center; align-items: center;
padding: 16px; padding: 16px;
} }
.homegrade-blocks-focus-point-bullet__tooltip-container { .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
}
.homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet:hover + .homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex;
}
.homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__tooltip-container {
z-index: 999;
position: absolute;
left: 44%;
top: 25%;
transform: translate(-50%, -100%);
background-color: white; background-color: white;
opacity: 0.9999;
border-radius: 14px; border-radius: 14px;
padding: 10px; padding: 10px;
position: absolute;
top: -4px;
left: 50%;
transform: translate(-50%, -100%);
width: -moz-max-content; width: -moz-max-content;
width: max-content; width: max-content;
min-width: 70px; min-width: 70px;
max-width: 420px; max-width: 220px;
text-align: center; text-align: center;
display: none; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
} }
.homegrade-blocks-focus-point-bullet__tooltip-container:after { .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__tooltip-container:after {
content: ""; content: "";
display: block; display: block;
background-color: white; background-color: white;
@ -92,16 +99,7 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999; z-index: 999;
} }
.homegrade-blocks-focus-point-bullet__tooltip-container__title { .homegrade-blocks-focused-schema .homegrade-blocks-focus-point-bullet__tooltip-container:hover {
width: auto;
min-width: 100px;
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet:hover .homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex; display: flex;
} }

2
blocks/focused-schema/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF;AAKE;EACC;EACA;AAHH;AAKG;EACC;EACA;EACA;EACA;AAHJ;AAKG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHJ;;AASA;EACC;EACA;EACA;EACA;AAND;AAOC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AALF;AAQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANF;AAQE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANH;AAQE;EACC;EACA;AANH;;AAUA;EACC;EACA;AAPD;AASC;EACC;AAPF;;AAaA;EACC;EACA;AAVD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.homegrade-blocks-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n\n\tfigcaption {\n\t\tol {\n\t\t\tpadding-top: 20px;\n\t\t\tcounter-reset: myOrderedListItemsCounter;\n\n\t\t\tli {\n\t\t\t\tlist-style-type: none;\n\t\t\t\tposition: relative;\n\t\t\t\tpadding: 8px;\n\t\t\t\tpadding-left: 50px;\n\t\t\t}\n\t\t\tli:before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: translateY(3px);\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: red;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcounter-increment: myOrderedListItemsCounter;\n\t\t\t\tcontent: counter(myOrderedListItemsCounter);\n\t\t\t\tmargin-right: 0.5em;\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.homegrade-blocks-focus-point-bullet {\n\tposition: absolute !important;\n\tborder-radius: 50%;\n\ttransition: scale 0.2s ease-in-out;\n\tz-index: 10;\n\t&__index {\n\t\tfont-weight: 700;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tposition: relative;\n\t\tcolor: white;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 16px;\n\t}\n\n\t&__tooltip-container {\n\t\tbackground-color: white;\n\t\topacity: 0.9999;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -100%);\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 420px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\t\tz-index: 999;\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t&__title {\n\t\t\twidth: auto;\n\t\t\tmin-width: 100px;\n\t\t}\n\t}\n}\n.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tdisplay: flex;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF;AAKE;EACC;EACA;AAHH;AAKG;EACC;EACA;EACA;EACA;AAHJ;AAKG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHJ;AAQC;EACC;EACA;EACA;EACA;EACA;AANF;AAQE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANH;AAUC;EACC;EACA;EACA;AARF;AAUE;EAEC;AATH;AAsBC;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBF;AAwBE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBH;AA+BC;EACC;AA7BF;;AAmCA;EACC;EACA;AAhCD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.homegrade-blocks-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n\n\tfigcaption {\n\t\tol {\n\t\t\tpadding-top: 20px;\n\t\t\tcounter-reset: myOrderedListItemsCounter;\n\n\t\t\tli {\n\t\t\t\tlist-style-type: none;\n\t\t\t\tposition: relative;\n\t\t\t\tpadding: 8px;\n\t\t\t\tpadding-left: 50px;\n\t\t\t}\n\t\t\tli:before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: translateY(3px);\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: red;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcounter-increment: myOrderedListItemsCounter;\n\t\t\t\tcontent: counter(myOrderedListItemsCounter);\n\t\t\t\tmargin-right: 0.5em;\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet {\n\t\tposition: absolute !important;\n\t\tborder-radius: 50%;\n\t\ttransition: scale 0.2s ease-in-out;\n\t\tz-index: 1;\n\t\ttransform: translateX(-50%);\n\n\t\t&__index {\n\t\t\tfont-weight: 700;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tposition: relative;\n\t\t\tcolor: white;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: 16px;\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet:hover {\n\t\tscale: 1.2;\n\t\tfilter: brightness(1.2) hue-rotate(10deg);\n\t\tz-index: 1;\n\n\t\t& + .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t\t// background-color: red;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t// ~ .homegrade-blocks-focus-point-bullet {\n\t\t// \t// background-color: yellow !important;\n\t\t// \tz-index: 1;\n\t\t// }\n\t\t// .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t// \tdisplay: flex;\n\t\t// \tz-index: 999;\n\t\t// \tposition: absolute;\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tz-index: 999;\n\t\tposition: absolute;\n\t\tleft: calc(44%);\n\t\ttop: 25%;\n\t\ttransform: translate(-50%, calc(-100%));\n\n\t\tbackground-color: white;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 220px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t// &__tooltip-container {\n\t\t// \t&__title {\n\t\t// \t\twidth: auto;\n\t\t// \t\tmin-width: 100px;\n\t\t// \t}\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container:hover {\n\t\tdisplay: flex;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}

2
blocks/focused-schema/src/save.js
View File

@ -19,6 +19,8 @@ export default function save({ attributes }) {
top: `${focusBullet.y * 100}%`, top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`, left: `${focusBullet.x * 100}%`,
}} }}
data-postion-x={focusBullet.x * 100}
data-postion-y={focusBullet.y * 100}
> >
<span className="homegrade-blocks-focus-point-bullet__index"> <span className="homegrade-blocks-focus-point-bullet__index">
{index + 1} {index + 1}

60
blocks/focused-schema/src/style.scss
View File

@ -42,13 +42,14 @@
} }
} }
} }
}
.homegrade-blocks-focus-point-bullet { .homegrade-blocks-focus-point-bullet {
position: absolute !important; position: absolute !important;
border-radius: 50%; border-radius: 50%;
transition: scale 0.2s ease-in-out; transition: scale 0.2s ease-in-out;
z-index: 10; z-index: 1;
transform: translateX(-50%);
&__index { &__index {
font-weight: 700; font-weight: 700;
width: 20px; width: 20px;
@ -62,25 +63,47 @@
align-items: center; align-items: center;
padding: 16px; padding: 16px;
} }
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
& + .homegrade-blocks-focus-point-bullet__tooltip-container {
// background-color: red;
display: flex;
}
// ~ .homegrade-blocks-focus-point-bullet {
// // background-color: yellow !important;
// z-index: 1;
// }
// .homegrade-blocks-focus-point-bullet__tooltip-container {
// display: flex;
// z-index: 999;
// position: absolute;
// }
}
.homegrade-blocks-focus-point-bullet__tooltip-container {
z-index: 999;
position: absolute;
left: calc(44%);
top: 25%;
transform: translate(-50%, calc(-100%));
&__tooltip-container {
background-color: white; background-color: white;
opacity: 0.9999;
border-radius: 14px; border-radius: 14px;
padding: 10px; padding: 10px;
position: absolute;
top: -4px;
left: 50%;
transform: translate(-50%, -100%);
width: max-content; width: max-content;
min-width: 70px; min-width: 70px;
max-width: 420px; max-width: 220px;
text-align: center; text-align: center;
display: none; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
&:after { &:after {
content: ""; content: "";
@ -95,17 +118,14 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999; z-index: 999;
} }
&__title { // &__tooltip-container {
width: auto; // &__title {
min-width: 100px; // width: auto;
// min-width: 100px;
// }
// }
} }
} .homegrade-blocks-focus-point-bullet__tooltip-container:hover {
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
.homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex; display: flex;
} }
} }