Merge pull request #92 from ELIXIR-Belgium/search

bedroesb · web-flow · commit 4032322ab2ba · 2022-09-07T08:38:41.000+02:00
Changes needed for new landing page RDMkit
diff --git a/_includes/head.html b/_includes/head.html
@@ -6,7 +6,7 @@
     {%- capture keywords %}
     {%- if page.related_pages %}
     {%- for section in page.related_pages %}
-    {%- unless section[1] == nil %}
+    {%- unless section[1].size == 0 %}
     {%- for keywordstr in section[1] %}
     {%- assign keywordpage = site.pages | where: "page_id", keywordstr | first  %}
     {%- if allkeywords %}
diff --git a/_includes/more-information-tiles.html b/_includes/more-information-tiles.html
@@ -17,13 +17,13 @@ <h2>More information</h2>
                                 <div class="col-2 d-flex align-items-center justify-content-center">
                                     {%- assign registry = training.registry |  downcase %}
                                     {%- if registry  == "tess" %}
-                                    <img alt="TeSS logo" class="img-fluid" src="assets/img/tess_logo.svg">
+                                    <img alt="TeSS logo" class="img-fluid" src="{{ 'assets/img/tess_logo.svg' | relative_url }}">
                                     {%- elsif registry == "zenodo" %}
-                                    <img alt="Zenodo logo" class="img-fluid" src="assets/img/zenodo_logo.svg">
+                                    <img alt="Zenodo logo" class="img-fluid" src="{{ 'assets/img/zenodo_logo.svg' | relative_url }}">
                                     {%- elsif registry == "youtube" %}
-                                    <img alt="Youtube logo" class="img-fluid" src="assets/img/youtube_logo.svg">
+                                    <img alt="Youtube logo" class="img-fluid" src="{{ 'assets/img/youtube_logo.svg' | relative_url }}">
                                     {%- elsif registry == "carpentries" %}
-                                    <img alt="Carpentries" class="img-fluid" src="assets/img/carpentries_logo.svg">
+                                    <img alt="Carpentries" class="img-fluid" src="{{ 'assets/img/carpentries_logo.svg' | relative_url }}">
                                     {%- else %}
                                     <i class="fa-solid fa-external-link-alt text-primary fs-5"></i>
                                     {%- endif %}
@@ -53,7 +53,7 @@ <h2>More information</h2>
                         <a class="btn bg-white hover-primary text-start" data-bs-toggle="tooltip" data-bs-placement="right" title="FAIRCookbook" href="{{ recipe.url }}">
                             <div class="row g-1">
                                 <div class="col-2 d-flex align-items-center justify-content-center">
-                                    <img alt="FAIRCookbook logo" class="img-fluid" src="assets/img/fairplus_compact_logo.svg">
+                                    <img alt="FAIRCookbook logo" class="img-fluid" src="{{ 'assets/img/fairplus_compact_logo.svg' | relative_url }}">
                                 </div>
                                 <div class="col-10 d-flex align-items-center">
                                     <span class="text-start">Step-by-step process for: {{recipe.name}}</span>
@@ -69,7 +69,7 @@ <h2>More information</h2>
                         <a class="btn bg-white hover-primary text-start" data-bs-toggle="tooltip" data-bs-placement="right" title="DSW" href="{{ site.dsw_deep_link_prefix | append: question.uuid }}">
                             <div class="row g-1">
                                 <div class="col-2 d-flex align-items-center justify-content-center">
-                                    <img alt="DSW logo" class="img-fluid" src="assets/img/dsw_compact_logo.svg">
+                                    <img alt="DSW logo" class="img-fluid" src="{{ 'assets/img/dsw_compact_logo.svg' | relative_url }}">
                                 </div>
                                 <div class="col-10 d-flex align-items-center">
                                     <span class="text-start">Support for DMP on: {{question.name}}</span>
@@ -85,7 +85,7 @@ <h2>More information</h2>
                         <a class="btn bg-white hover-primary text-start" data-bs-toggle="tooltip" data-bs-placement="right" title="FAIRsharing" href="{{ standard.url }}">
                             <div class="row g-1">
                                 <div class="col-2 d-flex align-items-center justify-content-center">
-                                    <img alt="FAIRsharing logo" class="img-fluid" src="assets/img/fairsharing_compact_logo.svg">
+                                    <img alt="FAIRsharing logo" class="img-fluid" src="{{ 'assets/img/fairsharing_compact_logo.svg' | relative_url }}">
                                 </div>
                                 <div class="col-10 d-flex align-items-center">
                                     <span class="text-start">FAIRsharing collection about: {{standard.name}}</span>
@@ -101,7 +101,7 @@ <h2>More information</h2>
                         <a class="btn bg-white hover-primary text-start" data-bs-toggle="tooltip" data-bs-placement="right" title="RDMkit" href="{{ rdmdoc.url }}">
                             <div class="row g-1">
                                 <div class="col-2 d-flex align-items-center justify-content-center">
-                                    <img alt="RDMkit logo" class="img-fluid" src="assets/img/rdmkit_compact_logo.svg">
+                                    <img alt="RDMkit logo" class="img-fluid" src="{{ 'assets/img/rdmkit_compact_logo.svg' | relative_url }}">
                                 </div>
                                 <div class="col-10 d-flex align-items-center">
                                     <span class="text-start">Data management guidelines on: {{rdmdoc.name}}</span>
diff --git a/_includes/news.html b/_includes/news.html
@@ -1,6 +1,6 @@
 <div class="news">
   {%- if include.title == true %}
-  <h2>Whats new?</h2>
+  <h2>What's new?</h2>
   {%- endif %}
   {%- assign news = site.data.news | sort: "date" %}
   {%- assign count = 0 %}
diff --git a/_includes/related-pages.html b/_includes/related-pages.html
@@ -23,7 +23,7 @@ <h2>Related pages</h2>
                     {%- assign metadata = section_pages | where:"page_id", page_id %}
                     {%- for page_hit in metadata %}
                     <li class="d-grid">
-                        <a class="btn bg-white hover-primary text-start" href="{{ page_hit.url | relative_url }}"><span>{{page_hit.title}}{% if page_hit.description %}</span><br><small class="text-muted">{{ page_hit.description | capitalize }}</small>{% endif %}</a>
+                        <a class="btn bg-white hover-primary text-start" href="{{ page_hit.url | relative_url }}"><span>{{page_hit.title}}{% if page_hit.description %}</span><br><small class="text-muted">{{ page_hit.description }}</small>{% endif %}</a>
                     </li>
                     {%- endfor %}
                     {%- endfor %}
diff --git a/_includes/resource-table-all.html b/_includes/resource-table-all.html
@@ -120,7 +120,7 @@ <h2>Relevant tools and resources</h2>
                 {%- if tool.related_pages %}
                 {%- capture related_pages %}
                 {%- for section in tool.related_pages %}
-                {%- unless section.size == 0 %}
+                {%- unless section[1].size == 0 %}
                 {%- for tag in section[1] %}
                 {%- unless tag == page.page_id %}
                 {%- assign related_page = site.pages | where:"page_id",tag | first %}
diff --git a/_includes/resource-table-page.html b/_includes/resource-table-page.html
@@ -40,7 +40,7 @@ <h3>Tailored to users in {{page.title}}</h3>
                 {%- if tool.related_pages %}
                 {%- capture related_pages %}
                 {%- for section in tool.related_pages %}
-                {%- unless section.size == 0 %}
+                {%- unless section[1].size == 0 %}
                 {%- for tag in section[1] %}
                 {%- unless tag == page.page_id %}
                 {%- assign related_page = site.pages | where:"page_id",tag | first %}
diff --git a/_includes/section-navigation-tiles.html b/_includes/section-navigation-tiles.html
@@ -37,7 +37,7 @@
     <div class="col">
         <div class="input-group">
             <span class="input-group-text" id="search-label">Search</span>
-            <input type="text" id="title-search" class="form-control" onkeyup="buttonUp();" placeholder="Type here..." aria-label="{{page.type | replace: '_', ' ' |}}" aria-describedby="search-label">
+            <input type="text" id="title-search" class="form-control" onkeyup="StartSearch();" placeholder="Type here..." aria-label="{{page.type | replace: '_', ' ' |}}" aria-describedby="search-label">
             <button class="btn btn-primary" title="Button to clear search" type="button" id="clearsearch">
                 <i class="fa-solid fa-backspace"></i>
             </button>
@@ -63,29 +63,72 @@
     <div class="col" data-affiliations="{{affiliations_classes}}" related-pages="{{related_pages_classes}}">
         <div class="card h-100">
             <div class="card-header">
-                <a aria-label="Go to the {{current_page.title}} page" href="{{ current_page.url | relative_url }}">
+                <a class="stretched-link" aria-label="Go to the {{current_page.title}} page" href="{{ current_page.url | relative_url }}">
                     <h3 class="card-title m-0">{{current_page.title}}</h3>
                 </a>
             </div>
             <div class="card-body">
                 {%- if current_page.description %}
                 <p class="card-text">{{ current_page.description}}</p>
                 {%- endif %}
+            </div>
+            <div class="px-3 pb-3 d-flex justify-content-between">
                 {%- if current_page.related_pages %}
+                {%- assign nonempty = false %}
                 {%- for section in current_page.related_pages %}
-                {%- unless section[1] == nil %}
-                <div>
-                    <span><b><small>{{ section[0] | replace: "_", " " | capitalize }}: </small></b></span>
-                    {%- for page_id in section[1] %}
-                    {%- assign section_pages = site.pages | where:"type", section[0] %}
-                    {%- assign metadata = section_pages | where:"page_id", page_id %}
-                    {%- for page_hit in metadata %}
-                    <a href="{{ page_hit.url | relative_url }}"><span class="badge">{{page_hit.title | truncate: 20 }}</span></a>
-                    {%- endfor %}
-                    {%- endfor %}
-                </div>
+                {%- unless section[1].size == 0 %}
+                {%- assign nonempty = true %}
                 {%- endunless %}
                 {%- endfor %}
+                {%- if nonempty %}
+                <div class="dropdown">
+                    <button class="btn  btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                      Related pages
+                    </button>
+                    <ul class="dropdown-menu px-2 py-0 border-0 shadow">
+                        {%- for section in current_page.related_pages %}
+                        {%- unless section[1].size == 0 %}
+                        <li><h6 class="dropdown-header">{{ section[0] | replace: "_", " " | capitalize }}</h6></li>
+                        {%- for page_id in section[1] %}
+                        {%- assign section_pages = site.pages | where:"type", section[0] %}
+                        {%- assign metadata = section_pages | where:"page_id", page_id %}
+                        {%- for page_hit in metadata %}
+                        <li><a class="dropdown-item rounded" href="{{ page_hit.url | relative_url }}">{{page_hit.title }}</a></li>
+                        {%- endfor %}
+                        {%- endfor %}
+                        {%- endunless %}
+                        {%- endfor %}
+                    </ul>
+                </div>
+                {%- endif %}
+                {%- endif %}
+                {%- if current_page.dsw or current_page.faircookbook %}
+                <div class="btn-group btn-group-sm" role="group">
+                    {%- if current_page.faircookbook %}
+                    <div class="btn-group btn-group-sm" role="group">
+                        <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <img alt="faircookbook logo" src="{{ 'assets/img/fairplus_compact_logo.svg' | relative_url }}">
+                        </button>
+                        <ul class="dropdown-menu px-2 py-0 border-0 shadow">
+                            {%- for item in current_page.faircookbook %}
+                            <li><a class="dropdown-item rounded" href="{{ item.url }}">{{item.name }}</a></li>
+                            {%- endfor %}
+                        </ul>
+                    </div>
+                    {%- endif %}
+                    {%- if current_page.dsw %}
+                    <div class="btn-group btn-group-sm" role="group">
+                        <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <img alt="DSW logo" src="{{ 'assets/img/dsw_compact_logo.svg' | relative_url }}">
+                        </button>
+                        <ul class="dropdown-menu px-2 py-0 border-0 shadow">
+                            {%- for item in current_page.dsw %}
+                            <li><a class="dropdown-item rounded" href="{{ site.dsw_deep_link_prefix | append: item.uuid }}">{{item.name }}</a></li>
+                            {%- endfor %}
+                        </ul>
+                    </div>
+                    {%- endif %}
+                </div>
                 {%- endif %}
             </div>
             {%- if current_page.affiliations %}
@@ -100,7 +143,7 @@ <h3 class="card-title m-0">{{current_page.title}}</h3>
                     {%- if affiliation.size == 2 %}
                     {%- assign country_link = site.pages | where:"country_code",country | first %}
                     {%- if country_link %}
-                    <a role="button" href="{{country_link.url}}" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary">
+                    <a role="button" href="{{'country_link.url' | relative_url}}" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary">
                         {%- else %}
                         <a role="button" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary disabled" aria-disabled="true">
                             {%- endif %}
@@ -171,7 +214,7 @@ <h3 class="card-title m-0">{{current_page.title}}</h3>
      * Search cards
      */
 
-    var buttonUp = () => {
+    var StartSearch = () => {
         const input = document.getElementById("title-search");
         if (input) {
             const cols = document.querySelectorAll(".navigation-tiles .col");
diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -55,6 +55,7 @@
                         <a class="nav-link ps-2 d-flex align-items-center" href="{{site.github.repository_url}}"><i class="fa-brands fa-github me-2"></i>{{site.theme_variables.git_host | default: 'GitHub' }}</a>
                     </li>
                     {%- endif %}
+                    {%- unless include.search == false %}
                     <!--start search-->
                     <li class="nav-item ms-0 ms-lg-3 my-2 my-lg-0">
                         <div class="position-relative">
@@ -65,6 +66,7 @@
                         </div>
                     </li>
                     <!--end search-->
+                    {%- endunless %}
                 </ul>
             </div>
         </div>
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -43,7 +43,7 @@ main {
         margin-top: $spacer * 0.25;
     }
 
-    a:not(.btn) {
+    a:not(.btn):not(.dropdown-item) {
         overflow-wrap: break-word;
         word-wrap: break-word;
         -ms-word-break: break-all;
@@ -56,7 +56,7 @@ main {
 
     ol li,
     ul li {
-        margin: 10px 0px;
+        margin: $spacer * .5 0;
 
         &::marker {
             color: $primary;
@@ -722,8 +722,9 @@ li.past_event,
     .card {
         background-color: $nav-card-bg;
 
-        .card-text {
-            min-height: 4.5em;
+        a:not(.stretched-link), button:not(.stretched-link) {
+            z-index: 2;
+            position: relative;
         }
 
         .card-header {
@@ -734,15 +735,16 @@ li.past_event,
             }
         }
 
-        .badge {
-            font-weight: inherit;
+        button {
             background-color: $nav-card-badge-bg;
             color: $nav-card-badge-color;
-        }
-
-        .badge:hover {
-            color: $nav-card-badge-color-hover;
-            background-color: $nav-card-badge-bg-hover;
+            &:hover {
+                color: $nav-card-badge-color-hover;
+                background-color: $nav-card-badge-bg-hover;
+            }
+            img {
+                height: 1.2em;
+            }
         }
     }
 }
diff --git a/assets/js/search.js b/assets/js/search.js
@@ -95,9 +95,11 @@ permalink: assets/js/search.js
                 hideSearch();
             } else {
                 showSearch();
-                // scroll search input into view, workaround for iOS Safari
-                window.scroll(0, -1);
-                setTimeout(function () { window.scroll(0, 0); }, 0);
+                var hero = document.getElementById("search-section");
+                if(hero){
+                    document.querySelector('#search-section').scrollIntoView();
+                }
+                
             }
             if (input === currentInput) {
                 return;
diff --git a/elixir-toolkit-theme.gemspec b/elixir-toolkit-theme.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "elixir-toolkit-theme"
-  spec.version       = "1.18.0"
+  spec.version       = "1.19.0"
   spec.authors       = ["bedroesb"]
   spec.email         = ["bedro@psb.vib-ugent.be\n"]
 
diff --git a/pages/example_pages/general_page_3.md b/pages/example_pages/general_page_3.md
@@ -29,7 +29,8 @@ national_resources:
     description: A general description about the resource
     how_to_access: 
     instance_of: 
-
+related_pages: 
+    example_pages: []
 
 ---
 
