Switch to using summary/details for sections

* This makes them foldable
* Probably some code from other changes in here too

src/partials/about.html

@@ -1,13 +1,17 @@
 {{#if r.info.brief}}
-<div id="about" class="detail">
+<details id="about" class="detail" open>
-    <div class="icon"><i class="fs-lg fa fa-user" aria-hidden="true"></i><span class="mobile-title">About</span></div>
+    <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}}

src/partials/education.html

@@ -1,8 +1,12 @@
 {{#if r.education}}
-<div id="education" class="detail">
+<details id="education" class="detail" onclick="clear_highlight()" open>
-  <div class="icon"><i class="fs-lg fa fa-graduation-cap"></i><span class="mobile-title">Education</span></div>
+  <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>
+      </ul>
-      </div>
     </div>
   </div>
+</details>
 {{/if}}

src/partials/experience.html

@@ -1,8 +1,12 @@
 {{#if r.employment}}
-<div id="work-experience" class="detail">
+<details id="work-experience" class="detail" onclick="clear_highlight()" open>
-  <div class="icon"><i class="fs-lg fa fa-building"></i><span class="mobile-title">Work Experience</span></div>
+  <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}}

src/partials/interests.html

@@ -1,8 +1,12 @@
 {{#if r.interests}}
-<div id="interests" class="detail">
+<details id="interests" class="detail" open>
-  <div class="icon"><i class="fs-lg fa fa-heart"></i><span class="mobile-title">Interests</span></div>
+  <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}}

src/partials/projects.html

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

src/partials/recognition.html

@@ -1,8 +1,10 @@
 {{#if r.recognition}}
-<div id="awards" class="detail">
+<details id="awards" class="detail" onclick="clear_highlight()" open>
-  <div class="icon"><i class="fs-lg fa fa-trophy"></i><span class="mobile-title">Awards</span></div>
+  <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}}

src/partials/references.html

@@ -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}}

src/partials/skills.html

@@ -1,36 +1,27 @@
-<div id="skills" class="detail">
+<details id="skills" class="detail" open>
-  <div class="icon"><i class="fs-lg fa fa-cogs"></i><span class="mobile-title">Skills</span></div>
+  <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-info"><strong>{{name}} ({{level}})</strong>
-            <div class="skill-progress {{toLower level}}"></div>
-          </div>
-          <div class="skill-info"><strong>{{name}}</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>

src/partials/style.html

@@ -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>

src/partials/volunteer.html

@@ -1,8 +1,10 @@
 {{#if r.service}}
-<div id="volunteer-work" class="detail">
+<details id="volunteer-work" class="detail" onclick="clear_highlight()" open>
-  <div class="icon"><i class="fs-lg fa fa-child"></i><span class="mobile-title">Volunteer Work</span></div>
+  <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}}