mirror of
https://github.com/JuanCanham/fresh-theme-elegant.git
synced 2024-11-23 16:40:10 +00:00
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:
parent
f6e23db94f
commit
d1cb8b62f3
@ -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}}
|
||||
|
@ -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}}
|
||||
|
@ -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}}
|
||||
|
@ -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}}
|
||||
|
@ -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>, <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>, <a href="{{url}}" target="_blank">{{title}}</a></p>
|
||||
{{> date}}
|
||||
{{{summary}}}
|
||||
</summary>
|
||||
{{> highlights}}
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
@ -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}}
|
||||
|
@ -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}}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}}
|
||||
|
Loading…
Reference in New Issue
Block a user