f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-08-06 04:37:37 +00:00
Code Wiki Activity

revert the work done in earlier commit with anchor properties

Browse Source 
revert commit 1fe19578c2 which changed `anchor()` values to `position-area`.

I'm not sure what compelled me to do that change initially, except the easier to understand syntax.  Hopefully it wasn't important.

But oddbird polyfill expects `anchor()` values, which it converts to pixel values for positioning.
This commit is contained in:
Gazook89
2026-07-02 22:53:33 -05:00
parent 1fe19578c2
commit b791bcefdb
3 changed files with 14 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/Anchored.less
+4 -6
View File
@@ -1,11 +1,9 @@
.anchored-box { .anchored-box {
position : absolute; position : absolute;
visibility : hidden; visibility : hidden;
justify-self : anchor-center; justify-self : anchor-center;
@supports (inset-block-start: anchor(bottom)) { inset-block-start : anchor(bottom);
inset-block-start : anchor(bottom);
}
&.active { visibility : visible; } &.active { visibility : visible; }
} }
client/components/anchorPositioningPolyfill.js
+5 -12
View File
@@ -8,27 +8,20 @@ let polyfillPromise;
// look for `anchorName` in the computed styles // look for `anchorName` in the computed styles
const supportsAnchorPositioning = ()=>'anchorName' in document.documentElement.style; const supportsAnchorPositioning = ()=>'anchorName' in document.documentElement.style;
// wait for initial render
const afterInitialRender = ()=>new Promise((resolve)=>{
requestAnimationFrame(()=>{
requestAnimationFrame(resolve);
});
});
export const bootstrapAnchorPositioningPolyfill = ()=>{ export const bootstrapAnchorPositioningPolyfill = ()=>{
if(supportsAnchorPositioning()) return Promise.resolve(false); if(supportsAnchorPositioning()) return Promise.resolve(false);
if(polyfillPromise) return polyfillPromise; if(polyfillPromise) return polyfillPromise;
polyfillPromise = afterInitialRender() polyfillPromise = (async ()=>{
.then(async ()=>{ try {
const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn'); const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn');
await polyfill(); await polyfill();
return true; return true;
}) } catch (error){
.catch((error)=>{
polyfillPromise = undefined; polyfillPromise = undefined;
throw error; throw error;
}); }
})();
return polyfillPromise; return polyfillPromise;
}; };
client/components/dropdown/dropdown.less
+5 -3
View File
@@ -6,16 +6,18 @@
} }
.menu-list { .menu-list {
position : absolute; position : fixed;
z-index : 1000; z-index : 1000;
position-area : block-end span-inline-end; top : anchor(bottom);
left : anchor(left);
position-try: flip-inline flip-block; position-try: flip-inline flip-block;
color: inherit; // [popover] gets a `canvastext` color value from useragent. color: inherit; // [popover] gets a `canvastext` color value from useragent.
> .menu-wrapper { > .menu-wrapper {
position:relative; position:relative;
> .menu-list { > .menu-list {
margin: 0 0px; margin: 0 0px;
position-area: inline-end span-block-end; top : anchor(top);
left : anchor(right);
position-try: flip-inline; position-try: flip-inline;
} }
} }