Mijke jetten patch 2

_data/levels.yaml

@@ -1,6 +1,9 @@
 beginner:
   title: Beginner
+  stars: 1
 intermediate:
   title: Intermediate
+  stars: 2
 expert:
   title: Expert
+  stars: 3

_includes/lesson-content/activities.html

@@ -1,57 +1,71 @@
 {% if include.activities %}
-<tr><th colspan="5">{{ include.title }}</th></tr>
-<tbody>
-{% for activity in include.activities %}
-<tr>
-    <td>
-        {% if activity.learning_outcome %}
-        <span class="learning-outcome" title="{{ page.learning_outcomes[activity.learning_outcome].outcome }}">
-          #{{ activity.learning_outcome }}
-        </span>
-        {% endif %}
-    </td>
-    <td>
-        <ul>
-            {% for activity in activity.activities %}
-            <li>{{ activity | markdownify }}</li>
-            {% endfor %}
-        </ul>
-    </td>
-    <td>
-        {{ activity.time}}
-    </td>
-    <td>
-        {{ activity.type}}
-    </td>
-    <td>
-        {% if activity.level %}
-        {% if activity.level == 'any' %}
-        <span class="lesson-plan-content-level-any">Any</span>
-        {% else %}
-        <span class="lesson-plan-content-level lesson-plan-content-level-{{ activity.level }}" title="{{ site.data.levels[activity.level].title }}">
-          <span class="icon material-symbols-outlined">
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"/></svg>
-          </span>
-          <span class="icon material-symbols-outlined">
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"/></svg>
-          </span>
-          <span class="icon material-symbols-outlined">
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"/></svg>
-          </span>
-        </span>
-        {% endif %}
-        {% endif %}
-    </td>
-    <td>
-        {% if activity.audience %}
-        {% if activity.audience == 'any' %}
-        <span class="lesson-plan-content-audience-any">Any</span>
-        {% else %}
-        {{ activity.audience }}
-        {% endif %}
-        {% endif %}
-    </td>
-</tr>
-{% endfor %}
-</tbody>
+{% assign icon_file = include.icon | prepend: 'icons/' | append: '.svg' %}
+
+<div class="activity-group">
+    <div class="activity-group-header">
+        <div class="activity-group-header-icon icon">
+            {% include {{ icon_file }} %}
+        </div>
+        <div class="activity-group-header-title">
+            {{ include.title }}
+        </div>
+    </div>
+    <div class="activity-group-activities">
+        {% for activity in include.activities %}
+            <div class="activity-item">
+                <div class="activity-info activity-learning-outcome">
+                    {% if activity.learning_outcome %}
+                    {% assign learning_outcome = page.learning_outcomes[activity.learning_outcome] %}
+                    {% assign associated_verb = learning_outcome.verbs | where: "level", activity.level | first %}
+                    {% assign tooltip = associated_verb.verb | append: " " | append: learning_outcome.outcome %}
+
+                    <span
+                        class="learning-outcome"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        data-bs-title="{{ tooltip }}"
+                    >
+                      {{ activity.learning_outcome }}
+                    </span>
+                    {% endif %}
+                </div>
+                <div class="activity-info activity-activity">
+                    {% for activity in activity.activities %}
+                    {{ activity | markdownify }}
+                    {% endfor %}
+                </div>
+                <div class="activity-info activity-time">
+                    {{ activity.time}}
+                </div>
+                <div class="activity-info activity-type">
+                    {{ activity.type}}
+                </div>
+                <div class="activity-info activity-level">
+                    {% if activity.level %}
+                    {% if activity.level == 'any' %}
+                    <div class="lesson-plan-content-level-any">Any</div>
+                    {% else %}
+                    <div
+                        class="lesson-plan-content-level lesson-plan-content-level-{{ activity.level }}"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        data-bs-title="{{ site.data.levels[activity.level].title }}"
+                    >
+                      <span class="icon material-symbols-outlined">
+                        {% include icons/star.svg %}
+                      </span>
+                      <span class="icon material-symbols-outlined">
+                        {% include icons/star.svg %}
+                      </span>
+                      <span class="icon material-symbols-outlined">
+                        {% include icons/star.svg %}
+                      </span>
+                    </div>
+                    {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
 {% endif %}

_includes/lesson-content/additional-resources.html

@@ -0,0 +1,49 @@
+{% if page.additionalResources %}
+<div class="lesson-plan-block">
+    <h2 id="additional-resources">Additional resources</h2>
+    <div class="reference-list">
+        <ul>
+            {% for additionalResource in page.additionalResources %}
+            <li>
+                <span class="reference-title">
+                    {% if additionalResource.url %}
+                        <a href="{{ additionalResource.url }}" target="_blank">
+                    {% endif %}
+
+                    {{ additionalResource.title }}
+
+                    {% if additionalResource.url %}
+                        <span class="icon material-symbols-outlined">arrow_outward</span>
+                        </a>
+                    {% endif %}
+                </span>
+
+                {% if additionalResource.author %}
+                <span class="reference-author">{{ additionalResource.author }}</span>
+                {% endif %}
+
+                <span class="reference-source">
+                    <span class="reference-details">
+                        {% if additionalResource.journal %}
+                            {{ additionalResource.journal }}
+                        {% endif %}
+                        {% if additionalResource.volume %}
+                            {{ additionalResource.volume }}
+                        {% endif %}
+                        {% if additionalResource.number %}
+                            ({{ additionalResource.number }})
+                        {% endif %}
+                        {% if additionalResource.pages %}
+                            : {{ additionalResource.pages }}
+                        {% endif %}
+                        {% if additionalResource.year %}
+                            ({{ additionalResource.year }})
+                        {% endif %}
+                    </span>
+                </span>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+{% endif %}

_includes/lesson-content/contributor.html

@@ -0,0 +1,19 @@
+{% assign contributor = site.data.contributors | find: "id", include.id %}
+
+<div class="contributor">
+    <div class="contributor-image">
+        {% if contributor.image %}
+        <img src="{{ site.baseurl }}/{{ contributor.image }}" alt="{{ contributor.firstName }} {{ contributor.lastName }}" />
+        {% elsif contributor.git %}
+        <img src="https://avatars.githubusercontent.com/{{ contributor.git }}" alt="{{ contributor.firstName }} {{ contributor.lastName }}" />
+        {% else %}
+        <img src="https://ui-avatars.com/api/?name={{ contributor.firstName }} {{ contributor.lastName }}" alt="{{ contributor.firstName }} {{ contributor.lastName }}" />
+        {% endif %}
+    </div>
+    {{ contributor.firstName }} {{ contributor.lastName }}
+    {% if contributor.orcid %}
+    <a href="https://orcid.org/{{ contributor.orcid }}" target="_blank" class="contributor-orcid">
+        <img alt="ORCID logo" src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png" width="16" height="16" />
+    </a>
+    {% endif %}
+</div>

_includes/lesson-content/learning-outcome-verb.html

@@ -0,0 +1,18 @@
+{% assign verb = include.verbs[include.verb] %}
+{% assign star_count = site.data.levels[verb.level].stars | plus: 0 %}
+
+<span
+    class="learning-outcome-verb"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    data-bs-title="{{ site.data.levels[verb.level].title }}"
+>
+    <span class="learning-outcome-verb-word">
+        {{ verb.verb }}
+    </span>
+    <span class="learning-outcome-verb-stars">
+        {% for i in (1..star_count) %}
+            {% include icons/star.svg %}
+        {% endfor %}
+    </span>
+</span>

_includes/lesson-content/lesson-content.html

@@ -0,0 +1,31 @@
+{% if page.activities %}
+<div class="lesson-plan-block">
+    <h2 id="lesson-content">Lesson content</h2>
+    <div class="activities">
+        <div class="activity-header">
+            <div class="activity-header-item activity-learning-outcome">
+                <span class="help-text" data-bs-toggle="tooltip" data-bs-title="Learning outcome">
+                    LO
+                </span>
+            </div>
+            <div class="activity-header-item activity-activity">
+                Activity
+            </div>
+            <div class="activity-header-item activity-time">
+                Time
+            </div>
+            <div class="activity-header-item activity-type">
+                Type
+            </div>
+            <div class="activity-header-item activity-level">
+                Level
+            </div>
+        </div>
+        <div class="activity-content">
+            {% include lesson-content/activities.html icon="history" title="Before the lesson" activities=page.activities.before %}
+            {% include lesson-content/activities.html icon="schedule" title="During the lesson" activities=page.activities.during %}
+            {% include lesson-content/activities.html icon="update" title="After the lesson" activities=page.activities.after %}
+        </div>
+    </div>
+</div>
+{% endif %}

_includes/unit-sidebar.html

@@ -14,7 +14,7 @@
 
 <aside id="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: "_", " " }} menu <i title="navbar-toggler" class="fa-solid fa-bars ms-2"></i>
+        {{ page.sidebar | capitalize | replace: "_", " " }} Lesson plans <i title="navbar-toggler" class="fa-solid fa-bars ms-2"></i>
     </button>
     <nav class="collapse" id="side-nav" aria-label="Side navigation">
         {% for unit in sorted_units %}