WIP; black buttons = legacy Quiver. Carefully bootstrapping them.
Large screens:
Small screens:
Used a highly modified Navbar for the buttons. I removed the toggle button. Instead the texts hide/show. This took for freakin ever (all day), but I learned a lot of BSS. Also figured out how to override the Quiver buttons in JS. There’s a glow effect when hovering over the buttons and the logo bounces on page load.
I got a click-transparent navbar by making it translucent and styling with pointer-events: none; while the buttons and the logo within it get pointer-events:all;
Seems to be working great so far. Had issues with dropdowns over iframe. Forgot what I did to fix it. This is a work-in-progress and the beginning of a long relationship with BSS.
1 Like
Is there a live site to look at?
1 Like
Glad you asked, because I had put up a GitHub pages site right afterward, and by the way doing so takes about 5 mins and the static JS site just works.
Note, none of the buttons work in its current state. My next step is to connect the top-level buttons using JS.
Here is the live site URL:
QuiverBee (enjoysmath.github.io)
As you can see as well, I simplified the design a bit, in order to make it more mobile friendly. I am also going to do it so that if the user rotates their screen 90 degrees, the toolbar goes vertical on the right (I think, but maybe left).
The original quiver live site can be found here:
quiver: a modern commutative diagram editor
Click on the Quiver🐝 logo upper right, and that will take you to the source code. It’s gonna be open source, but I have some ideas to monetize such as donations, and a method of contacting us for BSS design work in regards to Quiver’s UI.
