Skip to content

Commit

Permalink
design: improve responsive interface
Browse files Browse the repository at this point in the history 
* Fixes mobile menu.
* Fixes 'back button' position.
* Adds background color on footer.
* Keeps main search bar always visible.

Co-Authored-by: Renaud Michotte <[email protected]>
  • Loading branch information
@zannkukai
zannkukai committed Jul 22, 2021
1 parent 11bc1c1 commit b6f03a9
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 140 deletions.
2 changes: 1 addition & 1 deletion rero_ils/modules/documents/templates/rero_ils/detailed_view_documents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

{%- block body %}
<header class="row py-2">
<a href="javascript:history.back()"><i class="fa fa-arrow-left"></i> {{ _('Back') }}</a>
<a href="javascript:history.back()" class="col-12"><i class="fa fa-arrow-left"></i> {{ _('Back') }}</a>
</header>
<div class="row">
{%- set icon_name = record | document_main_type(false) %}
Expand Down
11 changes: 2 additions & 9 deletions rero_ils/theme/assets/scss/rero_ils/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,6 @@ header {
transform: rotate(-90deg);
}


#mobileHide {
@include media-breakpoint-up(md) {
position: fixed;
top: 0;
z-index: 1000;
width: 60%;
border: solid lightgray 1px;
}
.rero-ils-second-menu:not(.d-none){
border-top: solid #F0F0F0 1px;
}
18 changes: 10 additions & 8 deletions rero_ils/theme/templates/rero_ils/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.

#}
<footer class="rero-ils-footer container d-flex justify-content-center align-items-center border-top mt-4 py-4">
<p class="text-secondary mb-0">
{{ _('Developed by') }}
<a href="https://www.rero.ch" target="_blank">RERO</a>
{{ _('using') }}
<a href="https://github.com/rero/rero-ils" target="_blank">RERO ILS v{{version}}</a> &amp;
<a href="https://inveniosoftware.org" target="_blank">Invenio</a>
</p>
<footer class="rero-ils-footer border-top mt-4 bg-light d-flex">
<div class="container d-flex justify-content-center align-items-center py-4">
<p class="text-secondary mb-0">
{{ _('Developed by') }}
<a href="https://www.rero.ch" target="_blank">RERO</a>
{{ _('using') }}
<a href="https://github.com/rero/rero-ils" target="_blank">RERO ILS v{{version}}</a> &amp;
<a href="https://inveniosoftware.org" target="_blank">Invenio</a>
</p>
</div>
</footer>
172 changes: 81 additions & 91 deletions rero_ils/theme/templates/rero_ils/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,126 +17,116 @@

#}
{%- from "rero_ils/macros/header_menus.html" import menu, submenu, mobile_menu -%}
<header>
<header class="sticky-top">
{%- block navbar %}
<!-- SEARCH NAVBAR :: Brand / search / expand ========================= -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark rero-ils-header">
<div class="container">
<div class="container d-flex align-self-center justify-content-between">
{%- block navbar_brand %}
{%- if config.THEME_LOGO %}
<div class="align-self-center d-flex justify-content-between">
<a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand pr-2" id="homepage-logo">
<img class="rero-ils-logo navbar-brand" src="{{ url_for('static', filename=config.THEME_LOGO)}}" alt="{{_(config.THEME_SITENAME)}} logo">
<div id="{{ viewcode }}-logo"></div>
</a>
<a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand pr-2" id="homepage-logo">
<img class="rero-ils-logo navbar-brand" src="{{ url_for('static', filename=config.THEME_LOGO)}}" alt="{{_(config.THEME_SITENAME)}} logo">
<div id="{{ viewcode }}-logo"></div>
</a>
{%- else %}
<a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand">{{_(config.THEME_SITENAME)}}</a>
<a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand">{{_(config.THEME_SITENAME)}}</a>
{%- endif %}
</div>
{%- endblock navbar_brand %}

{%- block navbar_search %}
<div class="align-self-center pr-2 flex-grow-1">
<main-search-bar
placeholder="{{ _('Search') }}"
viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"
language="{{ current_i18n.locale.language[:2] }}"
></main-search-bar>
</div>
<main-search-bar
class="flex-grow-1"
placeholder="{{ _('Search') }}"
viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"
language="{{ current_i18n.locale.language[:2] }}"
></main-search-bar>
{%- endblock navbar_search %}

{%- block navbar_menus %}
<div class="align-self-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
</div>
<button class="navbar-toggler ml-2" type="button"
data-toggle="collapse" data-target="#mobileHide"
aria-controls="mobileHide" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
{%- endblock navbar_menus %}
</div>
</nav>
<!-- Main menus - visible only on large screens -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rero-ils-first-menu py-0 d-none d-lg-block">
<div class="container">
<!-- User menus -->
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav flex-wrap">
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
{%- if item.children %}
<li class="nav-item{{ ' active' if item.active else ''}}">
<a class="nav-link collapsed {{ item.cssClass }}" data-toggle="collapse" role="button"
aria-controls="collapseExample" aria-expanded="false"
href="#{{ item.name }}"
{{ "id={}".format(item.id) if item.id }}
>
{{ item.text|safe }}
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
</li>
{%- else %}
<li class="nav-item{{ ' active' if item.active else ''}}">
<a href="{{ item.url }}" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
</li>
{%- endif %}
{%- endfor %}
</ul>
</div>
</div>
<!-- MAIN NAVBAR :: Main menus (visible only on large screens) ======== -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rero-ils-first-menu py-0 pr-0 d-none d-lg-block">
<!-- User menus -->
<ul class="navbar-nav container collapse justify-content-end">
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
{%- if item.children %}
<li class="nav-item{{ ' active' if item.active else ''}}">
<a class="nav-link collapsed {{ item.cssClass }}" data-toggle="collapse" role="button"
aria-controls="collapseExample" aria-expanded="false"
href="#{{ item.name }}"
{{ "id={}".format(item.id) if item.id }}
>
{{ item.text|safe }}
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
</li>
{%- else %}
<li class="nav-item{{ ' active' if item.active else ''}}">
<a href="{{ item.url }}" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
</li>
{%- endif %}
{%- endfor %}
</ul>
</nav>
<!-- Submenus -->
<nav class="navbar navbar-expand-lg navbar-light bg-white rero-ils-second-menu py-0 d-none d-lg-block">
<!-- SUBMENU NAVBAR =================================================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-white rero-ils-second-menu py-0 pr-0 d-none d-lg-block border-bottom">
<div class="container flex-column" id="navbarHide">
<!-- user submenus -->
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
{%- if item.children %}
<div class="collapse rero-ils-collapse-menu flex-grow-1 w-100" data-parent="#navbarHide" id="{{ item.name }}">
<ul class="navbar-nav justify-content-end">
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
{%- if item.children %}
<div class="collapse rero-ils-collapse-menu flex-grow-1 w-100" data-parent="#navbarHide" id="{{ item.name }}">
<ul class="navbar-nav justify-content-end">
{%- for child in item.children if child.visible %}
<li class="nav-item {{class_name if class_name}}">
<a class="nav-link" href="{{ child.url }}" {{ "id={}".format(child.id) if child.id }}>{{ child.text|safe }}</a>
</li>
{%- endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
</div>
</nav>
<!-- HIDDEN MENUS :: Only visible from medium to extra small screens == -->
<nav class="navbar-light bg-light d-lg-none d-xl-none border-bottom collapse" id="mobileHide">
<!-- User menus -->
<ul class="container navbar-nav navbar-collapse align-items-start list-group list-group-flush">
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
{%- if item.children %}
<li class="nav-item{{ ' active' if item.active else ''}} w-100 list-group-item bg-light">
<a class="nav-link collapsed" href="#{{ item.name }}" data-toggle="collapse" role="button" aria-controls="collapseExample" aria-expanded="false" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }} <i class="fa fa-caret-down float-right" aria-hidden="true"></i></a>
<ul class="nav collapse pl-2" id="{{ item.name }}" data-parent="#mobileHide">
{%- for child in item.children if child.visible %}
<li class="nav-item {{class_name if class_name}}">
<li class="nav-item {{class_name if class_name}} w-100">
<a class="nav-link" href="{{ child.url }}" {{ "id={}".format(child.id) if child.id }}>{{ child.text|safe }}</a>
</li>
{%- endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
</div>
</nav>
<!-- Menus - visible from medium to extra small screens -->
<nav class="navbar-light bg-light d-lg-none d-xl-none navbarSupportedContent collapse border-bottom" id="mobileHide">
<div class="container">
<!-- User menus -->
<ul class="navbar-nav navbar-collapse align-items-start list-group list-group-flush">
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
{%- if item.children %}
<li class="nav-item{{ ' active' if item.active else ''}} w-100 list-group-item bg-light">
<a class="nav-link collapsed" href="#{{ item.name }}" data-toggle="collapse" role="button" aria-controls="collapseExample" aria-expanded="false" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }} <i class="fa fa-caret-down float-right" aria-hidden="true"></i></a>
<ul class="nav collapse pl-2" id="{{ item.name }}" data-parent="#mobileHide">
{%- for child in item.children if child.visible %}
<li class="nav-item {{class_name if class_name}} w-100">
<a class="nav-link" href="{{ child.url }}" {{ "id={}".format(child.id) if child.id }}>{{ child.text|safe }}</a>
</li>
{%- endfor %}
</ul>
</li>
{%- else %}
<li class="nav-item{{ ' active' if item.active else ''}}">
<a href="{{ item.url }}" class="nav-link" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
</li>
{%- endif %}
{%- endfor %}
</ul>
</div>
</li>
{%- else %}
<li class="nav-item{{ ' active' if item.active else ''}}">
<a href="{{ item.url }}" class="nav-link" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
</li>
{%- endif %}
{%- endfor %}
</ul>
</nav>
{%- endblock navbar %}
</header>

{%- block flashmessages %}
{%- from "rero_ils/macros/messages.html" import flashed_messages with context -%}
{{ flashed_messages() }}
{%- from "rero_ils/macros/messages.html" import flashed_messages with context -%}
{{ flashed_messages() }}
{%- endblock flashmessages %}

{% if False %}
<div class="container">
{%- block breadcrumbs %}
{%- include "rero_ils/breadcrumbs.html" %}
{%- include "rero_ils/breadcrumbs.html" %}
{%- endblock breadcrumbs %}
</div>
{% endif %}
54 changes: 27 additions & 27 deletions rero_ils/theme/templates/rero_ils/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,36 +85,36 @@
{{ rtl_direction|safe }}{% endif %}{% endif %} itemscope itemtype="http://schema.org/WebPage" data-spy="scroll"
data-target=".scrollspy-target" {% if viewcode %}id="view-{{ viewcode }}" {% endif %}>
{%- block outer_body %}
{%- block browserupgrade %}
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
{%- block browserupgrade %}
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
{%- endblock browserupgrade %}
{%- block body_inner %}
{%- block page_header %}
{% include 'rero_ils/header.html' %}
{%- endblock page_header %}
{%- endblock browserupgrade %}

{%- block page_body %}
<div class="container flex-grow-1 mt-1">
{%- block body_inner %}
<!-- HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
{%- block page_header %}
{% include 'rero_ils/header.html' %}
{%- endblock page_header %}
<!-- BODY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
{%- block page_body %}
<div class="container">
{%- block body %}
{%- endblock body %}
</div>
{%- endblock page_body %}
<!-- FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
{%- block page_footer %}
{% include 'rero_ils/footer.html' %}
{%- endblock page_footer %}
{%- endblock body_inner %}

{%- block body %}
{%- endblock body %}
</div>
{%- endblock page_body %}

{%- block page_footer %}
{% include 'rero_ils/footer.html' %}
{%- endblock page_footer %}

{%- endblock body_inner %}

{%- block javascript %}
{% include 'rero_ils/javascript.html' %}
{%- endblock javascript %}
{%- block trackingcode %}
{% include 'rero_ils/trackingcode.html' %}
{%- endblock %}
{%- block javascript %}
{% include 'rero_ils/javascript.html' %}
{%- endblock javascript %}
{%- block trackingcode %}
{% include 'rero_ils/trackingcode.html' %}
{%- endblock %}
{%- endblock outer_body %}
</body>

Expand Down
5 changes: 1 addition & 4 deletions rero_ils/theme/templates/rero_ils/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,7 @@
{% extends 'rero_ils/page.html' %}

{%- block page_body %}
<div class="container mt-4">
<public-search-root></public-search-root>
</div>

<public-search-root class="container mt-4"></public-search-root>
{%- endblock page_body -%}

{%- block javascript %}
Expand Down

0 comments on commit b6f03a9

Please sign in to comment.