Aug 06 2016 0

Revising the archives page

The last time I have updated the design (somewhere in September 2015) for the Archives page I added some jQuery code so you could expand/collapse months in an attempt to keep the page (height wise) fairly small.

But ever since I saw the following tweet I had the feeling I should revisit the coding of the Archives page

On the linked GitHub repo is a demo available for Accordion/Toggle’ which is very similar to what I had implemented for the Archives page.

It took me some time to figure out how it actually worked, but finally felt comfortable enough to give it a try. Since I didn’t know how much time and effort it would take to get it right I created a project using Coda for easy offline editting and testing. This made it easier to try out different things without the need to constantly wait for Dropbox to sync over all my changes.

HTML (archives.html)

The following old code 12

{{#months}}
<h2 class="archive">{{month}} {{year}} <span title="Click to hide/show posts" class="count" id="{{month}}{{year}}">({{entries.length}} posts)</span></h2>
<div class="archive" id="{{month}}{{year}}">
{{#entries}}
    <span class="archive">{{#formatDate}}DD{{/formatDate}}:</span> <a class="archive" href="{{url}}">{{title}}</a><br />
{{/entries}}
</div>
{{/months}}

has been replaced with the following code 12

{{#months}}
<div class="month">
    <h2 class="archive">{{month}} {{year}} <label for="{{month}}{{year}}" title="Click to hide/show posts">({{entries.length}} posts)</label></h2>
    <input class="opener" type="checkbox" id="{{month}}{{year}}"/>
    <div class="entries">
    {{#entries}}
        <span class="archive">{{#formatDate}}DD{{/formatDate}}:</span> <a class="archive" href="{{url}}">{{title}}</a><br />
    {{/entries}}
    </div>
</div>
{{/months}}

CSS

As before the following piece of CSS ensures that when loading the page only the three most recent months are expanded to show the list of articles for those months as well as regular CSS for styling the elements 638

/* Styling for the archive page */
h2.archive {
  margin-bottom: 0px;
  margin-top: 20px;
  font-variant: small-caps;
}

a.archive {
  font-size: medium;
}

label {
  font-size: smaller;
  font-weight: bold;
  font-variant: normal;
  cursor: pointer;
  border-bottom: 1px dotted blue;
}

span.archive {
  font-size: medium;
  font-weight: bold;
  margin-left: 20px;
}

/* Hide the checkboxes */
.opener { display:none; }

/* First three months */
.month:nth-child(-n+3) .entries { display:block; }
.month:nth-child(-n+3) .opener:checked ~ .entries { display:none; }

/* All except the first three months */
.month:nth-child(1n+4) .entries { display:none; }
.month:nth-child(1n+4) .opener:checked ~ .entries { display:block; }

Thanks a lot to David for helping out with the proper CSS.

jQuery

The following jQuery code has been removed from the template archives.html 26

<script>
$('span.count').click(function() {
  var id = $(this).prop('id');
  $( 'div#'+id ).toggle();
});
</script>

Previous post
Apps for July 2016 Eobot Eobot Inc Version 2.0 Very useful application if your are making use of the services of Eobot. With this application you can
Next post
Revising method for adding drop shadows After removing the jQuery code for the archives page I reviewed the code I have been adding to the script in order to determine if even more code
This blog is powered by Blot