teesloane / ootliner Goto Github PK

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.

1. 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 = ...

2. 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 inmini 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:

Open letter to NASA