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 %}
<div class="jumbotron-white">
<div class="jumbotron">
<h1>DASHBOARD</h1>
{% available_categories as categories %}
{% if categories %}

View file

@ -27,12 +27,11 @@
{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
<div class="container">
{% block topbar_base %}
{% block nav %}
{% 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 %}
@ -78,6 +77,7 @@
{% block extra_body %}
{% endblock %}
{% endblock %}
</div>
</body>
</html>
<!-- end site_base.html -->

View file

@ -22,6 +22,7 @@
<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="{% static 'pyconau2017/js/bootstrap.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="{{ STATIC_URL }}js/jquery.formset.js"></script>

View file

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