Merge pull request #1 from learn-static/bootstrap-update

Bootstrap update
learn-static · May 5, 2022 · a26a1e9 · a26a1e9
2 parents b84435a + b3e5b73
commit a26a1e9
Show file tree

Hide file tree

Showing 1,732 changed files with 6,842 additions and 720 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,6 @@
 ##########
-# collectionbuilder-sheets
+# Learn-Static Digital Collection Module
+# built with collectionbuilder-sheets
 # Jekyll Digital Collection Generator, designed for GitHub Pages
 # https://github.com/CollectionBuilder/collectionbuilder-sheets
 ##########

diff --git a/_data/theme.yml b/_data/theme.yml
@@ -86,3 +86,17 @@ text-color: "#191919"
 link-color: "#0032ff"
 base-font-family: # comment out for bootstrap defaults. e.g. Roboto
 font-cdn: # add font stylesheet, e.g. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+
+# THEME ICONS [optional!]
+# cb-gh uses Bootstrap Icons, https://icons.getbootstrap.com/
+# the "icons" object below can override the default icons and add new icons
+# the default keys are icon-image, icon-audio, icon-video, icon-pdf, and icon-default
+# the values must match an icon svg name in "assets/lib/icons/"
+#
+# icons: 
+#   icon-image: image
+#   icon-audio: file-earmark-play
+#   icon-video: camera-video
+#   icon-pdf: file-earmark-text 
+#   icon-default: file-earmark # fall back icon
+#   icon-back-to-top: arrow-up-square # scroll to top icon
diff --git a/_includes/cb/credits.html b/_includes/cb/credits.html
@@ -1,17 +1,16 @@
 <div class="container-fluid mt-4 mb-n3 bg-light p-4 " id="technical">
-    <div class="container mt-4 border rounded p-4">
+    <div class="container mt-4 border rounded p-4 bg-white">
         <h3>Technical Credits - CollectionBuilder</h3>
         <div class="row my-2 justify-content-center">
             <div class="col-md-8 p-4">
-                <p>This digital collection is built with <a href="https://collectionbuilder.github.io/" target="_blank" rel="noopener">CollectionBuilder</a>, an open source tool for creating digital collection and exhibit websites that is developed by faculty librarians at the University of Idaho Library following the <a href="https://lib-static.github.io" target="_blank" rel="noopener">Lib-STATIC</a> methodology.</p>
-
-                <p>This site is built using <a href="https://github.com/CollectionBuilder/collectionbuilder-sheets" target="_blank" rel="noopener">CollectionBuilder-Sheets</a> which utilizes the static website generator <a href="https://jekyllrb.com/" target="_blank" rel="noopener">Jekyll</a> and <a href="https://pages.github.com/" target="_blank" rel="noopener">GitHub Pages</a> to build and host digital collections and exhibits designed for teaching digital library skills.</p>
+                <p>This digital collection is built with <a href="https://collectionbuilder.github.io/" target="_blank" rel="noopener">CollectionBuilder</a>, an open source framework for creating digital collection and exhibit websites that is developed by faculty librarians at the University of Idaho Library following the <a href="https://lib-static.github.io" target="_blank" rel="noopener">Lib-Static</a> methodology.</p>
+                <p>The site started from the <a href="https://github.com/CollectionBuilder/collectionbuilder-gh" target="_blank" rel="noopener">CollectionBuilder-GH</a> template which utilizes the static website generator <a href="https://jekyllrb.com/" target="_blank" rel="noopener">Jekyll</a> and <a href="https://pages.github.com/" target="_blank" rel="noopener">GitHub Pages</a> to build and host digital collections and exhibits.</p>
             </div>
             <div class="col-md-4 text-center">
                 <h4>More Information Available</h4>
-                <a class="btn btn-outline-info my-2" target="_blank" rel="noopener" href="https://collectionbuilder.github.io/about.html">Technical Specifications</a>
+                <a class="btn btn-outline-primary my-2" target="_blank" rel="noopener" href="https://collectionbuilder.github.io/about.html">Technical Specifications</a>
                 <br>
-                <a class="btn btn-outline-secondary my-2" target="_blank" rel="noopener" href="https://collectionbuilder.github.io/about.html#support">Support</a>
+                <a class="btn btn-outline-secondary my-2" target="_blank" rel="noopener" href="https://collectionbuilder.github.io/about.html#support">IMLS Support</a>
             </div>
         </div>
     </div>

diff --git a/_includes/collection-banner.html b/_includes/collection-banner.html
@@ -10,21 +10,27 @@
     padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
     padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
 }
-
+@media screen and (max-width: 576px) {
+    #home-title-box {
+        max-height: 500px;
+    }
+}
 </style>
 <div id="home-banner" class="container-fluid mb-0 p-0">
-    <div id="home-title-box" >
-        <div class="title-card p-2 text-center">
-            {% if site.organization-logo-nav %}<a class="d-none d-md-block" href="{{ site.organization-link }}" target="_blank" rel="noopener">
+    <div id="home-title-box" class="position-relative" >
+        <div class="p-2 text-center text-white bg-dark bg-opacity-75">
+            {% if site.organization-logo-nav %}
+            <a class="d-none d-md-block" href="{{ site.organization-link }}" target="_blank" rel="noopener">
                 <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name }} home" >
             </a>{% endif %}
             <h1 class="display-4">{{ site.title }}</h1>
             {% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
         </div>
+        {% unless site.data.theme.featured-image contains '/' %}
+        <div class="position-absolute bottom-0 end-0 px-2 bg-dark bg-opacity-75">
+            <a class="text-white fs-6" href="{{ site.data.theme.featured-image | prepend: '/item.html?id=' | relative_url }}" title="{{ featuredItem.title | escape }}">Featured Image</a>
+        </div>{% endunless %}
     </div>
-    {% unless site.data.theme.featured-image contains '/' %}<div class="text-right p-0 mt-0">
-        <small><a class="text-info featured-link p-2" href="{{ site.data.theme.featured-image | prepend: '/item.html?id=' | relative_url }}" title="{{ featuredItem.title | escape }}">Featured Image</a></small>
-    </div>{% endunless %}
 </div>
 {%- else -%}
 <div class="container">
@@ -34,7 +40,7 @@ <h1><a class="text-dark font-weight-normal" href="{{ site.baseurl }}/" >{{ site.
             {% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
         </div>
         {% if site.organization-logo-banner %}
-        <div class="col-md-3 d-none d-lg-block text-right">
+        <div class="col-md-3 d-none d-lg-block text-end">
             <a class="btn btn-outline-light" href="{{ site.organization-link }}" target="_blank" rel="noopener">
                 <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name }} home" >
             </a>

diff --git a/_includes/collection-nav.html b/_includes/collection-nav.html
@@ -1,28 +1,28 @@
 <nav class="navbar navbar-expand-lg {{ site.data.theme.navbar-color | default: 'navbar-dark' }} {{ site.data.theme.navbar-background | default: 'bg-dark' }}">
     <div class="container">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#page-nav" aria-controls="page-nav" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#page-nav" aria-controls="page-nav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
 
-        {% if site.organization-logo-nav %}<span class="d-lg-none text-right">
+        {% if site.organization-logo-nav %}<span class="d-lg-none text-end">
             <a href="{{ site.organization-link }}" target="_blank" rel="noopener">
                 <img class="img-fluid" id="mobile-nav-image" src="{{ site.organization-logo-nav | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name }} home" >
             </a>
         </span>{% endif %}
-
+        
         <div class="collapse navbar-collapse" id="page-nav">
-            <ul class="navbar-nav mr-auto">
+            <ul class="navbar-nav me-auto">
                 {%- assign navItems = site.data.config-nav | where_exp: 'item', 'item.dropdown_parent == nil' -%} 
                 {% for nav in navItems %}
                 {% if nav.stub %}
-                <li class="nav-item {% if page.url == nav.stub %}active{% endif %}">
-                    <a class="nav-link " href="{{ nav.stub | relative_url }}">{{ nav.display_name }}</a>
+                <li class="nav-item">
+                    <a class="nav-link{% if page.url == nav.stub %} active{% endif %}" href="{{ nav.stub | relative_url }}">{{ nav.display_name }}</a>
                 </li>
                 {%- else -%}
                 <li class="nav-item dropdown">
                     {% assign navChildren = site.data.config-nav | where_exp: 'item', 'item.dropdown_parent == nav.display_name' %}
                     {%- assign childStubs = navChildren | map: 'stub' -%}
-                    <a class="nav-link  dropdown-toggle{% if childStubs contains page.url %} active{% endif %}" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{ nav.display_name }}</a>
+                    <a class="nav-link  dropdown-toggle{% if childStubs contains page.url %} active{% endif %}" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{ nav.display_name }}</a>
                     <div class="dropdown-menu">
                         {% for c in navChildren %}
                         <a class="dropdown-item {% if page.url == c.stub %}active{% endif %}" href="{{ c.stub | relative_url }}">{{ c.display_name }}</a>

diff --git a/_includes/data-download-modal.html b/_includes/data-download-modal.html
@@ -6,16 +6,14 @@
 {%- endcomment -%}
 
 {%- assign stubs = site.data.config-nav | map: 'stub' | join: ';' -%}
-<button type="button" class="btn btn-info btn-lg float-md-right" data-toggle="modal" data-target="#dataModal">Download Data</button>
+<button type="button" class="btn btn-primary btn-lg float-md-end" data-bs-toggle="modal" data-bs-target="#dataModal">Download Data</button>
 <!-- Modal -->
 <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="dataModalLabel">Collection Data</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
 

diff --git a/_includes/feature/accordion.html b/_includes/feature/accordion.html
@@ -0,0 +1,54 @@
+{% comment %}
+
+    Bootstrap accordion feature, https://getbootstrap.com/docs/5.1/components/accordion/
+
+    e.g. --> {% include accordion.html title1="Example section" text1=example1 title2="Section two" text2=example2 title3="Section three" text3=example3 %}
+
+    Options:
+    - "title1", "title2", "title3" = title for each section of accordion (max three)
+    - "text1", "text2", "text3" = text for each section of accordion (max three). You will probably want to capture the text using a Liquid capture, then use the variable to provide text to this include.
+    - "open" = optional, by default is "false". Add "true" to have the first section of the accordion open.
+
+{%- endcomment -%}
+<div class="accordion mb-3" id="accordionInclude">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingOne">
+        <button class="accordion-button{% unless include.open %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="{% if include.open == true %}true{% else %}false{% endif %}" aria-controls="collapseOne">
+            {{ include.title1 }}
+        </button>
+      </h2>
+      <div id="collapseOne" class="accordion-collapse collapse{% if include.open == true %} show{% endif %}" aria-labelledby="headingOne" data-bs-parent="#accordionInclude">
+        <div class="accordion-body">
+            {{ include.text1 | markdownify }}
+        </div>
+      </div>
+    </div>
+    {% if include.title2 %}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingTwo">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            {{ include.title2 }}
+        </button>
+      </h2>
+      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionInclude">
+        <div class="accordion-body">
+            {{ include.text2 | markdownify }}
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    {% if include.title3 %}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingThree">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            {{ include.title3 }}
+        </button>
+      </h2>
+      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionInclude">
+        <div class="accordion-body">
+            {{ include.text3 | markdownify }}
+        </div>
+      </div>
+    </div>
+    {% endif %}
+</div>
diff --git a/_includes/feature/alert.html b/_includes/feature/alert.html
@@ -1,6 +1,6 @@
 {% comment %}
 
-    Bootstrap Alert, https://getbootstrap.com/docs/4.5/components/alerts/
+    Bootstrap Alert, https://getbootstrap.com/docs/5.1/components/alerts/
 
     E.G. --> {% include feature/alert.html text="example text" color="warning" align="center" %}
 

diff --git a/_includes/feature/audio.html b/_includes/feature/audio.html
@@ -18,20 +18,56 @@
     Audio file may not play correctly from dev server on Chrome browser! It will work in production.
 
 {%- endcomment -%}
+{% assign functionName = "" %}
 {% if include.objectid contains "/" %}
 {%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
 {%- capture audio_link -%}{{ src }}{%- endcapture -%}
-{%- capture audio_caption -%}{{ include.caption }}{%- endcapture -%}
 {% else %}
-{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
-{%- capture audio_link -%}{{ '/item.html' | relative_url | append: '?id=' | append: item.objectid }}{%- endcapture -%}
-{%- capture src -%}{% if item.filename contains '/' %}{{ item.filename | relative_url }}{% else %}{{ '/objects/' | append: item.filename | relative_url }}{% endif %}{% endcapture %}
-{%- capture audio_caption -%}{% if include.caption %}{{ include.caption }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
+{%- capture audio_link -%}{{ '/item.html' | relative_url | append: '?id=' | append: include.objectid }}{%- endcapture -%}
+{%- capture src -%}{% endcapture %}
+{% capture functionName %}audio_feature_{{ include.objectid | slugify | replace: "-","_" }}{% endcapture %}
 {% endif %}
-<p class="text-center my-3">
+{%- capture audio_caption -%}{{ include.caption }}{%- endcapture -%}
+<p class="text-center my-3" {% if functionName != '' %}id="{{ functionName }}"{% endif %}>
     <audio controls class="w-100">
         <source src="{{ src }}" >
         Your browser does not support the audio element.
     </audio>
     {% unless include.caption == false %}<small class="figure-caption"><a href="{{ audio_link }}">{{ audio_caption }}</a></small>{% endunless %}
 </p>
+{% if functionName != '' %}
+<script>
+// set up feature function as variable
+var {{ functionName }} = function (cb_items) { 
+    // find item
+    var record = cb_items.find(item => item.objectid == {{ include.objectid | jsonify }});
+    if (record) {
+        // find file link
+        if (record.filename.includes("/")) {
+            var audio_src = record.filename;
+        } else {
+            var audio_src = "{{ '/objects/' | relative_url }}" + record.filename;
+        }
+        // add src
+        document.querySelector("#{{ functionName }} audio").innerHTML = `<source src="${audio_src}" >`;
+        {% unless include.caption %}
+        // add caption
+        document.querySelector("#{{ functionName }} .figure-caption a").innerHTML = record.title;
+        {% endunless %}
+    } else {
+        // message if objectid doesn't exist
+        console.log("Issue with audio include: objectid {{ include.objectid }} does not exist.");
+       document.querySelector("#{{ functionName }}").innerHTML= "<span class='text-danger'>Problem with this audio include: objectid {{ include.objectid }} does not exist.</span>";
+    }
+
+};
+
+// add feature function to includeFunctions array
+if(includeFunctions) {
+    includeFunctions.push({{ functionName }});
+} else {
+    var includeFunctions = [{{ functionName }}];
+}
+
+</script>
+{% endif %}
diff --git a/_includes/feature/button.html b/_includes/feature/button.html
@@ -1,6 +1,6 @@
 {% comment %}
 
-    Bootstrap button link, https://getbootstrap.com/docs/4.5/components/button/
+    Bootstrap button link, https://getbootstrap.com/docs/5.1/components/buttons/
 
     E.G. --> {% include feature/button.html text="Example Button Link" link="https://example.com" color="success" %}
 
@@ -11,7 +11,7 @@
     - "size" = optional btn size, choose from "lg", "sm" (defaults to normal size)
     - "width" = will use Bootstrap sizing to set the % size, choose from "25", "50", "75", or "100" 
     - "centered" = give "true" to add the button to a div and center on page
-    - "float" = will use Bootstrap float utility to add float, choose from "left" or "right" (not recommended)
+    - "float" = will use Bootstrap float utility to add float, choose from "start" (left) or "end" (right) (not recommended)
 
 {%- endcomment -%}
 {% if include.centered %}<div class="text-center mb-3">{%- endif -%}