tfwright/live_admin

Add classes based on name of field/embed for CSS targeting

Rio517 opened this issue · 1 comments

Rio517 commented

Is your feature request related to a problem? Please describe.

I'd like to be able to target certain fields with custom CSS

Describe the solution you'd like

Append class names to the div.field__group and to the wrapper div to support better CSS targeting. Class names below are just for illustration purposes.

<div class="field__group field_<FIELD_NAME>">
  <label class="field__label" for="params_<FIELD_NAME>">Field Name</label>
  <textarea class="field__text" id="params_<FIELD_NAME>" name="params[<FIELD_NAME>]" rows="1">ut!</textarea>
</div>

And to embeddable types, add <embeddable_type> and <button__wrapper> and <embed__group__wrapper>:

<div class="embed__wrapper .embed_<embeddable_type>">
  <h2 class="embed__title">Field Name</h2>
  <div class="embed__group">
      <div class="embed__item">
        <div class="button__wrapper"></div>
        <div class="embed__group__wrapper"></div>
      </div>
  </div>
</div>

This would then allow css like:

.embed__wrapper .embed_<embeddable_type> .embed__item .embed_group_wrapper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

Describe alternatives you've considered
Using CSS like the following would be super brittle

.div:nth-child(n) .embed_group .embed_item div:last-child {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}
tfwright commented

Sounds like a good idea to me! I'm in the middle of a fairly complex refactor of the config API right now, so it might take me a while to get to this. If you want to take a crack at it in the meantime, that'd be great. For regular schema fields I think the only place that would need to be changed is here and embeds here There might be other places I can't think off the top of my head, but those would probably be refactoring opportunities for the form render logic. If you decide to draft a PR and run into issues feel free to ping me.

  • 👍1