From dad4130683e36be945cc13aba73334ba95400fa7 Mon Sep 17 00:00:00 2001 From: Arne Becker Date: Mon, 6 Feb 2023 11:30:27 +0100 Subject: [PATCH] add third debug toolbar to checkbox positioning; change readme to a more direct and positive formulation and fix typo --- README.md | 3 ++- src/index.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a9f9239..cd7cc74 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,8 @@ In some cases (i.e. when working on non-livewire elements), you'll want to full By adding an `VITE_LIVEWIRE_OPT_IN=true` entry in your `.env` file an opt-in checkbox will show on the bottom right corner of the webpage, allowing you to enable/disable livewire hot reload. If disabled: a full page reload will be triggered when blade files are changed. -If you're using a debug toolbar other than [Debugbar for Laravel](https://github.com/barryvdh/laravel-debugbar) or [Clockwork](https://underground.works/clockwork/), the checkbox my interfere with it. There is a config option `bottomPosition` to add more spacing to the bottom, to make the checkbox visible again. The value must be a of type number. These two toolbar are taken into account, while positioning the checkbox. No special configuration is needed. +If you're using a debug toolbar like [Debugbar for Laravel](https://github.com/barryvdh/laravel-debugbar), [Clockwork](https://underground.works/clockwork/) or [Laravel Telescope Toolbar](https://github.com/fruitcake/laravel-telescope-toolbar), these are taken into account, while positioning the checkbox. No special configuration is needed. +There may be another (debug) toolbar or something else in your view interfere with the checkbox. Therefore, a config option `bottomPosition` is available to add more spacing to the bottom, to make the checkbox visible again. The value must be of type number and is considered to be pixels. ```js // vite.config.js diff --git a/src/index.ts b/src/index.ts index bc71781..74184fe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -186,7 +186,7 @@ export default function livewire(config?: PluginConfig | string | string[]): Liv } function makeOptInLabel() { - const debugbarHeight = document.querySelector('.phpdebugbar, .clockwork-toolbar')?.offsetHeight ?? 0; + const debugbarHeight = document.querySelector('.phpdebugbar, .clockwork-toolbar, .sf-toolbar')?.offsetHeight ?? 0; const defaultBottomPosition = ${pluginConfig.bottomPosition}; const calculatedBottomPosition = debugbarHeight + defaultBottomPosition const label = document.createElement('label');