Disabling checkboxes

[kukimik]

Hi! I've noticed that the checkboxes in the task lists created using [ ] and [x] (e.g. https://note.ema.srid.ca/demo/markdown#task-lists) are enabled by default. Is it possible to render them disabled? I want do document which items are already done and which are not. This should be updated by modifying the site sources. In this context clickable checkboxes do not make much sense. (They are also not a big problem; nobody forces the users to click them. 😉 However, it's kind of weird.)

I believe this is defined in https://github.com/srid/emanote/blob/master/default/templates/components/pandoc.tpl. Can I somehow override the default behaviour?

[kukimik]

I've found it here: #116 (comment) . I can override the pandoc.tpl template. It works.

Is there a way to override just this particular case, and use the default pandoc.tpl for all the other stuff? (I guess not, but it doesn't hurt to ask...)

[kukimik]

Hm... another option is to add a js script in the hooks that would disable the checkboxes. But that's also not fully satisfying.

[srid]

What's the change you made to your pandoc.tpl to disable the checkboxes? I'm happy to add it to the default layer. Or you can open a PR (with a screenshot of the result).

[srid]

As for,

Is there a way to override just this particular case

I suppose we can split pandoc.tpl into individual files - one for each inline/block type.

[kukimik]

What's the change you made to your pandoc.tpl to disable the checkboxes? I'm happy to add it to the default layer. Or you can open a PR (with a screenshot of the result).

I actually only included the disabled attribute to see if it works.

Show code

  <Task:Checked>
    <!-- FIXME: Fix list styling to use flexbox, so task lists don't botch them up -->
    <label class="inline-flex items-start space-x-2">
      <input disabled checked type="checkbox"
        class="flex-shrink-0 w-5 h-5 checked:bg-${theme}-600 checked:border-transparent">
      <span>
        <inlines />
      </span>
    </label>
  </Task:Checked>
  <Task:Unchecked>
    <label class="inline-flex items-start space-x-2">
      <input disabled type="checkbox" class="flex-shrink-0 w-5 h-5">
      <span>
        <inlines />
      </span>
    </label>
  </Task:Unchecked>

But this also changes the appearance of the checkboxes, they're less opaque:

vs

This should be handled by CSS somehow, but I'm not sure how to do this.

---

I suppose we can split pandoc.tpl into individual files - one for each inline/block type.

I believe this could be useful.