Navigation Menu

Skip to content

Commit

Permalink
Add EDS search bar in Bootstrap 3 header
Browse files Browse the repository at this point in the history
  • Loading branch information
@suecarmol
suecarmol committed Oct 1, 2021
1 parent aa79356 commit f4cab26
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 61 deletions.
44 changes: 44 additions & 0 deletions TWLight/static/css/local.css
View file
Expand Up @@ -178,6 +178,10 @@ header {
color: #000000 !important;
}

.library-header{
width: 100%;
}

.logo-header {
height: 70px;
float: left;
Expand Down Expand Up @@ -283,6 +287,40 @@ header {
text-decoration: underline !important;
}

.ebsco-single-search{
margin-top: 15px;
}

.eds-searchbox{
width: 100%;
}

.eds-search-input{
background: #fff;
border: 1px solid #3366CC;
border-radius: 2px 0 0 2px;
padding: 5px;
width: 80%;
font-size: 14px;
}

.eds-search-button{
font-family: Roboto;
color: #FFFFFF;
background-color: #3366CC;
border-radius: 0 2px 2px 0;
}

.eds-search-button:hover {
color: #FFFFFF !important;
background-color: #3366CC !important;
text-decoration: underline !important;
}

.eds-search-icon{
display: none;
}

@media (max-width:300px){
#footer{
position: relative;
Expand Down Expand Up @@ -315,6 +353,12 @@ nav .divider {
}
}

@media (max-width: 768px){
.site-title {
display: none;
}
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
.twl-brand{
Expand Down
160 changes: 99 additions & 61 deletions TWLight/templates/header_partial_b3.html
View file
Expand Up @@ -2,68 +2,106 @@
{% load static %}
{% load twlight_perms %}

{% get_current_language as LANGUAGE_CODE %}
<nav id="top-nav" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- logo -->
<a class="navbar-brand twl-brand" href="{% url 'users:my_library' %}">
<img src="{% static 'img/Wikipedia_Library_owl.svg' %}" class="img-responsive logo-header"
alt="
{% comment %}Translators: Alt text for the Wikipedia Library shown in the top left of all pages.{% endcomment %}
{% trans "The Wikipedia Library home" %}
">
<!-- site name -->
{% comment %}Translators: Name of the project/tool.{% endcomment %}
<p class="site-title"> {% trans "The Wikipedia Library" %} </p>
</a>
<button type="button" class="navbar-toggle collapsed twl-toggle-button" data-toggle="collapse"
data-target="#navbarTogglerTWL" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="navbar-toggler-icon fa fa-user"></i>
<i class="navbar-toggler-icon fa fa-arrow-down"></i>
</button>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbarTogglerTWL" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right navbar-nav">
{% if user|coordinators_only %}
<li role="presentation" class="mobile-menu nav-item">
<a class="nav-links" href="{% url 'applications:list' %}">
{% comment %}Translators: Shown in the top bar of almost every page when the current user is an account coordinator, taking them to the page where they can see existing applications. {% endcomment %}
{% trans "Review" %}
</a>
</li>
<li role="presentation" class="mobile-menu nav-item">
<a class="nav-links" href="{% url 'applications:send' %}">
{% comment %}Translators: Shown in the top bar of almost every page when the current user is an account coordinator, taking them to the page where they can send approved applications to partners for setup. {% endcomment %}
{% trans "Send data to partners" %}
</a>
</li>
{% endif %}
<li role="separator" class="divider"></li>
<li role="presentation" class="mobile-menu nav-item">
<a class="nav-links" href="{% url 'suggest' %}">
{% comment %}Translators: Shown in the top bar of almost every page, taking users to a page where they can suggest new collections to the Library. {% endcomment %}
{% trans "Suggest a collection" %}
</a>
</li>
<li role="separator" class="divider"></li>
{% if user and user.is_authenticated %}
<li role="presentation" class="mobile-menu nav-item">
<a class="btn user-button" href="{% url 'users:home' %}">
{{ user.editor.wp_username }}
</a>
</li>
<li role="presentation" class="mobile-menu nav-item">
{% comment %}Translators: Shown in the top bar to let users log out of The Wikipedia Library. {% endcomment %}
<a class="nav-links" href="{% url 'auth_logout' %}?next=/">
{% trans "Log out" %}
</a>
</li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">
<div class="navbar-header library-header">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-2">
<!-- logo -->
<a class="navbar-brand twl-brand" href="{% url 'users:my_library' %}">
<img src="{% static 'img/Wikipedia_Library_owl.svg' %}" class="img-responsive logo-header"
alt="
{% comment %}Translators: Alt text for the Wikipedia Library shown in the top left of all pages.{% endcomment %}
{% trans "The Wikipedia Library home" %}
">
<!-- site name -->
{% comment %}Translators: Name of the project/tool.{% endcomment %}
<p class="site-title"> {% trans "The Wikipedia Library" %} </p>
</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-6 col-xs-7">
<!-- EBSCO Search Box Begins -->
<form action="https://searchbox.ebsco.com/search/" target="_blank" class="ebsco-single-search">
<input name="schemaId" value="search" type="hidden" />
<input name="custid" value="ns253359" type="hidden" />
<input name="groupid" value="main" type="hidden" />
<input name="profid" value="eds" type="hidden" />
<input name="scope" value="site" type="hidden" />
<input name="site" value="eds-live" type="hidden" />
<input name="direct" value="true" type="hidden" />
<input name="authtype" value="url" type="hidden" />
<input name="lang" value="{{ LANGUAGE_CODE }}" type="hidden" />
<div class="input-group eds-searchbox">
{% comment %}Translators: Shown in the search input. {% endcomment %}
<input id="eb-sbb-search-input" name="bquery" type="text"
class="eds-search-input form-control"
placeholder="{% trans 'Search the library' %}" />
<span class="input-group-btn">
<button type="submit" class="btn eds-search-button">
{% comment %}Translators: Shown in the search button. {% endcomment %}
<span class="eds-search-text">{% trans 'Search' %}</span>
<i class="fa fa-search eds-search-icon"></i>
</button>
</span>
</div>
</form>
<!-- EBSCO Search Box Ends -->
</div>
<div class="col-sm-2 col-xs-3">
<button type="button" class="navbar-toggle collapsed twl-toggle-button" data-toggle="collapse"
data-target="#navbarTogglerTWL" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="navbar-toggler-icon fa fa-user"></i>
<i class="navbar-toggler-icon fa fa-arrow-down"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbarTogglerTWL" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right navbar-nav">
{% if user|coordinators_only %}
<li role="presentation" class="mobile-menu nav-item">
<a class="nav-links" href="{% url 'applications:list' %}">
{% comment %}Translators: Shown in the top bar of almost every page when the current user is an account coordinator, taking them to the page where they can see existing applications. {% endcomment %}
{% trans "Review" %}
</a>
</li>
<li role="presentation" class="mobile-menu nav-item">
<a class="nav-links" href="{% url 'applications:send' %}">
{% comment %}Translators: Shown in the top bar of almost every page when the current user is an account coordinator, taking them to the page where they can send approved applications to partners for setup. {% endcomment %}
{% trans "Send data to partners" %}
</a>
</li>
{% endif %}
<li role="separator" class="divider"></li>
<li role="presentation" class="mobile-menu nav-item">
<a class="nav-links" href="{% url 'suggest' %}">
{% comment %}Translators: Shown in the top bar of almost every page, taking users to a page where they can suggest new collections to the Library. {% endcomment %}
{% trans "Suggest a collection" %}
</a>
</li>
<li role="separator" class="divider"></li>
{% if user and user.is_authenticated %}
<li role="presentation" class="mobile-menu nav-item">
<a class="btn user-button" href="{% url 'users:home' %}">
{{ user.editor.wp_username }}
</a>
</li>
<li role="presentation" class="mobile-menu nav-item">
{% comment %}Translators: Shown in the top bar to let users log out of The Wikipedia Library. {% endcomment %}
<a class="nav-links" href="{% url 'auth_logout' %}?next=/">
{% trans "Log out" %}
</a>
</li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div><!-- /.container-fluid -->
</nav>

0 comments on commit f4cab26

Please sign in to comment.