diff options
| -rw-r--r-- | pydis_site/static/js/wiki/dropdown.js | 37 | ||||
| -rw-r--r-- | pydis_site/templates/wiki/base.html | 5 | ||||
| -rw-r--r-- | pydis_site/templates/wiki/includes/article_menu.html | 120 | ||||
| -rw-r--r-- | pydis_site/templates/wiki/includes/breadcrumbs.html | 129 |
4 files changed, 174 insertions, 117 deletions
diff --git a/pydis_site/static/js/wiki/dropdown.js b/pydis_site/static/js/wiki/dropdown.js new file mode 100644 index 00000000..55b2e9fc --- /dev/null +++ b/pydis_site/static/js/wiki/dropdown.js @@ -0,0 +1,37 @@ +// TODO: Move to django-simple-bulma + +(function() { + window.dropdowns = {}; + + let elements = document.getElementsByClassName("dropdown"); + + for (let element of elements) { + let menu_element = element.getElementsByClassName("dropdown-menu")[0]; + + function show() { + $(element).addClass("is-active"); + } + + function hide() { + $(element).removeClass("is-active"); + } + + function handle_event(e) { + show(); + + $(document.body).on("click." + menu_element.id, function() { + hide(); + + $(document.body).off("click." + menu_element.id); + }); + + e.stopPropagation(); + } + + $(element).click(handle_event); + $(element).hover(handle_event); + $(element).mouseleave(hide); + + window.dropdowns[menu_element.id] = element; + } +})(); diff --git a/pydis_site/templates/wiki/base.html b/pydis_site/templates/wiki/base.html index 4982fe78..e1742657 100644 --- a/pydis_site/templates/wiki/base.html +++ b/pydis_site/templates/wiki/base.html @@ -21,8 +21,10 @@ {% include "base/navbar.html" with active_item=True dropdowns=True icon_weight="far" use_logo=True %} {% endblock %} - {% block wiki_navbar %} + {% block wiki_navbar %}{% endblock %} + {% block wiki_breadcrumbs %} + {% include "wiki/includes/breadcrumbs.html" %} {% endblock %} {% block wiki_body %} @@ -41,5 +43,6 @@ {% include "base/footer.html" %} {% endblock %} + <script src="{% static "js/wiki/dropdown.js" %}" type="text/javascript"></script> <script src="{% static "js/wiki/load_editor.js" %}" type="text/javascript"></script> {% endblock %} diff --git a/pydis_site/templates/wiki/includes/article_menu.html b/pydis_site/templates/wiki/includes/article_menu.html index db62d28d..56762420 100644 --- a/pydis_site/templates/wiki/includes/article_menu.html +++ b/pydis_site/templates/wiki/includes/article_menu.html @@ -4,87 +4,79 @@ <nav class="navbar is-light" role="navigation" aria-label="wiki navigation"> <div class="container"> <div class="navbar-brand"> - <a role="button" class="navbar-burger" data-target="wiki-menu" aria-label="menu" aria-expanded="false"> - <span aria-hidden="true"></span> - <span aria-hidden="true"></span> - <span aria-hidden="true"></span> - </a> - </div> - - <div class="navbar-menu" id="wiki-menu"> - <div class="navbar-start"> - {% block wiki_breadcrumbs %} - {% include "wiki/includes/breadcrumbs.html" %} - {% endblock %} - </div> - <div class="navbar-end"> - {% if not user.is_anonymous %} - <a class="navbar-item{% if selected == "settings" %} is-active{% endif %}" - href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}" - > - <span class="icon"> - <i class="fas fa-wrench"></i> - </span> - - <span> Settings</span> - </a> - {% endif %} - - {% for plugin in article_tabs %} - <a class="navbar-item{% if selected == plugin.slug %} is-active{% endif %}" - href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}" - > - <span class="icon"> - <i class="{{ plugin.article_tab.1 }}"></i> - </span> + {% if not user.is_anonymous %} + <a class="navbar-item{% if selected == "settings" %} is-active{% endif %}" + href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}" + > + <span class="icon"> + <i class="fas fa-wrench"></i> + </span> - <span> {{ plugin.article_tab.0 }}</span> - </a> - {% endfor %} + <span class="is-hidden-mobile"> Settings</span> + </a> + {% endif %} - <a class="navbar-item{% if selected == "history" %} is-active{% endif %}" - href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}" + {% for plugin in article_tabs %} + <a class="navbar-item{% if selected == plugin.slug %} is-active{% endif %}" + href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}" > <span class="icon"> - <i class="fas fa-clock"></i> + <i class="{{ plugin.article_tab.1 }}"></i> </span> - <span> Changes</span> + <span class="is-hidden-mobile"> {{ plugin.article_tab.0 }}</span> </a> + {% endfor %} - {% if article|can_write:user and not article.current_revision.locked %} - <a class="navbar-item{% if selected == "edit" %} is-active{% endif %}" - href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}" - > - <span class="icon"> - <i class="fas fa-edit"></i> - </span> + <a class="navbar-item{% if selected == "history" %} is-active{% endif %}" + href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}" + > + <span class="icon"> + <i class="fas fa-clock"></i> + </span> - <span> Edit</span> - </a> - {% else %} - <a class="navbar-item{% if selected == "source" %} is-active{% endif %}" - href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}" - > - <span class="icon"> - <i class="fas fa-lock"></i> - </span> + <span class="is-hidden-mobile"> Changes</span> + </a> - <span> View Source</span> - </a> - {% endif %} + {% if article|can_write:user and not article.current_revision.locked %} + <a class="navbar-item{% if selected == "edit" %} is-active{% endif %}" + href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}" + > + <span class="icon"> + <i class="fas fa-edit"></i> + </span> - <a class="navbar-item{% if selected == "view" %} is-active{% endif %}" - href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}" + <span class="is-hidden-mobile"> Edit</span> + </a> + {% else %} + <a class="navbar-item{% if selected == "source" %} is-active{% endif %}" + href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}" > <span class="icon"> - <i class="fas fa-home"></i> + <i class="fas fa-book-spells"></i> </span> - <span> View</span> + <span class="is-hidden-mobile"> View Source</span> </a> - </div> + {% endif %} + + <a class="navbar-item{% if selected == "view" %} is-active{% endif %}" + href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}" + > + <span class="icon"> + <i class="fas fa-book-open"></i> + </span> + + <span class="is-hidden-mobile"> View</span> + </a> + + <a role="button" class="navbar-burger" data-target="wiki-menu" aria-label="menu" aria-expanded="false"> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + </a> </div> + </div> </nav> diff --git a/pydis_site/templates/wiki/includes/breadcrumbs.html b/pydis_site/templates/wiki/includes/breadcrumbs.html index 5894da07..708edb19 100644 --- a/pydis_site/templates/wiki/includes/breadcrumbs.html +++ b/pydis_site/templates/wiki/includes/breadcrumbs.html @@ -1,62 +1,87 @@ -{% load i18n %} {% if urlpath and article %} - <div class="navbar-item has-dropdown is-hoverable"> - <a class="navbar-link">Sub-Articles</a> - - <div class="navbar-dropdown"> - {% if children_slice %} - {% for child in children_slice %} - <a class="navbar-item" href="{% url 'wiki:get' path=child.path %}"> - {{ child.article.current_revision.title }} - </a> - {% endfor %} + <section class="section"> + <div class="container"> + <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs"> + <ul> + {% for ancestor in urlpath.cached_ancestors %} + <li> + <a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a> + </li> + {% endfor %} + + <li class="is-active"> + <a href="{% url 'wiki:get' path=article.path %}">{{ article.current_revision.title|truncatechars:25 }}</a> + </li> + </ul> + </nav> - {% if children_slice_more %} - <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}"> - ...and more. + <div class="dropdown is-pulled-right is-right"> + <div class="dropdown-trigger"> + <a aria-haspopup="true" aria-controls="sub-article-dropdown"> + <span>Sub-Articles</span> + <span class="icon"> + <i class="fas fa-angle-down"></i> + </span> </a> - {% endif %} + </div> + <div class="dropdown-menu" id="sub-article-dropdown" role="menu"> + <div class="dropdown-content"> + {% if children_slice %} + {% for child in children_slice %} + <a class="dropdown-item" href="{% url 'wiki:get' path=child.path %}"> + {{ child.article.current_revision.title }} + </a> + {% endfor %} - <hr class="navbar-divider"> - {% endif %} + {% if children_slice_more %} + <a class="dropdown-item" href="{% url 'wiki:dir' path=urlpath.path %}"> + ...and more. + </a> + {% endif %} - <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}"> - Browse other articles - </a> - </div> - </div> + <hr class="dropdown-divider"> + {% endif %} - {% if request.user.is_authenticated %} - <div class="navbar-item has-dropdown is-hoverable"> - <a class="navbar-link">Create Article</a> + <a class="dropdown-item" href="{% url 'wiki:dir' path=urlpath.path %}"> + Browse other articles + </a> + </div> + </div> + </div> - <div class="navbar-dropdown"> - {% if urlpath.parent %} - <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.parent.path %}"> - At current level - </a> - {% endif %} + {% if request.user.is_authenticated %} + <div class="dropdown is-pulled-right is-right"> + <div class="dropdown-trigger"> + <a aria-haspopup="true" aria-controls="sub-article-dropdown"> + <span>Create Article</span> + <span class="icon"> + <i class="fas fa-angle-down"></i> + </span> + + </a> + </div> + <div class="dropdown-menu" id="sub-article-dropdown" role="menu"> + <div class="dropdown-content"> + {% if urlpath.parent %} + <a class="dropdown-item" href="{% url 'wiki:create' path=urlpath.parent.path %}"> + <span class="icon"> + <i class="fas fa-arrow-right"></i> + </span> + <span>At current level</span> + </a> + {% endif %} + + <a class="dropdown-item" href="{% url 'wiki:create' path=urlpath.path %}"> + <span class="icon"> + <i class="fas fa-arrow-down"></i> + </span> + <span>Below current level</span> + </a> + </div> + </div> + </div> + {% endif %} - <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.path %}"> - Below current level - </a> - </div> </div> - {% endif %} - - <hr class="navbar-divider"> - - <div class="navbar-item"> - <nav class="breadcrumb" aria-label="breadcrumbs"> - {% for ancestor in urlpath.cached_ancestors %} - <li> - <a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a> - </li> - {% endfor %} - - <li class="active"> - <a href="{% url 'wiki:get' path=article.path %}">{{ article.current_revision.title|truncatechars:25 }}</a> - </li> - </nav> - </div> + </section> {% endif %} |