Move embedded styles for TOC outside of html

[jonfroehlich]

On a quick glance, it looks like we have embedded CSS styling inside our html files, which makes it harder to re-use the JavaScript TOC code.

For example, in registration.html, we have:

<style>
        .toc-div {
            background-color: white;
            border-radius: 25px;
            border: 2px solid #DCDAE9;
            width: 225px;
            padding: 10px;

            position: absolute;
            margin-top: 10px;
            margin-left: 15px;

            display: none;
        }

        .toc-div p {
            padding-left: 20px;
            color: #65446D;
        }

        @media (max-width: 1250px) {
            .toc-div {
                display: none;
                /* position: relative; TODO */
            }
        }
    </style>

When I made the keynote.html page, I wanted to have the left sidebar TOC, but I wasn't sure what was necessary. Could we extract the TOC stuff into a toc.css to make it easier to reuse on other pages.

Similar question about the embedded JavaScript:

 <script>
        function place_sidebar() {
            var target = $(".col-lg-8").first().offset().left - 275;
            if (target < 0) {
                $(".toc-div").css({
                    "display": "none"
                });
            }
            else {
                $(".toc-div").css({
                    "display": "block"
                });
            }
            $(".toc-div").css({
                "left": target + "px"
            });
        }

        $(function () {
            var offsetPixels = 277; // navbar height
            place_sidebar();

            $(window).scroll(function () {
                if ($(window).scrollTop() > offsetPixels) {
                    $(".toc-div").css({
                        "position": "fixed",
                        "top": "0px"
                    });
                } else {
                    $(".toc-div").css({
                        "position": "absolute",
                        "top": "277px"
                    });
                }
            });
            $(window).on('resize', function () {
                place_sidebar();
            });
        });
    </script>

Shouldn't this just be in a separate .js file and we just reference it?

[jayhersk]

Fixed!

[jonfroehlich]

Can you reference the commit where this was fixed?

[jayhersk]

yes it is: 865a4dce3e1897a7252946d68019314c3bad4d58

[jonfroehlich]

Thank you. Wonderful work as usual!