ClayCards clickable area

[carloslancha]

As lexicon defines on a selectable Card (with checkbox), this can be checked only by clicking on the checkbox itself and on the image area. Right now if you click in the bottom text area checkbox is checked too, and that shouldn't happen.

https://docs.google.com/document/d/1st2moaRVphrsFrDJUz-ic26aH-V46YkQam75X6BHPY0/edit#heading=h.ujczacaa6gt0

[pat270]

This can already be done. You just need to move the .custom-control, label, .custom-control-input, and .custom-control-indicator inside .aspect-ratio.

<div class="aspect-ratio bg-checkered card-item-first">
    <div class="custom-control custom-checkbox">
        <label>
	    <input class="custom-control-input" type="checkbox">
	    <span class="custom-control-indicator"></span>
	    <img class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="">
	    <span class="sticker sticker-bottom-left sticker-danger">JPG</span>
        </label>
    </div>
</div>

[carloslancha]

Hey @pat270 with that markup (if I've done it correctly) we have some issues:

• On hover only bottom part gets highlighted
  

• On svg files (for example) if you click out of the svg (on the checkered background) interaction with checkbox doesn't happen.
  

• On cards without image interaction with checkbox can only be done by clicking directly on the checkbox.
  

[pat270]

This is the markup I tested on beta.2 - beta.4:

<div class="card-type-asset form-check form-check-card form-check-top-left">
	<div class="card">
		<div class="aspect-ratio bg-checkered card-item-first">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox">
					<span class="custom-control-indicator"></span>
					<img alt="thumbnail"class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="../../images/thumbnail_coffee.jpg">
					<span class="sticker sticker-bottom-left sticker-danger">JPG</span>
				</label>
			</div>
		</div>
		<div class="card-body">
			<div class="card-row">
				<div class="flex-col flex-col-expand">
					...
				</div>
				<div class="flex-col">
					...
				</div>
			</div>
		</div>
	</div>
</div>