amardeep/politictalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

toolbar position

Browse Source
This commit is contained in:
Amardeep
2026-05-30 00:12:38 +05:30
parent 030afa9f6a
commit 88be972d07
1 changed files with 32 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/plugin.head.html
View File

@@ -12,6 +12,7 @@
html:not(.politictalk-direct-access-blocked) { html:not(.politictalk-direct-access-blocked) {
--politictalk-toolbar-bottom-offset: 12px; --politictalk-toolbar-bottom-offset: 12px;
--politictalk-toolbar-mobile-scale: 0.96;
} }
html:not(.politictalk-direct-access-blocked) body { html:not(.politictalk-direct-access-blocked) body {
@@ -498,7 +499,7 @@
html:not(.politictalk-direct-access-blocked) .toolbox-content, html:not(.politictalk-direct-access-blocked) .toolbox-content,
html:not(.politictalk-direct-access-blocked) .toolbox-content-wrapper { html:not(.politictalk-direct-access-blocked) .toolbox-content-wrapper {
max-width: calc(100vw - 56px) !important; max-width: calc(100vw - 24px) !important;
pointer-events: auto !important; pointer-events: auto !important;
} }
@@ -511,54 +512,25 @@
position: fixed !important; position: fixed !important;
right: auto !important; right: auto !important;
top: auto !important; top: auto !important;
transform: translateX(-50%) !important; transform: translateX(-50%) scale(var(--politictalk-toolbar-mobile-scale, 0.96)) !important;
transform-origin: bottom center !important;
width: fit-content !important; width: fit-content !important;
} }
html:not(.politictalk-direct-access-blocked) .toolbox-content { html:not(.politictalk-direct-access-blocked) .toolbox-content {
align-items: center !important;
border-radius: 8px !important; border-radius: 8px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
bottom: auto !important; bottom: auto !important;
display: flex !important;
gap: 8px !important;
justify-content: center !important;
left: auto !important; left: auto !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
max-width: calc(100vw - 56px) !important; max-width: calc(100vw - 24px) !important;
overflow: visible !important; overflow: visible !important;
padding: 8px 10px !important;
position: relative !important; position: relative !important;
right: auto !important; right: auto !important;
top: auto !important; top: auto !important;
transform: none !important; transform: none !important;
width: auto !important; width: max-content !important;
}
html:not(.politictalk-direct-access-blocked) .toolbox-content .toolbox-button,
html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="toolbox-button"],
html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="ToolboxButton"],
html:not(.politictalk-direct-access-blocked) .toolbox-content button,
html:not(.politictalk-direct-access-blocked) .toolbox-content [role="button"] {
flex: 0 0 48px !important;
height: 48px !important;
margin: 0 !important;
max-height: 48px !important;
max-width: 48px !important;
min-height: 48px !important;
min-width: 48px !important;
width: 48px !important;
}
html:not(.politictalk-direct-access-blocked) .toolbox-content svg,
html:not(.politictalk-direct-access-blocked) .toolbox-content .toolbox-icon,
html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="toolbox-icon"],
html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="ToolboxIcon"] {
height: 24px !important;
max-height: 24px !important;
max-width: 24px !important;
width: 24px !important;
} }
.politictalk-direct-access { .politictalk-direct-access {
@@ -648,8 +620,10 @@
function updateMobileToolbarViewportOffset() { function updateMobileToolbarViewportOffset() {
if (!window.matchMedia || !window.matchMedia('(max-width: 640px)').matches) { if (!window.matchMedia || !window.matchMedia('(max-width: 640px)').matches) {
document.documentElement.style.removeProperty('--politictalk-toolbar-bottom-offset'); document.documentElement.style.removeProperty('--politictalk-toolbar-bottom-offset');
document.documentElement.style.removeProperty('--politictalk-toolbar-mobile-scale');
if (document.body) { if (document.body) {
document.body.style.removeProperty('--politictalk-toolbar-bottom-offset'); document.body.style.removeProperty('--politictalk-toolbar-bottom-offset');
document.body.style.removeProperty('--politictalk-toolbar-mobile-scale');
} }
return; return;
} }
@@ -674,11 +648,17 @@
} }
var rect = toolbar.getBoundingClientRect(); var rect = toolbar.getBoundingClientRect();
var currentScale = getMobileToolbarScale();
var unscaledWidth = currentScale ? rect.width / currentScale : rect.width;
var availableWidth = (viewport ? viewport.width : window.innerWidth) - 28;
var nextScale = Math.min(0.96, Math.max(0.86, availableWidth / unscaledWidth));
var visibleBottom = viewport var visibleBottom = viewport
? Math.min(window.innerHeight, viewport.offsetTop + viewport.height) ? Math.min(window.innerHeight, viewport.offsetTop + viewport.height)
: window.innerHeight; : window.innerHeight;
var overflow = Math.ceil(rect.bottom - (visibleBottom - 12)); var overflow = Math.ceil(rect.bottom - (visibleBottom - 12));
setMobileToolbarScale(nextScale);
if (overflow > 0) { if (overflow > 0) {
setMobileToolbarBottomOffset(baseOffset + overflow); setMobileToolbarBottomOffset(baseOffset + overflow);
} }
@@ -695,6 +675,24 @@
} }
} }
function getMobileToolbarScale() {
var value = window.getComputedStyle(document.documentElement)
.getPropertyValue('--politictalk-toolbar-mobile-scale');
var scale = Number.parseFloat(value);
return Number.isFinite(scale) && scale > 0 ? scale : 0.96;
}
function setMobileToolbarScale(scale) {
var value = String(Math.round(scale * 1000) / 1000);
document.documentElement.style.setProperty('--politictalk-toolbar-mobile-scale', value);
if (document.body) {
document.body.style.setProperty('--politictalk-toolbar-mobile-scale', value);
}
}
function getVisiblePoliticTalkToolbar() { function getVisiblePoliticTalkToolbar() {
var toolbars = Array.prototype.slice.call(document.querySelectorAll( var toolbars = Array.prototype.slice.call(document.querySelectorAll(
'.toolbox-content, .toolbox-content-wrapper, #new-toolbox, .toolbox' '.toolbox-content, .toolbox-content-wrapper, #new-toolbox, .toolbox'