Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-organize KCard styles to simplify and improve content tolerance #838

Merged
merged 3 commits into from
Dec 4, 2024
Merged

Re-organize KCard styles to simplify and improve content tolerance #838

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
96a14ff
Add cards QA page
MisRob Nov 21, 2024
f19114a
Improve content tolerance
MisRob Nov 19, 2024
263bd7e
Move cards qa page
MisRob Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/pages/qa/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Contains pages of rather private character that serve for manual preview of components. Accessible on url /qa/...
277 changes: 277 additions & 0 deletions docs/pages/qa/cards.vue
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO @MisRob: move to docs/pages/playground/cards.vue as per @AlexVelezLl feedback

Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
<template>

<div style="padding: 80px">
<h1 id="link-target">
Cards QA page
</h1>
<p>Also preview live examples on <code>KCardGrid</code> and <code>KCard</code> documentation pages.</p>

<section>
<h2>Horizontal cards with large amount of content</h2>

<KCardGrid layout="1-2-3">
<KCard
v-for="{ display, align } in horizontalThumbnailCombinations"
:key="`${display}-${align}`"
:headingLevel="3"
orientation="horizontal"
:thumbnailDisplay="display"
:thumbnailAlign="align"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
:title="`With thumbnail display: '${display}' and thumbnail align: '${align}'`"
>
<template #aboveTitle>
<KLabeledIcon icon="readSolid" label="Read" />
</template>
<template #belowTitle>
<KTextTruncator
text="Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live."
:maxLines="3"
/>
</template>
<template #footer>
<div class="footer-wrapper">
<div class="pills" :style="{ 'color': $themeTokens.annotation }">
<span
:style="{ 'background-color': $themePalette.grey.v_100 }"
>
<KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
Read
</span>
<span :style="{ 'background-color': $themePalette.grey.v_100 }">
Short Activity
</span>
</div>
</div>
<div :style="{ marginTop: '8px' }">
<KFixedGrid :numCols="4">
<KFixedGridItem :span="3" :style="{ paddingTop: '8px' }">
<KLinearLoader
type="determinate"
:progress="20"
/>
</KFixedGridItem>
<KFixedGridItem :span="1" alignment="right">
<KIcon icon="schedule" :style="{ fontSize: '18px' }" />
</KFixedGridItem>
</KFixedGrid>
</div>
</template>
</KCard>
</KCardGrid>
</section>

<section>
<h2>Horizontal cards with small amount of content</h2>
<KCardGrid layout="1-2-3">
<KCard
v-for="{ display, align } in horizontalThumbnailCombinations"
:key="`${display}-${align}`"
:headingLevel="3"
:titleMaxLines="1"
orientation="horizontal"
:thumbnailDisplay="display"
:thumbnailAlign="align"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
:title="`With thumbnail display: '${display}' and thumbnail align: '${align}'`"
>
<template #belowTitle>
<KTextTruncator
text="Discover how hummingbirds play a big role in nature"
:maxLines="1"
/>
</template>
</KCard>
</KCardGrid>
</section>

<section>
<h2>Vertical cards with large amount of content</h2>
<KCardGrid layout="1-2-3">
<KCard
v-for="{ display } in verticalThumbnailCombinations"
:key="`${display}`"
:headingLevel="3"
orientation="vertical"
:thumbnailDisplay="display"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
:title="`With thumbnail display: '${display}'`"
>
<template #aboveTitle>
<KLabeledIcon icon="readSolid" label="Read" />
</template>
<template #belowTitle>
<KTextTruncator
text="Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live."
:maxLines="3"
/>
</template>
<template #footer>
<div class="footer-wrapper">
<div class="pills" :style="{ 'color': $themeTokens.annotation }">
<span
:style="{ 'background-color': $themePalette.grey.v_100 }"
>
<KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
Read
</span>
<span :style="{ 'background-color': $themePalette.grey.v_100 }">
Short Activity
</span>
</div>
</div>
<div :style="{ marginTop: '8px' }">
<KFixedGrid :numCols="4">
<KFixedGridItem :span="3" :style="{ paddingTop: '8px' }">
<KLinearLoader
type="determinate"
:progress="20"
/>
</KFixedGridItem>
<KFixedGridItem :span="1" alignment="right">
<KIcon icon="schedule" :style="{ fontSize: '18px' }" />
</KFixedGridItem>
</KFixedGrid>
</div>
</template>
</KCard>
</KCardGrid>
</section>

<section>
<h2>Vertical cards with small amount of content</h2>
<KCardGrid layout="1-2-3">
<KCard
v-for="{ display } in verticalThumbnailCombinations"
:key="`${display}`"
:headingLevel="3"
orientation="vertical"
:thumbnailDisplay="display"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
:title="`With thumbnail display: '${display}'`"
>
<template #belowTitle>
<KTextTruncator
text="Discover how hummingbirds play a big role in nature"
:maxLines="1"
/>
</template>
</KCard>
</KCardGrid>
</section>

<section>
<h2>Cards when links</h2>
<KCardGrid layout="1-2-3">
<KCard
:to="{ path: '#link-target' }"
:headingLevel="3"
orientation="horizontal"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
title="First card"
/>
<KCard
:to="{ path: '#link-target' }"
:headingLevel="3"
orientation="horizontal"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
title="Second card"
/>
</KCardGrid>
</section>

<section>
<h2>Cards when not links</h2>
<KCardGrid layout="1-2-3">
<KCard
:headingLevel="3"
orientation="horizontal"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
title="First card"
/>
<KCard
:headingLevel="3"
orientation="horizontal"
:thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
title="Second card"
/>
</KCardGrid>
</section>
</div>

</template>


<script>

export default {
name: 'QaCards',
data() {
return {
horizontalThumbnailCombinations: [
{
display: 'none',
align: 'left',
},
{
display: 'small',
align: 'left',
},
{
display: 'large',
align: 'left',
},
{
display: 'none',
align: 'right',
},
{
display: 'small',
align: 'right',
},
{
display: 'large',
align: 'right',
},
],
verticalThumbnailCombinations: [
{
display: 'none',
},
{
display: 'small',
},
{
display: 'large',
},
],
};
},
};

</script>


<style lang="scss" scoped>

section {
margin-top: 84px;
}

.footer-wrapper {
display: flex;
justify-content: space-between;
}

.pills {
margin-left: -4px;

span {
display: inline-block;
padding: 4px 8px;
margin: 4px;
border-radius: 4px;
}
}

</style>
Loading