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

Fixed "show-more-btn" toggle logic and added optional "collapseAfter" parameter (#473)

Browse source 
* fixed "show-more-btn" toggle logic

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

* renamed treshold param to collapseAfter

Co-authored-by: Fabio Fenoglio <fabio.fenoglio@eng.it>
This commit is contained in:
Fabio Fenoglio 2021-12-07 18:40:34 +01:00 • committed by GitHub
parent fea093c187
commit e3c84e0ba1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 16 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> </div>
{{ end }} {{ end }}
{{ if .takenCourses }} {{ if .takenCourses }}
{{ $collapseAfter := .takenCourses.collapseAfter | default 2 }}
<div class="taken-courses"> <div class="taken-courses">
<h6 class="text-muted">{{ i18n "taken_courses" }}</h6> <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
{{ if .takenCourses.showGrades }} {{ if .takenCourses.showGrades }}
@ -65,7 +66,7 @@
</thead> </thead>
<tbody> <tbody>
{{ range $index,$course := .takenCourses.courses }} {{ range $index,$course := .takenCourses.courses }}
<tr class="course {{ if gt $index 1 }}hidden-course{{ end}}"> <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">
<td>{{ $course.name }}</td> <td>{{ $course.name }}</td>
{{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }} {{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }}
<td>{{ $course.achieved }}</td> <td>{{ $course.achieved }}</td>
@ -76,11 +77,11 @@
{{ else }} {{ else }}
<ul> <ul>
{{ range $index,$course := .takenCourses.courses }} {{ range $index,$course := .takenCourses.courses }}
<li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li> <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}
{{ if gt (len .takenCourses.courses) 2 }} {{ if gt (len .takenCourses.courses) $collapseAfter }}
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" <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> 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 }}" <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> </div>
{{ end }} {{ end }}
{{ if .takenCourses }} {{ if .takenCourses }}
{{ $collapseAfter := .takenCourses.collapseAfter | default 2 }}
<div class="taken-courses"> <div class="taken-courses">
<h6 class="text-muted">{{ i18n "taken_courses"}}</h6> <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
{{ if .takenCourses.showGrades }} {{ if .takenCourses.showGrades }}
@ -66,7 +67,7 @@
</thead> </thead>
<tbody> <tbody>
{{ range $index,$course := .takenCourses.courses }} {{ range $index,$course := .takenCourses.courses }}
<tr class="course {{ if gt $index 1 }}hidden-course{{ end}}"> <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">
<td>{{ $course.name }}</td> <td>{{ $course.name }}</td>
{{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }} {{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }}
<td>{{ $course.achieved }}</td> <td>{{ $course.achieved }}</td>
@ -77,11 +78,11 @@
{{ else }} {{ else }}
<ul> <ul>
{{ range $index,$course := .takenCourses.courses }} {{ range $index,$course := .takenCourses.courses }}
<li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li> <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}
{{ if gt (len .takenCourses.courses ) 2 }} {{ if gt (len .takenCourses.courses ) $collapseAfter }}
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" <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> 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 }}" <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"

18
static/js/main.js
View file

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