Merge pull request #163 from MaibornWolff/#162-card-improvements

#162-card-improvements
MaibornWolff · Jun 23, 2023 · 26bf1e6 · 26bf1e6
2 parents 7062037 + adcfb17
commit 26bf1e6
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/mwui-stencil/src/components.d.ts b/mwui-stencil/src/components.d.ts
@@ -245,6 +245,10 @@ export namespace Components {
      * Alt text for the image
      */
     alt: string;
+    /**
+     * Height of image
+     */
+    height?: string;
     /**
      * Image source
      */
@@ -1364,6 +1368,10 @@ declare namespace LocalJSX {
      * Alt text for the image
      */
     alt?: string;
+    /**
+     * Height of image
+     */
+    height?: string;
     /**
      * Image source
      */

diff --git a/mwui-stencil/src/components/mw-card-body/mw-card-body.css b/mwui-stencil/src/components/mw-card-body/mw-card-body.css
@@ -1,4 +1,5 @@
 :host {
   display: block;
   padding: 0 var(--mw-component-card-padding-components-x-default);
+  flex: 1;
 }
diff --git a/mwui-stencil/src/components/mw-card-image/mw-card-image.tsx b/mwui-stencil/src/components/mw-card-image/mw-card-image.tsx
@@ -16,23 +16,35 @@ export class MwCardImage {
    * Alt text for the image
    */
   @Prop() alt: string;
+  /**
+   * Height of image
+   */
+  @Prop() height?: string;
 
   private isFirstChild: boolean;
   private isLastChild: boolean;
   private isOnlyChild: boolean;
+  private styles;
 
   componentWillLoad(): void {
     const card = this.hostElement.parentNode;
     this.isOnlyChild = card.childElementCount === 1;
     this.isFirstChild = !this.isOnlyChild && this.hostElement.isSameNode(card.firstElementChild);
     this.isLastChild = !this.isOnlyChild && this.hostElement.isSameNode(card.lastElementChild);
+    if (this.height) {
+      this.styles = {
+        "height": this.height,
+        "object-fit": "cover",
+        "width": "100%",
+      };
+    }
   }
 
   render() {
     return (
       <Host>
         <div class={{ "card-image": true, "top": this.isFirstChild, "bottom": this.isLastChild, "single": this.isOnlyChild }}>
-          <img src={this.src} alt={this.alt} />
+          <img src={this.src} alt={this.alt} style={this.styles} />
         </div>
       </Host>
     );

diff --git a/mwui-stencil/src/components/mw-card/mw-card.scss b/mwui-stencil/src/components/mw-card/mw-card.scss
@@ -21,6 +21,8 @@
   -moz-border-radius: var(--mw-component-card-border-radius);
   color: var(--mw-component-card-fg-default);
   border: none;
+  height: 100%;
+  box-sizing: border-box;
   transition: all 0.4 ease;
 
   &:first-child {

diff --git a/mwui-stencil/src/index.html b/mwui-stencil/src/index.html
@@ -351,13 +351,13 @@ <h3>CardTitle</h3>
         </mw-card>
       </div>
       <h3>CardImage</h3>
-      <div style="display: flex; gap: 20px">
+      <div style="display: grid; gap: 20px; grid-template-columns: 1fr 1fr">
         <mw-card elevated>
           <mw-card-header header="Header" subheader="Subheader"><mw-avatar slot="icon" alt="John Doe" /></mw-card-header>
-          <mw-card-image src="https://placedog.net/500/280?id=3" alt="card image"></mw-card-image>
+          <mw-card-image src="https://placedog.net/500/280?id=3" alt="card image" height="170px"></mw-card-image>
         </mw-card>
         <mw-card elevated>
-          <mw-card-image src="https://placedog.net/500/280?id=3" alt="card image"></mw-card-image>
+          <mw-card-image src="https://placedog.net/500/280?id=3" alt="card image" height="250px"></mw-card-image>
           <mw-card-title title="Peter Pan" subtitle="DTD" metadata="Last updated: 2 days ago"></mw-card-title>
           <mw-card-body>I am the body section of this card.</mw-card-body>
           <mw-card-footer>