pokeapi/templates/base_docs.html

{% extends "base.html" %}

{% block mainbody %}

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand">
                <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://pokeapi.co" data-text="Pokéapi - the Pokémon RESTful API " data-via="phalt_" data-related="phalt_">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
            </div>
        </div>
        <div class="collapse navbar-collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li class="active"><a href="#">Documentation</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <section id="docs">

        <div class="header">
        
            {% block docstitle %}

            {% endblock docstitle %}

        </div>

        <div class="container">

            <div class="row pad_top">

                <div class="col-sm-3 side-nav">
                    
                    <div class="nav-group">

                        <ul class="version-select">

                            {% block docsversionstate %}

                            {% endblock docsversionstate %}

                        </ul>

                        <div class="hidden-xs">

                            {% block docsnav %}

                            {% endblock docsnav %}

                        </div>

                    </div>
                    
                 
                </div>

                <div class="col-sm-9">

                    <h2 id="info">Information</h2>

                    <p class="lead">Please take note when using this API:</p>

                    <ul>
                        <li>This is a <b>consumption-only</b> API - only the HTTP GET method is available on resources.</li>
                        <li><b>No authentication</b> is required to access this API. All resources are fully open and available.</li>
                            <ul>
                                <li>There is, however, a daily rate limit of 300 requests <b>per resource</b> per IP address. So a single IP address can call the <i>bulbasaur</i> resource 300 times a day. Not 300 requests across the entire dataset! This is to stop our database from falling over under heavy load.</li>
                            </ul>
                        <li>If you are going to be regularly using the API, I recommend caching data on your service.</li>
                        <ul>
                            <li>Luckily, we provide <b>modified/created datetime stamps</b> on every single resource so you can check for updates (and thus make your caching efficient).</li>
                        </ul>
                    </ul>
                    
                    {% block docsbody %}

                    {% endblock docsbody %}

                </div>

            </div>

        </div>
        
    </section>

    <script>

        var sticky = $('.nav-group');
        var offset = sticky.offset();
        var sideNav = $('.side-nav');
        var doc = $(document);

        function checkSticky () {

            if (doc.scrollTop() >= (offset.top - 65)) {

                sticky.addClass('stick');
                sticky.css({ width: sideNav.width() });

            } else {

                sticky.removeClass('stick');
                sticky.css({ width: '' });
            }
        }

        doc.scroll(function () {

            checkSticky();
        });

        $(window).resize(function () {

            checkSticky();
        });

        checkSticky();

    </script>

{% endblock %}