You may have seen in this blog that screenshots I take from the YugabyteDB console may have less columns. An example:
This:
Rather than this:
I do it for clarity, removing the columns that are not meaningful for the blog post. This help with the very low dev.to image resolution. I also use it for presentations where it is better to show only the relevant info in large fonts.
I do that simply with some CSS and I'll share in this post the bookmarklets I use. For example, for the above, just create a bookmark with this
javascript:(function()%7Bdocument.querySelectorAll('.table-striped%3Anth-child(4)%20tr%3E*%3Anth-child(n%2B3)%3Anth-child(-n%2B6)').forEach(el%20%3D%3E%20el.style.display%20%3D%20'none')%3Bdocument.getElementsByClassName(%22yb-main%20container-fluid%22)%5B0%5D.style.marginLeft%3D%2288px%22%3Bdocument.getElementsByClassName(%22sidebar-wrapper%22)%5B0%5D.style.width%3D%2299px%22%7D)()
and it will remove columns 3
to 6
on the 4
th table, which is the list of tablets from the master webconsole.
It does this:
document.querySelectorAll(
'.table-striped:nth-child(4) tr>*:nth-child(n+3):nth-child(-n+6)'
).forEach(el => el.style
.display = 'none');
document.getElementsByClassName("yb-main container-fluid")[0].style.marginLeft="88px";
document.getElementsByClassName("sidebar-wrapper")[0].style.width="99px";
In short:
-
.table-striped:nth-child(4)
: the 4th table of classtable-striped
-
tr>*
:the first tag undertr
(it isth
ortd
) -
nth-child(n+3)
:from the 3th one -
:nth-child(-n+6)
: to the 6th one - finally I resize the sidebar menu
I transformed it to a bookmarklet with https://mrcoles.com/bookmarklet/
Top comments (0)