FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

allow customization of number of items to show in "taken courses" when before collapsing

Browse source
This commit is contained in:
Fabio Fenoglio 2021-12-07 09:11:45 +01:00
parent 68f45f6b81
commit d05153411a
3 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
layouts/partials/sections/education-alt.html
View file

@ -53,6 +53,7 @@
</div>
{{ end }}
{{ if .takenCourses }}
{{ $showFirst := .takenCourses.showFirst | default 2 }}
<div class="taken-courses">
<h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
{{ if .takenCourses.showGrades }}
@ -65,7 +66,7 @@
</thead>
<tbody>
{{ range $index,$course := .takenCourses.courses }}
<tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
<tr class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">
<td>{{ $course.name }}</td>
{{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }}
<td>{{ $course.achieved }}</td>
@ -76,11 +77,11 @@
{{ else }}
<ul>
{{ range $index,$course := .takenCourses.courses }}
<li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
<li class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">{{ $course.name }}</li>
{{ end }}
</ul>
{{ end }}
{{ if gt (len .takenCourses.courses) 2 }}
{{ if gt (len .takenCourses.courses) $showFirst }}
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
onclick="toggleCourseVisibility(this);" id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
<button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"

7
layouts/partials/sections/education.html
View file

@ -54,6 +54,7 @@
</div>
{{ end }}
{{ if .takenCourses }}
{{ $showFirst := .takenCourses.showFirst | default 2 }}
<div class="taken-courses">
<h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
{{ if .takenCourses.showGrades }}
@ -66,7 +67,7 @@
</thead>
<tbody>
{{ range $index,$course := .takenCourses.courses }}
<tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
<tr class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">
<td>{{ $course.name }}</td>
{{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }}
<td>{{ $course.achieved }}</td>
@ -77,11 +78,11 @@
{{ else }}
<ul>
{{ range $index,$course := .takenCourses.courses }}
<li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
<li class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">{{ $course.name }}</li>
{{ end }}
</ul>
{{ end }}
{{ if gt (len .takenCourses.courses ) 2 }}
{{ if gt (len .takenCourses.courses ) $showFirst }}
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
onclick="toggleCourseVisibility(this);" id="show-more-btn">{{ i18n "show_more"}}</button>
<button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"

11
static/js/main.js
View file

@ -158,15 +158,16 @@ function toggleCourseVisibility(elem) {
}
// toggle hidden-course class from the third elements
for (var i = 0; i < courses.length; i++) {
if (i > 1 && courses[i].classList !== null) {
courses[i].classList.toggle("hidden-course");
for (const course of courses) {
if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
course.classList.toggle("hidden-course");
course.classList.add("toggled-hidden-course");
}
}
// toggle the buttons visibility
let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
for (var i = 0; i < buttonsToToggle.length; i++) {
buttonsToToggle[i].classList.toggle("hidden");
for (const buttonToToggle of buttonsToToggle) {
buttonToToggle.classList.toggle("hidden");
}
}