Merge pull request #20 from ELIXIR-Belgium/sidebar-title-url

General improvements

Author: bedroesb

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.0.4.4)
+    activesupport (6.0.4.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
@@ -27,7 +27,7 @@ GEM
     eventmachine (1.2.7)
     eventmachine (1.2.7-x64-mingw32)
     execjs (2.8.1)
-    faraday (1.9.3)
+    faraday (1.10.0)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
@@ -228,17 +228,17 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.3.6)
-    mini_portile2 (2.7.1)
+    mini_portile2 (2.8.0)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.15.0)
     multipart-post (2.1.1)
-    nokogiri (1.13.1)
-      mini_portile2 (~> 2.7.0)
+    nokogiri (1.13.3)
+      mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.1-x64-mingw32)
+    nokogiri (1.13.3-x64-mingw32)
       racc (~> 1.4)
     octokit (4.22.0)
       faraday (>= 0.9)
@@ -247,7 +247,7 @@ GEM
       forwardable-extended (~> 2.6)
     public_suffix (4.0.6)
     racc (1.6.0)
-    rb-fsevent (0.11.0)
+    rb-fsevent (0.11.1)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)

_data/sidebars/main.yml

@@ -1,3 +1,6 @@
+# title: About
+# version: 2.0
+# title_url:  /events.html
 subitems:
   - title: About
     subitems:

_includes/section-navigation-tiles.html

@@ -98,19 +98,19 @@
                     {%- 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"><div class="flag-icon flag-icon-{{affiliation | downcase}} h-30px"></div></a>
+                    <a role="button" href="{{country_link.url}}" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary">
                     {%- else %}
-                    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="{{allcountries[country]}}">
-                        <button class="btn btn-sm text-dark bg-white pe-none" title="{{allcountries[country]}}"><div class="flag-icon flag-icon-{{affiliation | downcase}} h-30px"></div></button>
-                    </span>
+                    <a role="button" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary disabled" aria-disabled="true">
                     {%- endif %}
-                    {%- elsif affiliation == "ALL" %}
-                    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="All people">
-                        <button class="btn btn-sm text-dark bg-white pe-none" title="ALL"><div class="h-30px">ALL</div></button>
-                    </span>
+                        <div class="d-block h-24px">
+                            <span class="flag-icon flag-icon-{{affiliation | downcase}} align-items-center"></span>
+                        </div>
+                    </a>
                     {%- elsif filter_affiliation %}
                     {%- for result in filter_affiliation %}
-                    <a role="button" href="{{result.url}}" data-bs-toggle="tooltip" data-bs-original-title="{{affiliation}}" class="btn btn-sm bg-white hover-primary"><img alt="logo of {{result.name}}" src="{{result.image_url | relative_url }}" class="d-inline h-30px"></a>
+                    <a role="button" href="{{result.url}}" data-bs-toggle="tooltip" data-bs-original-title="{{affiliation}}" class="btn btn-sm bg-white hover-primary">
+                        <img alt="logo of {{result.name}}" src="{{result.image_url | relative_url }}" class="d-inline h-24px">
+                    </a>
                     {%- endfor %}
                     {%- endif %}
                     {%- endfor %}

_includes/sidebar.html

@@ -10,9 +10,19 @@
     {{ page.sidebar | capitalize | replace: "_", " " }} menu <i title="navbar-toggler" class="fa fa-bars ms-2"></i>
 </button>
 <nav class="collapse" id="side-nav" aria-label="Side navigation">
-    <ul id="menu" class="menu list-unstyled mb-4 mb-lg-0">
+    <ul id="menu" class="list-unstyled mb-4 mb-lg-0">
         {%- if sidebar.title or sidebar.version %}
-        <li class="sidebar-title">{{sidebar.title}} {{sidebar.version}}</li>
+        {%- if sidebar.title_url and page.url == sidebar.title_url %}
+        <li class="sidebar-title active">
+        {%- else %}
+        <li class="sidebar-title">
+        {%- endif %}
+        {%- if sidebar.title_url %}
+        <a class="btn active hover-primary text-start d-block mb-1" href="{{ sidebar.title_url | relative_url }}">{{sidebar.title}} {{sidebar.version}}</a>
+        {%- else %}
+        <a class="btn active hover-primary text-start d-block mb-1 disabled" aria-disabled="true">{{sidebar.title}} {{sidebar.version}}</a>
+        {%- endif %}
+        </li>
         {%- endif %}
         {%- for folder in sidebar.subitems %}
         {%- if page.url == folder.url %}

_layouts/page.html

@@ -3,8 +3,12 @@
 ---
 <main id="main" class="mb-5">
     {%- if page.title %}
+    {%- if page.type %}
     {%- assign subtitle = page.type | replace: "_", " " | capitalize %}
-    <h1>{% unless subtitle == nil or subtitle == blank or subtitle == "" %}<span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {% endunless %}{{ page.title }}
+    <h1 class="has-subtitle"><span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {{ page.title }}
+    {%- else %}
+    <h1>{{ page.title }}
+    {%- endif %}
         <div class="btn-group">
             {%- if page.custom-editme %}
             <a role="button" data-bs-toggle="tooltip" title="Propose changes to the content of this page on GitHub" href="{{site.github.repository_url}}/blob/master/{{page.custom-editme}}" class="btn hover-primary text-primary"><i class="fas fa-pencil-alt"></i></a>

assets/css/main.scss

@@ -266,12 +266,8 @@ header .navbar {
     background-color: $sidebar-bg-active;
 }
 
-.sidebar-title {
-    font-size: 1.3em;
-}
-
 ul#menu {
-    > li > a {
+    > li:not(.sidebar-title) > a {
         background-color: $sidebar-bg;
         color: $sidebar-color;
     }
@@ -573,7 +569,7 @@ footer {
     height: 40px;
 }
 
-.h-30px {
+.h-24px {
     height: 24px;
 }
 
@@ -630,6 +626,14 @@ li.past_event,
     }
 }
 
+/*-----Country flags-----*/
+
+.flag-icon {
+    border-radius: 3px;
+    background-size: cover;
+}
+
+
 /*-----Section navigation tiles-----*/
 
 .navigation-tiles {
@@ -655,9 +659,6 @@ li.past_event,
             color: $nav-card-badge-color-hover;
             background-color: $nav-card-badge-bg-hover;
         }
-        .card-footer .flag-icon {
-            display: block;
-        }
     }
 }
 

pages/example_pages/general_page.md

@@ -4,7 +4,7 @@ type: example_pages
 contributors: [Bert Droesbeke]
 description: This description is used when the page is listed
 page_id: gp1
-affiliations: [ELIXIR Europe]
+affiliations: [ELIXIR Europe, BE, SE]
 faircookbook:
 - name: Link towards a FAIRCOOKBOOK recipe
   url: https://fairplus.github.io/

pages/example_pages/general_page_3.md

@@ -2,6 +2,7 @@
 title: General page example 3
 type: example_pages
 description: This page has page level resources
+country_code: BE
 page_id: gp3
 resources:
   - name: Resource name