teesloane / ootliner Goto Github PK
View Code? Open in Web Editor NEWGenerated Floating Table of Contents
Generated Floating Table of Contents
Hi,
I've been using ootliner, an excellent program, anyway, I found a couple of issues which were easily fixed but thought you'd want to know, for the source on github, or as easy fixes for any other users with the same issues.
From the code the menu is supposed to be opaque, sets opacity 1 but for some reason, none of the browsers I used respected that (Firefox, Chrome, Edge). I solved that by adding:
background-color:rgba(255,245,229,1);/*custom colour*/\n
to: "n.oot_outline_expanded { ..."
in var css = ...
I found that for long menus the bottom item half overlaps the bottom of the page - so you can only see the top half of the text and can't read it - I fixed that by setting all three "top" entries to 10% instead of 30% in that same variable css = "...". Anything substantially less than 30% would do, 10% makes it roughly central vertically for a long menu.
The two fixes combined are:
var css = "@-webkit-keyframes outline_mini_enter {\n 0% { left: -100px; }\n 100% { left: 0px; }\n}\n\n@keyframes outline_mini_enter {\n 0% { left: -100px; }\n 100% { left: 0px; }\n}\n\n.oot_base {\n max-height: 70vh;\n overflow-y: scroll;\n padding-right: 24px !important;\n}\n\n.oot_outline_expanded {\n color: #333;\n left: 0 \n background-color:rgba(255,245,229,1);/*custom colour*/\n padding: 32px 8px 32px 8px !important;\n margin: 0;\n position: fixed;\n top: 10%;\n opacity: 1;\n -webkit-animation: outline_mini_enter 0.4s ease;\n animation: outline_mini_enter 0.4s ease;\n}\n\n.oot_outline_expanded_hide {\n color: #333;\n left: -100px !important;\n padding: 32px 8px 32px 8px !important;\n position: fixed;\n margin: 0;\n top: 10%;\n opacity: 0;\n -webkit-transition: all 0.4s ease;\n -o-transition: all 0.4s ease;\n transition: all 0.4s ease;\n}\n\n.oot_outline_mini {\n -webkit-transition: all 0.2s ease;\n -o-transition: all 0.2s ease;\n transition: all 0.2s ease;\n color: #333;\n padding: 32px 8px 32px 0px !important;\n margin: 0 !important;\n left: 0;\n position: fixed;\n top: 10%;\n -webkit-animation-name: outline_mini_enter;\n animation-name: outline_mini_enter;\n -webkit-animation-duration: 0.4s;\n animation-duration: 0.4s;\n}\n\n\n/* Base heading class */\n.oot_base_class {\n font-family: \"arial\";\n list-style-type: none;\n padding: 4px;\n margin: 0px;\n cursor: pointer;\n max-width: 500px;\n padding-top: 6px;\n padding-bottom: 6px;\n}\n\n.oot_base_class:hover {\n color: #0070E0;\n}\n\n\n/* Heading specific styles; when in
mini mode. */\n.oot_h_mini {\n padding-left: 0 !important;\n}\n\n.oot_h1 {\n font-size: 0.8rem;\n font-weight: bold;\n}\n\n.oot_h2 {\n font-size: 0.8rem;\n font-weight: 400;\n padding-left: 1rem;\n\n}\n\n.oot_h3 {\n font-size: 0.8rem;\n padding-left: 2rem;\n}\n\n.oot_h4 {\n font-size: 0.7rem;\n padding-left: 3rem;\n\n}\n\n.oot_h5 {\n font-size: 0.7rem;\n padding-left: 3rem;\n}\n\n.oot_h6 {\n font-size: 0.7rem;\n padding-left: 3rem;\n}\n";styleInject(css);
You can see the fixes in action here:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.