Eiche fam

Updated button styles

When I wrote Cover, there was just one button style: solid. By default, buttons would have a gray background, but I built in support for adding a “default” class so that the button’s color would be whatever you set in the Customizer.

When I rewrote the button styles for Cover2, I changed the button style to a ghost button — no background, just an outline. I have decided that, as a default style, that’s not really desirable. (UX studies have shown that call-to-actions without obvious clickability (it is too a word) often get ignored. So I’ve decided to change things back.

Taking inspiration from Bootstrap, I have also included an outlined alternative.

<button>Normal</button>
<button class="ghost">Outline</button>
<button class="default">Colored</button>
<button class="default ghost">Colored outline</button>

You can also do the same thing to links by including the class button.

<a class="button" href="#">Normal</a>
<a class="button ghost" href="#">Outline</a>
<a class="button default" href="#">Colored</a>
<a class="button default ghost" href="#">Colored outline</a>

Updated Instant Search template

I use Algolia to power this website’s search (the free tier, because enterprise-level SaaS pricing is way out of reach for a family blog). Because I do, I built templates into Cover2 to support both Autocomplete (suggestions that pop up when you type) and Instant Search (replacement search result page) templates.

Up until this release, the Instant Search template was a single column, just like the rest of Cover2’s layout. I was hiding functionality that Algolia offers: the ability to filter down results by category, tag, or author. (The template can also allow for filtering by post type, but I’ve chosen to hide that.)

Desktop or tablet users will now see a sidebar to the left of the search results. Each filter section has a heading and clickable content. The category and author sections are typically exclusive in nature, although it is possible for a post to belong to multiple categories. The tag section’s items, instead of appearing as links, each have a checkbox. Clicking anything in the search filter sidebar will update the results on the fly.

Phone users, because of the screen size, won’t see a sidebar. Instead a filter icon will appear in the navbar (to the left of the search icon). Clicking that will open an overlay, from which any of the search filters can be toggled.

This also gave me a reason to use another interactive icon by Nucleo. A while back, I completely overhauled Cover2’s icons, replacing Font Awesome with Nucleo icons. Best. Purchase. Ever.

The post count labels’ and the checkboxes’ color, like the colored buttons, is derived from the accent color picked in the Customizer. I borrowed from Bootstrap here too, in order to get the custom checkboxes working (without JavaScript, I might add).

To Algolia developers’ credit, the template is very customizable. However, the markup for the template’s widgets — categories, tags, authors, paging — are built inside the plugin. They, too, can be overridden, provided you know the syntax. This is the default markup for a single checkbox item:

<div class="ais-refinement-list--item">
  <div>
    <label class="ais-refinement-list--label">
      <input class="ais-refinement-list--checkbox" value="wheelchair" type="checkbox">
      wheelchair
      <span class="ais-refinement-list--count">212</span>
    </label>
  </div>
</div>

This markup is fine, as long as we want to leave the checkbox alone. But I don’t. I need the checkbox element to come before the label, so I can create a custom element using the label’s :before and :after pseduo-elements and use the input’s checked state.

I ended up digging into the source code of the plugin (hurray for open source!) and rearranged the markup how I wanted (in the template, not the plugin, so I won’t lose it next time the plugin gets updated):

<div class="ais-refinement-list--item">
  <div>
    <input class="ais-refinement-list--checkbox" value="wheelchair" type="checkbox">
    <label class="ais-refinement-list--label">
      wheelchair
      <span class="ais-refinement-list--count">212</span>
    </label>
  </div>
</div>

To accommodate this new markup, I have this CSS:

// This hides the actual checkbox
.ais-refinement-list--checkbox {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

// This makes some room to the left of the label
.ais-refinement-list--label {
    display: block;
    padding-left: 30px;
    position: relative;
}

// This makes an empty gray box
.ais-refinement-list--label::before {
    height: 1rem;
    top: 8px;
    top: 0.5rem;
    width: 1rem;
    background-color: #ddd;
    border-radius: 3px;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    user-select: none;
}

// This is an invisible placeholder for the checkmark
.ais-refinement-list--label::after {
    height: 16px;
    height: 1rem;
    top: 8px;
    top: 0.5rem;
    width: 16px;
    width: 1rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    content: "";
    display: block;
    left: 0;
    position: absolute;
}

// This changes the color of the gray checkbox when the real checkbox is checked
.ais-refinement-list--checkbox:checked ~ .ais-refinement-list--label::before {
    background-color: #2196f3;
}

// This puts a checkmark image (in SVG form) overlaid on top of the colored box
.ais-refinement-list--checkbox:checked ~ .ais-refinement-list--label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

The result is a nice set of checkboxes that fit into the theme’s design.

I considered using Nucleo’s interactive checkbox icon for this, but that seemed like overkill to me, as far as JavaScript is concerned. Besides, I don’t know what it would take to get the checkboxes to play nice with the Customizer-defined accent color.

Bug fixes

Of course, no update is complete without a bug fix here or there.

I admit I don’t check Internet Explorer as much as I probably should, but when I did, this is what I saw:

The reason, I soon found, was because I’m using an SVG as the logo image. Internet Explorer doesn’t auto-scale SVGs well, so this CSS was causing the image to stretch out:

height: auto;
max-width: 100%;
max-height: 55px; // This is the culprit

I added a style which targets IE that fixes the size:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  height: 55px;
}

This is an imperfect solution, since it sets a static height instead of allowing natural size with a maximum height, but I’m not too upset about it. IE doesn’t have the greatest support for SVG anyway.