Bootstrapification: SiteTree Nav Bar

Make sitetree a bootstrap navbar.

Remove mobile menu, bootstrap provides this.
This commit is contained in:
Sachi King 2017-04-10 21:10:25 +10:00
parent 2adb0ed14a
commit e86a811f38
10 changed files with 30 additions and 77 deletions

View file

@ -14,7 +14,7 @@
{% block content %} {% block content %}
<div class="jumbotron-white"> <div class="jumbotron">
<h1>DASHBOARD</h1> <h1>DASHBOARD</h1>
{% available_categories as categories %} {% available_categories as categories %}
{% if categories %} {% if categories %}

View file

@ -27,12 +27,11 @@
{% endblock %} {% endblock %}
</head> </head>
<body class="{% block body_class %}{% endblock %}"> <body class="{% block body_class %}{% endblock %}">
<div class="container">
{% block topbar_base %} {% block topbar_base %}
{% block nav %} {% block nav %}
{% sitetree_menu from "main" include "trunk" template "sitetree_header.html" %} {% sitetree_menu from "main" include "trunk" template "sitetree_header.html" %}
<a href="#" data-menu-opener="" class="l-header--menu-opener"></a>
{% sitetree_menu from "main" include "trunk" template "sitetree_opener.html" %}
{% endblock %} {% endblock %}
{% endblock %} {% endblock %}
@ -78,6 +77,7 @@
{% block extra_body %} {% block extra_body %}
{% endblock %} {% endblock %}
{% endblock %} {% endblock %}
</div>
</body> </body>
</html> </html>
<!-- end site_base.html --> <!-- end site_base.html -->

View file

@ -22,6 +22,7 @@
<script src="{% static 'pyconau2017/js/app.js' %}" type="text/javascript"></script> <script src="{% static 'pyconau2017/js/app.js' %}" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="{% static 'pyconau2017/js/bootstrap.js' %}" type="text/javascript"></script>
<script src="{% static 'pyconau2017/js/load_editors.js' %}" type="text/javascript"></script> <script src="{% static 'pyconau2017/js/load_editors.js' %}" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="{{ STATIC_URL }}js/jquery.formset.js"></script> <script src="{{ STATIC_URL }}js/jquery.formset.js"></script>

View file

@ -1,24 +1,28 @@
{% load sitetree %} {% load sitetree %}
<nav id="LOL" class="l-header--links"> <nav class="navbar navbar-inverse navbar-default">
<ul> <div class="container-fluid">
{% for item in sitetree_items %} {% for item in sitetree_items %}
<li class="l-header--nav"> {% if forloop.counter == 1 %}
<a <div class="navbar-header">
href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
{% if item.has_children %} <span class="sr-only">Toggle navigation</span>
class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown" <span class="icon-bar"></span>
{% else %} <span class="icon-bar"></span>
class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}" <span class="icon-bar"></span>
{% endif %}> </button>
{{ item.title_resolved }} <a class="navbar-brand" href="{% sitetree_url for item %}">{{ item.title_resolved }}</a>
</a> </div>
{% else %}
{% if item.has_children %} {% if forloop.counter == 2 %}
{% with is_last=forloop.last %} <div id="navbar" class="navbar-collapse collapse">
{% sitetree_children of item for menu template "sitetree_header_dropdown.html" %} <ul class="nav navbar-nav">
{% endwith %}
{% endif %} {% endif %}
</li> <li class="{% if item.is_current or item.in_current_branch %}active{% endif %}">
<a href="{% sitetree_url for item %}">{{ item.title_resolved }}</a>
</li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div>
</div>
</nav> </nav>

View file

@ -1,18 +0,0 @@
{% load sitetree %}
<div class="menu-dropdown {% if is_last%}menu-dropdown__last{% endif %}">
<ul class="link-list" role="menu">
{% for item in sitetree_items %}
<li class="link-list--item">
<a role="menuitem" href="{% sitetree_url for item %}"
class="link-list--link"
{% if item.hint %}
title="{{ item.hint }}"
{% endif %}
>
{{ item.title_resolved }}
</a>
</li>
{% endfor %}
</ul>
</div>

View file

@ -1,22 +0,0 @@
{% load sitetree %}
<div data-menu class="mobile-menu">
<ul class="mobile-menu--list">
{% for item in sitetree_items %}
<li class="mobile-menu--item mobile-menu--item__primary">
<a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}"
{% if item.has_children %}
class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}"
data-toggle="dropdown"
{% else %}
class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"
{% endif %}
>
{{ item.title_resolved }}
</a>
</li>
{% if item.has_children %}
{% sitetree_children of item for menu template "sitetree_opener_dropdown.html" %}
{% endif %}
{% endfor %}
</ul>
</div>

View file

@ -1,13 +0,0 @@
{% load sitetree %}
{% for item in sitetree_items %}
<li role="presentation" class="mobile-menu--item">
<a role="menuitem" href="{% sitetree_url for item %}"
{% if item.hint %}
title="{{ item.hint }}"
{% endif %}
>
{{ item.title_resolved }}
</a>
</li>
{% endfor %}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long