Merge pull request #155 from elixir-europe-training/small-fixes

Update homepage, sidebar and search bar
elixir-europe-training · Nov 13, 2024 · f5eddd2 · f5eddd2
2 parents e1749a0 + 7eb73c1
commit f5eddd2
Show file tree

Hide file tree

Showing 10 changed files with 519 additions and 63 deletions.
diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -73,10 +73,10 @@
                     {%- endif %}
                     {%- unless include.search == false %}
                     <!--start search-->
-                    <li class="nav-item">
+                    <li class="nav-item search-nav-item">
                         <div class="position-relative">
                             <form role="search" class="input-group">
-                                <span class="input-group-text" id="search-label"><i class="fa-solid fa-magnifying-glass"></i></span><input type="search" id="search-input" class="search-input form-control" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+                                <span class="input-group-text" id="search-label"><i class="fa-solid fa-magnifying-glass"></i></span><input type="search" id="search-input" class="search-input form-control" tabindex="0" placeholder="Search" aria-label="Search" autocomplete="off">
                             </form>
                             <div id="search-results" class="search-results"></div>
                         </div>

diff --git a/_includes/unit-navigation.html b/_includes/unit-navigation.html
@@ -0,0 +1,32 @@
+{% assign sorted_units = site.lesson-plans | sort: "number" | where_exp: "page", "page.layout == 'unit'" %}
+{% assign plans = site.lesson-plans | where_exp: "page", "page.path contains '/topics/'" %}
+
+<div class="unit-navigation">
+    <h2 id="explore">Explore the lesson plans</h2>
+    <p>
+        With <strong>{{plans.size}}</strong> lesson plans available, explore how the FAIR Lesson Plan Handbook can support your FAIR data training goals.
+    </p>
+
+    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-4 g-4 contributor-cards mt-1 mb-4">
+        {% for unit in sorted_units %}
+        {% if unit.layout == "unit" %}
+        {% assign path_segments = unit.path | split: "/" %}
+        {% assign parent_folder = path_segments | slice: -2, 1 | join: "/" %}
+
+        {% assign topics_path = parent_folder | append: "/topics/" %}
+
+        {% assign topic_pages = plans | where_exp: "page", "page.path contains topics_path" %}
+        <div class="col">
+            <a href="{{ unit.url | relative_url }}" class="unit-card">
+                            <span class="unit-title">
+                                {{ unit.title }}
+                            </span>
+                <span class="unit-plan-count">
+                                {{ topic_pages.size }} lesson plan{% if topic_pages.size != 1 %}s{% endif %}
+                            </span>
+            </a>
+        </div>
+        {% endif %}
+        {% endfor %}
+    </div>
+</div>
diff --git a/_includes/unit-sidebar.html b/_includes/unit-sidebar.html
@@ -12,7 +12,7 @@
     {% assign currentUnit = page %}
 {% endif %}
 
-<aside id="sidebar">
+<aside id="sidebar" class="unit-sidebar">
     <button class="btn text-start d-lg-none hover-primary collapsed sidebar-collapse w-100 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#side-nav" aria-controls="side-nav" aria-expanded="true" aria-label="Toggle navigation">
         {{ page.sidebar | capitalize | replace: "_", " " }} Lesson plans <i title="navbar-toggler" class="fa-solid fa-bars ms-2"></i>
     </button>
@@ -32,18 +32,18 @@
                 {%- else %}
             <li>
                 {%- endif %}
-                <a class="btn hover-primary text-start d-block mb-1" href="{{unit.url | relative_url }}">{{ unit.title }}</a>
-            <ul class="list-unstyled">
-                {% for lesson_plan in topic_pages %}
-                {%- if page.url == lesson_plan.url %}
-                <li class="active">
-                    {%- else %}
-                <li>
-                    {%- endif %}
-                <a class="btn hover-primary text-start d-block mb-1" href="{{lesson_plan.url | relative_url }}">{{ lesson_plan.title }}</a>
-                </li>
-                {% endfor %}
-            </ul>
+                <a class="btn hover-primary text-start d-block" href="{{unit.url | relative_url }}">{{ unit.title }}</a>
+                <ul class="list-unstyled nav-subitems">
+                    {% for lesson_plan in topic_pages %}
+                    {%- if page.url == lesson_plan.url %}
+                    <li class="active">
+                        {%- else %}
+                    <li>
+                        {%- endif %}
+                    <a class="btn hover-primary text-start d-block" href="{{lesson_plan.url | relative_url }}">{{ lesson_plan.title }}</a>
+                    </li>
+                    {% endfor %}
+                </ul>
         </li>
         </ul>
         {% endfor %}

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -1,36 +1,34 @@
----
-layout: default
----
-{% assign sorted_units = site.lesson-plans | sort: "number" | where_exp: "page", "page.layout == 'unit'" %}
-{% assign plans = site.lesson-plans | where_exp: "page", "page.path contains '/topics/'" %}
+<!doctype html>
+<html lang="en">
+{% include head.html %}
+<body id="home" class="d-flex flex-column min-vh-100"{% unless page.toc == false %} data-bs-spy="scroll" data-bs-target="#toc-contents" data-bs-smooth-scroll="true" tabindex="0"{% endunless %}>
+{% if site.topnav_banner %}{% include banner.html %}{% endif %}
+{% if jekyll.environment == "development" and site.theme_variables.dev-info-banner == true %}{% include dev-info.html %}{% endif %}
+{% include topnav.html %}
 
-<div class="container">
-    {{content}}
-
-    <div class="unit-navigation">
-        <h2>{{plans.size}} lesson plans</h2>
-
-        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-4 g-4 contributor-cards mb-4">
-            {% for unit in sorted_units %}
-                {% if unit.layout == "unit" %}
-                    {% assign path_segments = unit.path | split: "/" %}
-                    {% assign parent_folder = path_segments | slice: -2, 1 | join: "/" %}
-
-                    {% assign topics_path = parent_folder | append: "/topics/" %}
-
-                    {% assign topic_pages = plans | where_exp: "page", "page.path contains topics_path" %}
-                    <div class="col">
-                        <a href="{{ unit.url | relative_url }}" class="unit-card">
-                            <span class="unit-title">
-                                {{ unit.title }}
-                            </span>
-                            <span class="unit-plan-count">
-                                {{ topic_pages.size }} lesson plan{% if topic_pages.size != 1 %}s{% endif %}
-                            </span>
-                        </a>
-                    </div>
-                {% endif %}
-            {% endfor %}
+<div class="visual">
+    <div class="container">
+        <div class="row gx-5 justify-content-between">
+            <div class="col col-12 col-md-6 mb-4">
+                <h1>
+                    {{ page.tagline }}
+                </h1>
+                <p>
+                    {{ page.description }}
+                </p>
+            </div>
+            <div class="col col-12 col-md-5">
+                <img src="{{ site.baseurl }}/assets/images/home-visual.svg" />
+            </div>
         </div>
     </div>
-</div>
+</div>
+<!-- Page Content -->
+<div class="container flex-grow-1">
+    {{content}}
+</div>
+{% include scroll-top.html %}
+{% include footer.html %}
+{% include cookie-popup.html %}
+</body>
+</html>
diff --git a/_layouts/lesson-plan.html b/_layouts/lesson-plan.html
@@ -8,7 +8,6 @@
 <div class="lesson-plan-header">
     {% unless page.content contains "<h1" %}
     <h1>
-        <span class="lesson-plan-number">{{ page.number }}</span>
         <span class="lesson-plan-title">{{ page.title | default: site.title }}</span>
     </h1>
     {% endunless %}

diff --git a/_layouts/unit.html b/_layouts/unit.html
@@ -13,7 +13,6 @@
     <div class="unit-header">
         {% unless page.content contains "<h1" %}
         <h1>
-            <span class="unit-number">{{ page.number }}</span>
             {{ page.title | default: site.title }}
         </h1>
         {% endunless %}
@@ -39,7 +38,6 @@ <h2>Lesson plans</h2>
 
             <div class="unit-lesson-plan">
                 <a href="{{ lesson_plan.url | relative_url  }}" class="unit-lesson-plan-header">
-                    <span class="unit-lesson-plan-number">{{ lesson_plan.number }}</span>
                     <span class="unit-lesson-plan-title">{{ lesson_plan.title }}</span>
                     <span class="unit-lesson-plan-icon">
                         {% include icons/arrow-forward.svg %}

diff --git a/_sass/_bootstrap_variables.scss b/_sass/_bootstrap_variables.scss
@@ -14,3 +14,5 @@ $navbar-dark-brand-color: white;
 $navbar-padding-y: 16px;
 
 $font-family-sans-serif: "Mona Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+
+$grid-gutter-width: 3.5rem;
diff --git a/_sass/lesson-plans.scss b/_sass/lesson-plans.scss
@@ -315,17 +315,13 @@ main#unit {
 }
 
 .unit-navigation {
-  margin: 30px 0;
-  border-top: 1px solid $light;
-  padding-top: 30px;
-
   h2 {
     margin-bottom: 15px;
   }
 
   .unit-card {
     padding: 15px;
-    background: #edf6fc;
+    background: #e9ecef;
     border-radius: 4px;
     text-decoration: none;
     display: flex;
@@ -400,12 +396,6 @@ main#unit {
   }
 }
 
-@media screen and (max-width: 768px) {
-  .unit-lesson-plan {
-    display: block;
-  }
-}
-
 footer {
   background: #000000de;
 
@@ -522,4 +512,103 @@ footer {
 
 .help-text {
   cursor: help;
+}
+
+#sidebar.unit-sidebar {
+  nav > ul > li.active {
+    & > a {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .nav-subitems {
+    //background: #f3f1f2;
+    border: 1px solid #f3f1f2;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+    padding: 10px;
+
+    li {
+      border-bottom: 1px solid #f3f1f2;
+      padding: 3px 0;
+
+      &:first-child {
+        padding-top: 0;
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+
+      a {
+        margin-left: 0;
+      }
+
+      &.active {
+        a {
+          background-color: #e9ecef!important;
+          color: $primary!important;
+        }
+      }
+    }
+  }
+}
+
+#home {
+  header .navbar {
+    margin-bottom: 0!important;
+  }
+}
+
+.visual {
+  background: #edf6fc;
+  padding: 50px 0;
+  margin-bottom: 50px;
+
+  h1 {
+    font-size: 32px;
+    line-height: 1.5;
+    color: $primary;
+    font-weight: 400;
+  }
+
+  p {
+     font-size: 15px;
+     color: $gray-600;
+   }
+}
+
+.search-nav-item {
+  display: flex;
+  align-items: center;
+
+  &:before {
+    content: "";
+    padding-left: 14px;
+    border-left: 1px solid rgba(255, 255, 255, 0.25);
+    height: 21px;
+  }
+
+  .search-input, .input-group-text {
+    background: #0f4062;
+    color: white;
+    border-color: #0f4062;
+  }
+
+  .search-input::placeholder {
+    color: rgba(255, 255, 255, 0.55);
+  }
+}
+
+
+@media screen and (max-width: 768px) {
+  .unit-lesson-plan {
+    display: block;
+  }
+  .search-nav-item {
+    display: block;
+
+    &:before {
+      display: none;
+    }
+  }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,5 @@ $navbar-dark-brand-color: white;
		$navbar-padding-y: 16px;

		$font-family-sans-serif: "Mona Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

		$grid-gutter-width: 3.5rem;