Skip to content

Commit

Permalink
fix(KtCard): padding/margin issues & enhance docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@carsoli
Carol Soliman authored and carsoli committed Mar 27, 2023
1 parent 9d28eea commit 5774a7d
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 146 deletions.
145 changes: 41 additions & 104 deletions packages/documentation/pages/usage/components/card.vue
View file
Original file line number Diff line number Diff line change
@@ -1,121 +1,51 @@
<template lang="md">
<ComponentInfo v-bind="{ component }" />
<template>
<div>
<ComponentInfo v-bind="{ component }" />

## Structure

<div class="element-example">
<KtCard>
<div slot="card-header" >
<h2>Lorem Ipsum</h2>
<b>consectetur adipiscing elit</b>
</div>
<div slot="card-body" >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus consequat nisl at nisl condimentum vehicula.
</p>
</div>
<div slot="card-footer">
<KtButton label="Button" />
</div>
</KtCard>
</div>

The Card component has slots for the `card-header`, `card-body`, and `card-footer`:

```html
<KtCard>
<div slot="card-header">
<h2>Lorem Ipsum</h2>
<b>consectetur adipiscing elit</b>
</div>
<div slot="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
consequat nisl at nisl condimentum vehicula.
</p>
</div>
<div slot="card-footer">This is the end</div>
</KtCard>
```

## Images and Position

<div class="element-example">
<KtRow :gap="16">
<KtCol :span="8">
<KtCard imgUrl="https://picsum.photos/900/300">
<div slot="card-header" >
<div class="element-example">
<KtCard>
<div slot="card-header">
<h2>Lorem Ipsum</h2>
<b>consectetur adipiscing elit</b>
</div>
<div slot="card-body" >
<div slot="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus consequat nisl at nisl condimentum vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
consequat nisl at nisl condimentum vehicula.
</p>
</div>
<div slot="card-footer">
This is the end
<KtButton label="Button" />
</div>
</KtCard>
</KtCol>
<KtCol :span="8">
<KtCard imgUrl="https://picsum.photos/900/300" imgPosition="middle">
<div slot="card-header" >
<h2>Lorem Ipsum</h2>
</div>
<div slot="card-body" >
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus consequat nisl at nisl condimentum vehicula.
</p>
</div>
<div slot="card-footer">
This is the end
</div>
</KtCard>
</KtCol>
<KtCol :span="8">
<KtCard imgUrl="https://picsum.photos/900/300" imgPosition="bottom">
<div slot="card-header" >
<h2>Lorem Ipsum</h2>
</div>
<div slot="card-body" >
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus consequat nisl at nisl condimentum vehicula.
</p>
</div>
<div slot="card-footer">
This is the end
</div>
</KtCard>
</KtCol>
</KtRow>
</div>

The `imgUrl` property defines the image’s `url`.

`imgPosition` sets the image position. Valid values are `top`, `middle` and `bottom`.
</div>

```html
<KtCard imgUrl="https://picsum.photos/900/300" imgPosition="middle">
<div slot="card-header">
<h2>Lorem Ipsum</h2>
</div>
<div slot="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
consequat nisl at nisl condimentum vehicula.
</p>
<KtRow :gap="8">
<KtCol :span="12">
<KtFieldSingleSelect
v-model="imgPosition"
hideClear
label="Image Position"
:options="imgPositionOptions"
/>
</KtCol>
<KtCol :span="12">
<KtCard v-bind="{ imgPosition }" imgUrl="https://picsum.photos/900/300">
<h2 slot="card-header">Lorem Ipsum</h2>
<p slot="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
consequat nisl at nisl condimentum vehicula.
</p>
<p slot="card-footer">This is the end</p>
</KtCard>
</KtCol>
</KtRow>
</div>
<div slot="card-footer">This is the end</div>
</KtCard>
```
</template>

<script lang="ts">
import { KtCard } from '@3yourmind/kotti-ui'
import { defineComponent } from '@vue/composition-api'
import { Kotti, KtCard } from '@3yourmind/kotti-ui'
import { defineComponent, ref } from '@vue/composition-api'
import ComponentInfo from '~/components/ComponentInfo.vue'
Expand All @@ -127,6 +57,13 @@ export default defineComponent({
setup() {
return {
component: KtCard,
imgPosition: ref<Kotti.Card.ImagePosition>(Kotti.Card.ImagePosition.TOP),
imgPositionOptions: Object.entries(Kotti.Card.ImagePosition).map(
([label, value]) => ({
label,
value,
}),
),
}
},
})
Expand Down
65 changes: 23 additions & 42 deletions packages/kotti-ui/source/kotti-card/KtCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="kt-card">
<div v-if="imgUrl" :class="imageContainerClass">
<div :class="cardClass">
<div v-if="imgUrl" :class="imageRowClass">
<img class="kt-card__image-row__image" :src="imgUrl" />
</div>
<div v-if="$slots['card-header']" class="kt-card__header">
Expand All @@ -9,7 +9,7 @@
<div v-if="$slots['card-body']" class="kt-card__body">
<slot name="card-body" />
</div>
<div v-if="$slots['card-footer']" :class="footerClass">
<div v-if="$slots['card-footer']" class="kt-card__footer">
<slot name="card-footer" />
</div>
</div>
Expand All @@ -27,19 +27,13 @@ export default defineComponent<KottiCard.PropsInternal>({
props: makeProps(KottiCard.propsSchema),
setup(props) {
return {
imageContainerClass: computed(() => ({
'kt-card__image-row': true,
'kt-card__image-row--is-bottom':
props.imgPosition === KottiCard.ImagePosition.BOTTOM,
'kt-card__image-row--is-middle':
props.imgPosition === KottiCard.ImagePosition.MIDDLE,
'kt-card__image-row--is-top':
props.imgPosition === KottiCard.ImagePosition.TOP,
cardClass: computed(() => ({
'kt-card': true,
[`kt-card--has-${props.imgPosition}-image`]: props.imgUrl,
})),
footerClass: computed(() => ({
'kt-card__footer': true,
'kt-card__footer--is-last':
props.imgUrl && props.imgPosition !== KottiCard.ImagePosition.BOTTOM,
imageRowClass: computed(() => ({
'kt-card__image-row': true,
[`kt-card__image-row--is-${props.imgPosition}`]: true,
})),
KottiCard,
}
Expand All @@ -51,23 +45,21 @@ export default defineComponent<KottiCard.PropsInternal>({
.kt-card {
display: flex;
flex-direction: column;
word-break: break-all;
word-break: break-word;
background: var(--ui-background);
border: var(--unit-q) solid var(--ui-02);
border: 1px solid var(--ui-02);
border-radius: var(--border-radius);
padding: var(--unit-4);
&--has-top-image {
padding-top: 0;
}
&--has-bottom-image {
padding-bottom: 0;
}
&__header {
order: 2;
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0;
}
}
&__body {
Expand All @@ -79,29 +71,17 @@ export default defineComponent<KottiCard.PropsInternal>({
text-align: right;
}
&__header,
&__body,
&__footer {
padding: var(--unit-4);
padding-bottom: 0;
&--is-last {
padding-bottom: var(--unit-4);
}
}
&__image-row {
padding-top: var(--unit-4);
&__image {
display: block;
max-width: 100%;
height: auto;
}
margin: var(--unit-4) calc(-1 * var(--unit-4));
&--is-top {
order: 1;
padding-top: 0;
margin-top: 0;
.kt-card__image-row__image {
border-top-left-radius: var(--border-radius);
Expand All @@ -115,6 +95,7 @@ export default defineComponent<KottiCard.PropsInternal>({
&--is-bottom {
order: 6;
margin-bottom: 0;
.kt-card__image-row__image {
border-bottom-right-radius: var(--border-radius);
Expand Down

0 comments on commit 5774a7d

Please sign in to comment.