/* 
2025-02-23 RMcQ
Elements on the cards, which are normally on the List<T>s pages.

*/

/*
2024-04-16 RMcQ: 

TODOs, POSSIBLES:

* Try "card-deck": <div class="card-deck">

* Try "<img class="card-img-left" src="...">
Inside card, before card body:

* TRIED  "w-50 h-auto" on the image to get it to maintain 50% of the container width, 
but it makes it 50% of it's surrounding <div width.
Currently just using 140px 140px for now, works ok in sm, md, and lg.

<div id="{deckId}" class="container mqc-card-list-div {moreListClasses}" >

    <div class="row">";

    Each card:
        <div class="col-sm-6 col-md-4">

            The card:

            <div class="card mqc-card-common-entity mqc-card-common-entity-{typeName}">
              <div class="card-header">               {header}    </div>
              <div class="card-body">                 {body}      </div>
              <div class="card-footer text-muted">    {footer}    </div>
            </div>";

        </div>

    </div>

</div>

...

Here's the picture in the body:

divClass:"mqc-card-picture-div",
imgClass:"mqc-card-picture-img m-30 h-auto");

<div class="{divClass}"  >
    <input type="hidden" name="hid_{baseRecordTablePrefix}_MainPictureId" value="{pictureId}" />
    <a href="" >
        <img id="{imgId}" name="{imgId}"  
            src="{imgSrc}" alt="{imgAlt}"
            onclick="{imgOnClick}" 
            class="{imgClass}" 
            style="height:{cellHeight}px; width:{cellWidth}px;" 
        />
    </a>
    {menu}
</div>";


*/





.mqc-card-list-div {

} 

.card {
    border: 2px solid darkgray;
}

.mqc-card-common-entity {  /* .card-body { */
    overflow: auto; /* assure that the floating image stays inside the div */
    margin-bottom:16px;
}

.mqc-card-common-entity .mqc-picture-link, .mqc-card-common-entity .mqc-picture-img {
    float: left;
}

.mqc-card-common-entity .card-header {
    font-weight: 600;
    font-size: 120%;
}
.mqc-card-common-entity .card-body {

    background-color: rgba(30, 144, 255, 0.1); /* dodgerblue 20% */
}
.mqc-card-common-entity .card-footer {

}

.mqc-card-picture-div {
    float: inline-start;
    border: 1px solid gray;
    margin: 0px 8px 8px 0px;
}
.mqc-card-picture-img {
    border: 1px solid green;
}

.mqc-card-field-caption {
    font-weight: 500;
}
.mqc-card-field-data {
/*  background-color:white;  */
    padding: 0px 4px 0px 4px;
    margin: 0px;
    border: 0px solid gray;
}

/* Not yet used:
.mqc-card-common-entity-Project {

}
*/