12 changed files with 490 additions and 17 deletions
@ -0,0 +1,222 @@ |
|||||||
|
<style> |
||||||
|
.accordion { |
||||||
|
background-color: #eee; |
||||||
|
color: #444; |
||||||
|
cursor: pointer; |
||||||
|
padding: 18px; |
||||||
|
width: 100%; |
||||||
|
border: none; |
||||||
|
text-align: left; |
||||||
|
outline: none; |
||||||
|
font-size: 15px; |
||||||
|
transition: 0.4s; |
||||||
|
} |
||||||
|
|
||||||
|
.active, .accordion:hover { |
||||||
|
background-color: #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
.panel { |
||||||
|
padding: 0 18px; |
||||||
|
background-color: white; |
||||||
|
max-height: 0; |
||||||
|
overflow: hidden; |
||||||
|
transition: max-height 0.2s ease-out; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<p> |
||||||
|
Hot topics this week: <a href="/wireless">Wireless configuration;</a> <a href="/printing">Printing</a> |
||||||
|
</p> |
||||||
|
<button class="accordion">Books</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/books">Find books on a topic</a> - see also the <a href="/sg">subject guide</a> for your topic |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/books/find">Find books on the shelves</a> (also video: <a href="http://resources.library.upei.ca/libtours/LearningObjects/RM-Call_Numbers/index.html">how to use a Call Number</a>) |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/borrowing-renewing-returning-library-materials">Checkout and renewal of print books</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/ebooks">Ebooks</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Articles</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/articles">Find articles on a topic</a> - see also the <a href="/sg">subject guide</a> for your topic |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/peer-reviewed-articles-how-find">Peer-reviewed articles</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/howto/citation">Reading an article citation</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Study Spaces</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/floorplans">Floor plans</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/quiet">Quiet</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/study_rooms">Group</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Technology</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/printing">Printing</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/scan">Scanning</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/computers">Workstations</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/laptop">Laptops</a> you can check out |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
Your laptop in the library: |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/wireless">wireless network</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/laptop/print">laptop printing</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/collaboratory">Multimedia - DVDs, videos, etc</a>. |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/3dprinting">3D printing</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Getting Help</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/get_help">4 Ways to get help</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/askus">AskUs online chat</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
Appointments with <a href="/librarians">subject librarians</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/ill">Get material not available at the Library</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Research Tools and Tips</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/onesearch_about">OneSearch</a> - the mega search for books, articles, and more |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/sg">Subject guides</a> - tips for your discipline |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/refworks">RefWorks</a> - how to manage your bibliography citations |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/gscholar">Google Scholar</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">About the Library</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/libraryhistory">Mission/History</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/people">Staff</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/units">Organization</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/visiting">Visiting from off-campus</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Other Info</button> |
||||||
|
<div class="panel"> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/reserves">Reserves (for students)</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/faculty">Faculty</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="/alumni/community">Alumni</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
How to find more information on this website |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
Use <a href="/all-search">All Search</a> to keyword search (e.g. "lost and found") |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
Use the <a href="/site-index">Site Index</a> to browse all page titles (excludes Databases and Reserves) |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
Use the list of links at the "footer" of every page including this one |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
var acc = document.getElementsByClassName("accordion"); |
||||||
|
var i; |
||||||
|
|
||||||
|
for (i = 0; i < acc.length; i++) { |
||||||
|
acc[i].addEventListener("click", function() { |
||||||
|
this.classList.toggle("active"); |
||||||
|
var panel = this.nextElementSibling; |
||||||
|
if (panel.style.maxHeight) { |
||||||
|
panel.style.maxHeight = null; |
||||||
|
} else { |
||||||
|
panel.style.maxHeight = panel.scrollHeight + "px"; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
{#<div{{ attributes.addClass(classes) }}>#} |
||||||
|
{#{{ title_prefix }}#} |
||||||
|
{#{% if label %}#} |
||||||
|
{#<h3{{ title_attributes }}>{{ label }}</h3>#} |
||||||
|
{#{% endif %}#} |
||||||
|
{#{{ title_suffix }}#} |
||||||
|
{#{% block content %}#} |
||||||
|
{#{{ content }}#} |
||||||
|
{#{% endblock %}#} |
||||||
|
{#</div>#} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
{# |
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Theme override for a field. |
||||||
|
* |
||||||
|
* To override output, copy the "field.html.twig" from the templates directory |
||||||
|
* to your theme's directory and customize it, just like customizing other |
||||||
|
* Drupal templates such as page.html.twig or node.html.twig. |
||||||
|
* |
||||||
|
* Instead of overriding the theming for all fields, you can also just override |
||||||
|
* theming for a subset of fields using |
||||||
|
* @link themeable Theme hook suggestions. @endlink For example, |
||||||
|
* here are some theme hook suggestions that can be used for a field_foo field |
||||||
|
* on an article node type: |
||||||
|
* - field--node--field-foo--article.html.twig |
||||||
|
* - field--node--field-foo.html.twig |
||||||
|
* - field--node--article.html.twig |
||||||
|
* - field--field-foo.html.twig |
||||||
|
* - field--text-with-summary.html.twig |
||||||
|
* - field.html.twig |
||||||
|
* |
||||||
|
* Available variables: |
||||||
|
* - attributes: HTML attributes for the containing element. |
||||||
|
* - label_hidden: Whether to show the field label or not. |
||||||
|
* - title_attributes: HTML attributes for the title. |
||||||
|
* - label: The label for the field. |
||||||
|
* - multiple: TRUE if a field can contain multiple items. |
||||||
|
* - items: List of all the field items. Each item contains: |
||||||
|
* - attributes: List of HTML attributes for each item. |
||||||
|
* - content: The field item's content. |
||||||
|
* - entity_type: The entity type to which the field belongs. |
||||||
|
* - field_name: The name of the field. |
||||||
|
* - field_type: The type of the field. |
||||||
|
* - label_display: The display settings for the label. |
||||||
|
* |
||||||
|
* |
||||||
|
* @see template_preprocess_field() |
||||||
|
*/ |
||||||
|
#} |
||||||
|
{% |
||||||
|
set classes = [ |
||||||
|
'field', |
||||||
|
'field--name-' ~ field_name|clean_class, |
||||||
|
'field--type-' ~ field_type|clean_class, |
||||||
|
'field--label-' ~ label_display, |
||||||
|
label_display == 'inline' ? 'clearfix', |
||||||
|
] |
||||||
|
%} |
||||||
|
{% |
||||||
|
set title_classes = [ |
||||||
|
'field__label', |
||||||
|
label_display == 'visually_hidden' ? 'visually-hidden', |
||||||
|
] |
||||||
|
%} |
||||||
|
{#{{ kint(items)}}#} |
||||||
|
{% if label_hidden %} |
||||||
|
{% if multiple %} |
||||||
|
<div{{ attributes.addClass(classes, 'field__items') }}> |
||||||
|
{% for item in items %} |
||||||
|
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
{% else %} |
||||||
|
{% for item in items %} |
||||||
|
<div{{ attributes.addClass(classes, 'field__item') }}><h3><i class="fa-solid fa-link"></i> <a href="http://proxy.library.upei.ca/login?url={{ item.content['#url']}}">{{ item.content['#title']}}</a></h3></div> |
||||||
|
{% endfor %} |
||||||
|
{% endif %} |
||||||
|
{% else %} |
||||||
|
<div{{ attributes.addClass(classes) }}> |
||||||
|
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div> |
||||||
|
{% if multiple %} |
||||||
|
<div class="field__items"> |
||||||
|
{% endif %} |
||||||
|
{% for item in items %} |
||||||
|
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div> |
||||||
|
test4 |
||||||
|
{% endfor %} |
||||||
|
{% if multiple %} |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
{# |
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Default theme implementation for a facets item list. |
||||||
|
* |
||||||
|
* Available variables: |
||||||
|
* - items: A list of items. Each item contains: |
||||||
|
* - attributes: HTML attributes to be applied to each list item. |
||||||
|
* - value: The content of the list element. |
||||||
|
* - title: The title of the list. |
||||||
|
* - list_type: The tag for list element ("ul" or "ol"). |
||||||
|
* - wrapper_attributes: HTML attributes to be applied to the list wrapper. |
||||||
|
* - attributes: HTML attributes to be applied to the list. |
||||||
|
* - empty: A message to display when there are no items. Allowed value is a |
||||||
|
* string or render array. |
||||||
|
* - context: A list of contextual data associated with the list. May contain: |
||||||
|
* - list_style: The ID of the widget plugin this facet uses. |
||||||
|
* - facet: The facet for this result item. |
||||||
|
* - id: the machine name for the facet. |
||||||
|
* - label: The facet label. |
||||||
|
* |
||||||
|
* @see facets_preprocess_facets_item_list() |
||||||
|
* |
||||||
|
* @ingroup themeable |
||||||
|
*/ |
||||||
|
#} |
||||||
|
{% if cache_hash %} |
||||||
|
<!-- facets cacheable metadata |
||||||
|
hash: {{ cache_hash }} |
||||||
|
{% if cache_contexts %} |
||||||
|
contexts: {{ cache_contexts }} |
||||||
|
{%- endif %} |
||||||
|
{% if cache_tags %} |
||||||
|
tags: {{ cache_tags }} |
||||||
|
{%- endif %} |
||||||
|
{% if cache_max_age %} |
||||||
|
max age: {{ cache_max_age }} |
||||||
|
{%- endif %} |
||||||
|
--> |
||||||
|
{%- endif %} |
||||||
|
<div class="facets-widget- {{- facet.widget.type -}} "> |
||||||
|
{% if facet.widget.type %} |
||||||
|
{%- set attributes = attributes.addClass('item-list__' ~ facet.widget.type) %} |
||||||
|
{% endif %} |
||||||
|
{% if items or empty %} |
||||||
|
{%- if title is not empty -%} |
||||||
|
<h3>{{ title }}</h3> |
||||||
|
{%- endif -%} |
||||||
|
|
||||||
|
{%- if items -%} |
||||||
|
<{{ list_type }}{{ attributes.addClass("menu vertical") }}> |
||||||
|
{%- for item in items -%} |
||||||
|
<li{{ item.attributes }}>{{ item.value }}</li> |
||||||
|
{%- endfor -%} |
||||||
|
</{{ list_type }}> |
||||||
|
{%- else -%} |
||||||
|
{{- empty -}} |
||||||
|
{%- endif -%} |
||||||
|
{%- endif %} |
||||||
|
|
||||||
|
{% if facet.widget.type == "dropdown" %} |
||||||
|
<label id="facet_{{ facet.id }}_label">{{ 'Facet'|t }} {{ facet.label }}</label> |
||||||
|
{%- endif %} |
||||||
|
</div> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
{# |
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Default theme implementation of a facet result item. |
||||||
|
* |
||||||
|
* Available variables: |
||||||
|
* - value: The item value. |
||||||
|
* - raw_value: The raw item value. |
||||||
|
* - show_count: If this facet provides count. |
||||||
|
* - count: The amount of results. |
||||||
|
* - is_active: The item is active. |
||||||
|
* - facet: The facet for this result item. |
||||||
|
* - id: the machine name for the facet. |
||||||
|
* - label: The facet label. |
||||||
|
* |
||||||
|
* @ingroup themeable |
||||||
|
*/ |
||||||
|
#} |
||||||
|
{% if is_active %} |
||||||
|
<span class="facet-item__status js-facet-deactivate"><i class="fa-solid fa-circle-minus"></i> </span> |
||||||
|
<span class="facet-item__value">{{ value }}</span> |
||||||
|
{% else %} |
||||||
|
<span class="facet-item__status js-facet-deactivate"><i class="fa-solid fa-circle-plus"></i> </span> |
||||||
|
<span class="facet-item__value">{{ value }}</span> |
||||||
|
{% endif %} |
||||||
|
{% if show_count %} |
||||||
|
<span class="facet-item__count">({{ count }})</span> |
||||||
|
{% endif %} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<style> |
||||||
|
.accordion { |
||||||
|
background-color: #eee; |
||||||
|
color: #444; |
||||||
|
cursor: pointer; |
||||||
|
padding: 18px; |
||||||
|
width: 100%; |
||||||
|
border: none; |
||||||
|
text-align: left; |
||||||
|
outline: none; |
||||||
|
font-size: 15px; |
||||||
|
transition: 0.4s; |
||||||
|
} |
||||||
|
|
||||||
|
.active, .accordion:hover { |
||||||
|
background-color: #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
.panel { |
||||||
|
padding: 0 18px; |
||||||
|
background-color: white; |
||||||
|
max-height: 0; |
||||||
|
overflow: hidden; |
||||||
|
transition: max-height 0.2s ease-out; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<h2>Animated Accordion</h2> |
||||||
|
<p>Click on the buttons to open the collapsible content.</p> |
||||||
|
|
||||||
|
<button class="accordion">Section 1</button> |
||||||
|
<div class="panel"> |
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Section 2</button> |
||||||
|
<div class="panel"> |
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="accordion">Section 3</button> |
||||||
|
<div class="panel"> |
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script> |
||||||
|
var acc = document.getElementsByClassName("accordion"); |
||||||
|
var i; |
||||||
|
|
||||||
|
for (i = 0; i < acc.length; i++) { |
||||||
|
acc[i].addEventListener("click", function() { |
||||||
|
this.classList.toggle("active"); |
||||||
|
var panel = this.nextElementSibling; |
||||||
|
if (panel.style.maxHeight) { |
||||||
|
panel.style.maxHeight = null; |
||||||
|
} else { |
||||||
|
panel.style.maxHeight = panel.scrollHeight + "px"; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
Loading…
Reference in new issue