Switch to using summary/details for sections

* This makes them foldable
* Probably some code from other changes in here too
This commit is contained in:
Rioting Pacifist 2020-03-10 15:44:28 +00:00
parent f6e23db94f
commit d1cb8b62f3
10 changed files with 93 additions and 57 deletions

View File

@ -1,13 +1,17 @@
{{#if r.info.brief}}
<div id="about" class="detail">
<div class="icon"><i class="fs-lg fa fa-user" aria-hidden="true"></i><span class="mobile-title">About</span></div>
<details id="about" class="detail" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-user" aria-hidden="true"></i><span class="mobile-title">About</span></div>
<div class="info">
<h4 class="title text-uppercase">About</h4>
</div>
</summary>
<div class="info">
<h4 class="title text-uppercase">About</h4>
<div class="card card-nested">
<div itemprop="description" class="content mop-wrapper">
<p>{{{r.info.brief}}}</p>
</div>
</div>
</div>
</div>
</details>
{{/if}}

View File

@ -1,8 +1,12 @@
{{#if r.education}}
<div id="education" class="detail">
<div class="icon"><i class="fs-lg fa fa-graduation-cap"></i><span class="mobile-title">Education</span></div>
<details id="education" class="detail" onclick="clear_highlight()" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-graduation-cap"></i><span class="mobile-title">Education</span></div>
<div class="info">
<h4 class="title text-uppercase">Education</h4>
</div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Education</h4>
<div class="content">
<ul class="list-unstyled">
{{#each r.education.history}}
@ -19,8 +23,8 @@
</div>
</li>
{{/each}}
</ul>
</div>
</ul>
</div>
</div>
</details>
{{/if}}

View File

@ -1,8 +1,12 @@
{{#if r.employment}}
<div id="work-experience" class="detail">
<div class="icon"><i class="fs-lg fa fa-building"></i><span class="mobile-title">Work Experience</span></div>
<details id="work-experience" class="detail" onclick="clear_highlight()" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-building"></i><span class="mobile-title">Work Experience</span></div>
<div class="info">
<h4 class="title text-uppercase">Work Experience</h4>
</div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Work Experience</h4>
<p>{{{r.employment.summary}}}</p>
<ul class="list-unstyled">
{{#each r.employment.history}}
@ -17,5 +21,5 @@
{{/each}}
</ul>
</div>
</div>
</details>
{{/if}}

View File

@ -1,8 +1,12 @@
{{#if r.interests}}
<div id="interests" class="detail">
<div class="icon"><i class="fs-lg fa fa-heart"></i><span class="mobile-title">Interests</span></div>
<details id="interests" class="detail" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-heart"></i><span class="mobile-title">Interests</span></div>
<div class="info">
<h4 class="title text-uppercase">Interests</h4>
</div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Interests</h4>
<div class="content">
<ul class="list-unstyled">
{{#each r.interests}}
@ -19,5 +23,5 @@
</ul>
</div>
</div>
</div>
</details>
{{/if}}

View File

@ -1,17 +1,21 @@
{{#if r.projects}}
<div id="projects" class="detail">
<div class="icon"><i class="fs-lg fa fa-star"></i><span class="mobile-title">Projects</span></div>
<div id="projects" class="detail" onclick="clear_highlight()" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-star"></i><span class="mobile-title">Projects</span></div>
<div class="info"><h4 class="title text-uppercase">Projects</h4></div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Projects</h4>
<ul class="list-unstyled">
{{#each r.projects}}
<li class="card card-nested clearfix">
<div class="content">
<p class="clear-margin relative"><strong>{{role}}</strong>,&nbsp;<a href="{{url}}" target="_blank">{{title}}</a></p>
{{> date}}
{{{summary}}}
<details class="content" tags="{{#each keywords}}{{this}} {{/each}}{{#each technologies}}{{this}} {{/each}}">
<summary>
<p class="clear-margin relative"><strong>{{role}}</strong>,&nbsp;<a href="{{url}}" target="_blank">{{title}}</a></p>
{{> date}}
{{{summary}}}
</summary>
{{> highlights}}
</div>
</details>
</li>
{{/each}}
</ul>

View File

@ -1,8 +1,10 @@
{{#if r.recognition}}
<div id="awards" class="detail">
<div class="icon"><i class="fs-lg fa fa-trophy"></i><span class="mobile-title">Awards</span></div>
<details id="awards" class="detail" onclick="clear_highlight()" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-trophy"></i><span class="mobile-title">Awards</span></div>
<div class="info"><h4 class="title text-uppercase">Awards</h4></div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Awards</h4>
<div class="content">
<ul class="list-unstyled clear-margin">
{{#each r.recognition}}
@ -19,5 +21,5 @@
</ul>
</div>
</div>
</div>
</details>
{{/if}}

View File

@ -1,8 +1,10 @@
{{#if r.references}}
<div id="references" class="detail">
<details id="references" class="detail" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-thumbs-up"></i><span class="mobile-title">References</span></div>
<div class="info"><h4 class="title text-uppercase">References</h4>
</summary>
<div class="info">
<h4 class="title text-uppercase">References</h4>
<div class="content">
<ul class="list-unstyled clear-margin">
{{#each r.references}}
@ -19,5 +21,5 @@
</ul>
</div>
</div>
</div>
</etails>
{{/if}}

View File

@ -1,36 +1,27 @@
<div id="skills" class="detail">
<div class="icon"><i class="fs-lg fa fa-cogs"></i><span class="mobile-title">Skills</span></div>
<details id="skills" class="detail" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-cogs"></i><span class="mobile-title">Skills</span></div>
<div class="info">
<h4 class="title text-uppercase">Skills</h4>
</div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Skills</h4>
<div class="content">
<ul class="list-unstyled">
{{#each r.skills.sets}}
<li class="card card-nested card-skills">
<div rel="tooltip" title="{{level}}" data-placement="left" class="skill-level">
<div class="skill-progress {{toLower level}}"></div>
</div>
<div class="skill-info"><strong>{{name}}</strong>
<div class="skill-info"><strong>{{name}} ({{level}})</strong>
<div class="space-top labels">
{{#each skills}}
<span class="label label-keyword">{{this}}</span>
<span rel="tooltip" title="{{summary}}" class="btn label label-keyword" skill="{{name}}" onclick="show_keyword('{{name}}')">
{{name}} ({{level}})
</span>
{{/each}}
</div>
</div>
</li>
{{/each}}
{{#each r.skills.list}}
<li class="card card-nested card-skills">
<div rel="tooltip" title="{{level}}" data-placement="left" class="skill-level">
<div class="skill-progress {{toLower level}}"></div>
</div>
<div class="skill-info"><strong>{{name}} ({{years}} years)</strong>
<div class="space-top">
<p>{{summary}}</p>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</details>

View File

@ -703,4 +703,23 @@ body {
page-break-before: always;
}
}
details > summary {
display: list-item;
counter-increment: list-item 0;
list-style: disclosure-closed inside;
}
details[open] > summary {
list-style: disclosure-open inside;
}
summary.empty, details[open] > summary.empty {
list-style: disc inside;
}
details.detail > summary {
list-style: none;
}
</style>

View File

@ -1,8 +1,10 @@
{{#if r.service}}
<div id="volunteer-work" class="detail">
<div class="icon"><i class="fs-lg fa fa-child"></i><span class="mobile-title">Volunteer Work</span></div>
<details id="volunteer-work" class="detail" onclick="clear_highlight()" open>
<summary>
<div class="icon"><i class="fs-lg fa fa-child"></i><span class="mobile-title">Volunteer Work</span></div>
<div class="info"><h4 class="title text-uppercase">Volunteer Work</h4></div>
</summary>
<div class="info">
<h4 class="title text-uppercase">Volunteer Work</h4>
<div class="content">
<ul class="list-unstyled">
{{#each r.service.history}}
@ -18,5 +20,5 @@
</ul>
</div>
</div>
</div>
</details>
{{/if}}