-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added reusable header template to oarepo ui
- Loading branch information
Showing
7 changed files
with
255 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,140 +1,152 @@ | ||
|
|
||
| {# | ||
| -*- coding: utf-8 -*- | ||
| Copyright (C) 2019-2020 CERN. | ||
| Copyright (C) 2019-2020 Northwestern University. | ||
| Copyright (C) 2021 New York University. | ||
| -*- coding: utf-8 -*- | ||
| Copyright (C) 2019-2020 CERN. | ||
| Copyright (C) 2019-2020 Northwestern University. | ||
| Copyright (C) 2021 New York University. | ||
|
|
||
| Invenio App RDM is free software; you can redistribute it and/or modify it | ||
| under the terms of the MIT License; see LICENSE file for more details. | ||
| Invenio App RDM is free software; you can redistribute it and/or modify it | ||
| under the terms of the MIT License; see LICENSE file for more details. | ||
| #} | ||
| <div> | ||
| <header class="theme header"> | ||
| {%- block site_banner %} | ||
| {%- endblock site_banner %} | ||
| <div class="outer-navbar"> | ||
| {%- block banner %} | ||
| {# TODO: add support for user banners {% from 'invenio_banners/banner.html' import banner %} {{ banner() }} #} | ||
| {%- endblock banner %} | ||
| {%- block navbar %} | ||
| <div class="ui container invenio-header-container"> | ||
| <nav id="invenio-nav" class="ui menu shadowless borderless stackable p-0 pt-10 pb-10"> | ||
|
|
||
| {# Main Site logo #} | ||
| <div class="item logo p-0"> | ||
| {%- block navbar_header %} | ||
| {%- block brand %} | ||
| {%- if config.THEME_LOGO %} | ||
| <a class="logo-link" href="/"> | ||
| <img class="ui image" | ||
| src="{{ url_for('static', filename=config.THEME_LOGO) }}" | ||
| alt="{{ _(config.THEME_SITENAME) }}"/> | ||
| </a> | ||
| {%- else %} | ||
| <a class="logo" href="/">{{ _(config.THEME_SITENAME) }}</a> | ||
| {%- endif %} | ||
| {%- endblock brand %} | ||
| {%- endblock navbar_header %} | ||
| </div> | ||
| <header class="ui header-component"> | ||
| {%- block site_banner %} | ||
| {%- endblock site_banner %} | ||
| <div class="outer-navbar"> | ||
| {%- block banner %} | ||
| {# TODO: add support for user banners {% from 'invenio_banners/banner.html' import banner %} {{ banner() }} #} | ||
| {%- endblock banner %} | ||
| {%- block navbar %} | ||
| <div class="ui container invenio-header-container"> | ||
| <nav id="invenio-nav" class="ui menu shadowless borderless stackable p-0 pt-10 pb-10"> | ||
|
|
||
| {# Main Site logo #} | ||
| <div class="item logo p-0"> | ||
| {%- block navbar_header %} | ||
| {%- block brand %} | ||
| {%- if config.THEME_LOGO %} | ||
| <a class="logo-link" href="/"> | ||
| <img class="ui image" | ||
| src="{{ url_for('static', filename=config.THEME_LOGO) }}" | ||
| alt="{{ _(config.THEME_SITENAME) }}"/> | ||
| </a> | ||
| {%- else %} | ||
| <a class="logo" href="/">{{ _(config.THEME_SITENAME) }}</a> | ||
| {%- endif %} | ||
| {%- endblock brand %} | ||
| {%- endblock navbar_header %} | ||
| </div> | ||
|
|
||
| {# Burger menu toggle for mobile menu #} | ||
| <div id="invenio-burger-toggle"> | ||
| <button | ||
| id="invenio-burger-menu-icon" | ||
| class="ui button transparent" | ||
| aria-label="{{ _('Menu') }}" | ||
| aria-haspopup="menu" | ||
| aria-expanded="false" | ||
| aria-controls="invenio-menu" | ||
| > | ||
| <span class="navicon"></span> | ||
| </button> | ||
| </div> | ||
| {# Burger menu toggle for mobile menu #} | ||
| <div id="invenio-burger-toggle"> | ||
| <button | ||
| id="invenio-burger-menu-icon" | ||
| class="ui button transparent" | ||
| aria-label="{{ _('Menu') }}" | ||
| aria-haspopup="menu" | ||
| aria-expanded="false" | ||
| aria-controls="invenio-menu" | ||
| > | ||
| <span class="navicon"></span> | ||
| </button> | ||
| </div> | ||
|
|
||
| {# Main menu #} | ||
| <div | ||
| role="menu" | ||
| id="invenio-menu" | ||
| aria-labelledby="invenio-burger-menu-icon" | ||
| class="ui fluid menu borderless mobile-hidden" | ||
| > | ||
| <button | ||
| id="invenio-close-burger-menu-icon" | ||
| class="ui button transparent" | ||
| aria-label="{{ _('Close menu') }}" | ||
| > | ||
| <span class="navicon"></span> | ||
| </button> | ||
|
|
||
| {# Main menu #} | ||
| <div | ||
| role="menu" | ||
| id="invenio-menu" | ||
| aria-labelledby="invenio-burger-menu-icon" | ||
| class="ui fluid menu borderless mobile-hidden" | ||
| > | ||
| <button | ||
| id="invenio-close-burger-menu-icon" | ||
| class="ui button transparent" | ||
| aria-label="{{ _('Close menu') }}" | ||
| > | ||
| <span class="navicon"></span> | ||
| </button> | ||
| {# Search bar #} | ||
| {%- block search_bar %} | ||
| {% set options = [ | ||
| { | ||
| "key": "docs", | ||
| "title": _("All document records"), | ||
| "text": _("in") ~ " " ~ _("All document records"), | ||
| "value": url_for("documents.search") | ||
| }] | ||
| %} | ||
| <div class="item p-0 search-bar rel-mr-1"> | ||
| <div id="header-search-bar" data-options='{{ options | tojson }}'> | ||
| <form action="{{ url_for('documents.search') }}" class="ui form" role="search"> | ||
| <div class="ui fluid action input"> | ||
| <input type="text" name="q" class="form-control" placeholder="{{ _('Search') }}"> | ||
| <button type="submit" class="ui icon search button" aria-label="{{ _('Search') }}"><i class="search icon"></i></button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| {%- endblock search_bar %} | ||
|
|
||
| {%- if config.THEME_SEARCHBAR %} | ||
| {%- block navbar_search %} | ||
| {%- include config.THEME_SEARCHBAR_TEMPLATE %} | ||
| {%- endblock navbar_search %} | ||
| {# Navigation links #} | ||
| {%- block navbar_nav %} | ||
| {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible recursive %} | ||
| {%- if item.children %} | ||
| <div class="item"> | ||
| <div class="dropdown {{ ' active' if item.active else '' }}"> | ||
| <a role="menuitem" | ||
| class="dropdown-toggle" | ||
| data-toggle="dropdown" | ||
| aria-haspopup="true" | ||
| aria-expanded="false" | ||
| href="{{ item.url }}" | ||
| > | ||
| {{ item.text|safe }} | ||
| <b class="caret"></b> | ||
| </a> | ||
| <ul class="dropdown-menu">{{ loop(item.children|sort(attribute='order')) }}</ul> | ||
| </div> | ||
| </div> | ||
| {%- else %} | ||
| <div class="{{' item main-nav-links active' if item.active and loop.depth == 0 else ' item main-nav-links' }}"> | ||
| <a role="menuitem" href="{{ item.url }}">{{ item.text|safe }}</a> | ||
| </div> | ||
| {%- endif %} | ||
| {%- endfor %} | ||
|
|
||
| {# Navigation links #} | ||
| {%- block navbar_nav %} | ||
| {# TODO: uncomment for communities, requests & more | ||
| {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible recursive %} | ||
| {%- if item.children %} | ||
| <div class="item"> | ||
| <div class="dropdown {{ ' active' if item.active else '' }}"> | ||
| <a role="menuitem" | ||
| class="dropdown-toggle" | ||
| data-toggle="dropdown" | ||
| aria-haspopup="true" | ||
| aria-expanded="false" | ||
| href="{{ item.url }}" | ||
| > | ||
| {{ item.text|safe }} | ||
| <b class="caret"></b> | ||
| </a> | ||
| <ul class="dropdown-menu">{{ loop(item.children|sort(attribute='order')) }}</ul> | ||
| </div> | ||
| </div> | ||
| {%- else %} | ||
| <div class="{{' item active' if item.active and loop.depth == 0 else ' item' }}"> | ||
| <a role="menuitem" href="{{ item.url }}">{{ item.text|safe }}</a> | ||
| </div> | ||
| {%- endif %} | ||
| {%- endfor %} | ||
| #} | ||
| {% for item in current_menu.submenu('actions').children|sort(attribute='order') if item.visible recursive %} | ||
| <div class="item"> | ||
| <a role="menuitem" href="{{ item.url }}">{{ item.text|safe }}</a> | ||
| </div> | ||
| {% endfor %} | ||
| {%- endblock navbar_nav %} | ||
|
|
||
| {% for item in current_menu.submenu('actions').children|sort(attribute='order') if item.visible recursive %} | ||
| <div class="item"> | ||
| <a role="menuitem" href="{{ item.url }}">{{ item.text|safe }}</a> | ||
| {# User Account menu #} | ||
| {%- block navbar_right %} | ||
| <div class="right menu item"> | ||
| {%- if config.ACCOUNTS and current_user.is_authenticated %} | ||
| {% for item in current_menu.submenu('notifications').children|sort(attribute='order') if item.visible recursive %} | ||
| <div class="item inbox"> | ||
| <a role="menuitem" href="{{ item.url }}" aria-label="{{ _('Requests') }}"> | ||
| <i class="fitted inbox icon inverted"></i> | ||
| <span class="mobile tablet only inline">{{ _("Inbox") }}</span> | ||
| </a> | ||
| </div> | ||
| {% endfor %} | ||
| {%- endblock navbar_nav %} | ||
|
|
||
| {# User Account menu #} | ||
| {%- block navbar_right %} | ||
| <div class="right menu item"> | ||
| {%- if config.ACCOUNTS and current_user.is_authenticated %} | ||
| {% for item in current_menu.submenu('notifications').children|sort(attribute='order') if item.visible recursive %} | ||
| <div class="item inbox"> | ||
| <a role="menuitem" href="{{ item.url }}" aria-label="{{ _('Requests') }}"> | ||
| <i class="fitted inbox icon inverted"></i> | ||
| <span class="mobile tablet only inline">{{ _("Inbox") }}</span> | ||
| </a> | ||
| </div> | ||
| {% endfor %} | ||
| {% endif %} | ||
| {%- include config.THEME_HEADER_LOGIN_TEMPLATE %} | ||
| </div> | ||
| {%- endblock navbar_right %} | ||
| {% endif %} | ||
| {%- include "oarepo_ui/header_login.html" %} | ||
| </div> | ||
| </nav> | ||
| {%- endblock navbar_right %} | ||
| </div> | ||
| {%- endblock navbar %} | ||
|
|
||
| {%- block flashmessages %} | ||
| {%- from "invenio_theme/macros/messages.html" import flashed_messages with context -%} | ||
| {{ flashed_messages() }} | ||
| {%- endblock %} | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| {%- endblock navbar %} | ||
|
|
||
| {%- block flashmessages %} | ||
| {%- from "invenio_theme/macros/messages.html" import flashed_messages with context -%} | ||
| {{ flashed_messages() }} | ||
| {%- endblock %} | ||
| </div> | ||
| </header> | ||
|
|
||
| {%- block breadcrumbs %} | ||
| {%- endblock breadcrumbs %} | ||
| </div> | ||
| {%- block breadcrumbs %} | ||
| {%- endblock breadcrumbs %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,4 +5,5 @@ | |
| */ | ||
| & { | ||
| @import "./definitions/datepicker"; | ||
| @import "./definitions/page-header"; | ||
| } | ||
Oops, something went wrong.