Skip to content

Commit

Permalink
cleans thumbnial configuration condition
Browse files Browse the repository at this point in the history
  • Loading branch information
@AllanOXDi
AllanOXDi committed Aug 28, 2024
1 parent 43114d3 commit b89f714
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 204 deletions.
229 changes: 35 additions & 194 deletions docs/pages/playground.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,21 +65,29 @@
</KCard>
</ul>

<ul class="vertical-cards">

<ul class="vertical-cards">
<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="2"
layout="vertical"
thumbnailDisplay="none"
thumbnailDisplay="small"
:preserveFooter="true"
title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
>
<template #title>
<KTextTruncator
text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
:maxLines="2"
/>

<template #thumbnailPlaceholder>
<div>
<div style="text-align: center;">
<KIcon icon="readSolid" class="icon-placeholder" />
</div>
</div>
</template>
<template #belowTitle>
<span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
</template>

<template #footer>
<div>
<div class="footer-top-header">
Expand Down Expand Up @@ -119,8 +127,6 @@
</template>
</KCard>
</ul>


<ul class="vertical-cards">

<KCard
Expand Down Expand Up @@ -184,32 +190,15 @@
:to="{ name: '/' }"
:headingLevel="2"
layout="vertical"
thumbnailDisplay="small"
title="This is a sample resource title"
thumbnailDisplay="none"
>
<template #aboveTitle>
<KGrid>
<KGridItem
:layout12="{ span: 8 }"
:layout8="{ span: 6 }"
>
<span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
<span
:style="{ 'color': $themePalette.grey.v_400,
'font-size': '12px' }"
>Rutrum pellentesque utrum...</span>
</KGridItem>

<KGridItem
:layout12="{ span: 4 }"
:layout8="{ span: 2 }"
>
<div style="float:right">
<KIcon icon="infoOutline" class="icon-size" />
</div>
</KGridItem>
</KGrid>
<template #title>
<KTextTruncator
text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
:maxLines="2"
/>
</template>

<template #belowTitle>
<span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
</template>
Expand Down Expand Up @@ -254,29 +243,16 @@
</KCard>
</ul>


<ul class="vertical-cards">

<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="2"
layout="vertical"
thumbnailDisplay="large"
title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
/>
</ul>

<!-- <h3>Horizontal layout with large thumbnail</h3>
<ul class="horizontal-cards">
<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="2"
layout="horizontal"
thumbnailAlign="left"
thumbnailDisplay="large"
:thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
thumbnailDisplay="none"
title="This is a sample resource title"
>
<template #aboveTitle>
<KGrid>
Expand Down Expand Up @@ -343,157 +319,19 @@
</div>
</template>
</KCard>
</ul>

<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="2"
layout="horizontal"
thumbnailAlign="right"
thumbnailDisplay="large"
:thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
>
<template #title>
<KTextTruncator
text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
:maxLines="3"
/>
</template>
<template #footer>
<div>
<div class="footer-top-header">
<span>
<KIcon icon="createShaded" class="icon-size" />
Practice
</span>
<span
:style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
>
Short Activity
</span>
</div>
<KGrid>
<KGridItem
:layout12="{ span: 8 }"
:layout8="{ span: 6 }"
>
<progress
value="20"
max="100"
style="height:0.5em;width:100%"
></progress>
</KGridItem>
<KGridItem
:layout12="{ span: 4 }"
:layout8="{ span: 2 }"
>
<div class="" style="float:right;">
<KIcon icon="schedule" class="icon-size" />
<KIcon icon="download" class="icon-size" />
</div>
</KGridItem>
</KGrid>
</div>
</template>
</KCard>
<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="2"
layout="horizontal"
thumbnailDisplay="large"
thumbnailAlign="right"
:thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
title="This is a sample resource title"
>
<template #belowTitle>
<span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
</template>
<template #footer>
<div>
<div class="footer-top-header">
<span>
<KIcon icon="createShaded" class="icon-size" />
Practice
</span>
<span
:style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
>
Short Activity
</span>
</div>
<KGrid>
<KGridItem
:layout12="{ span: 8 }"
:layout8="{ span: 6 }"
>
<progress
value="20"
max="100"
style="height:0.5em;width:100%"
></progress>
</KGridItem>
<KGridItem
:layout12="{ span: 4 }"
:layout8="{ span: 2 }"
>
<div class="" style="float:right;">
<KIcon icon="schedule" class="icon-size" />
<KIcon icon="download" class="icon-size" />
</div>
</KGridItem>
</KGrid>
</div>
</template>
</KCard>
<ul class="vertical-cards">

<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="2"
layout="horizontal"
thumbnailDisplay="large"
thumbnailAlign="right"
layout="vertical"
thumbnailDisplay="none"
title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
>
<template #thumbnailPlaceholder>
<span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
<KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
</span>
</template>
<template #aboveTitle>
<KGrid>
<KGridItem
:layout12="{ span: 8 }"
:layout8="{ span: 6 }"
>
<span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
<span
:style="{ 'color': $themePalette.grey.v_400,
'font-size': '12px' }"
>Rutrum pellentesque utrum...</span>
</KGridItem>
<KGridItem
:layout12="{ span: 4 }"
:layout8="{ span: 2 }"
>
<div style="float:right">
<KIcon icon="infoOutline" class="icon-size" />
</div>
</KGridItem>
</KGrid>
</template>
<template #belowTitle>
<span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
</template>
</KCard>
</ul> -->
/>
</ul>

<h3>Horizontal layout with no thumbnail</h3>

Expand Down Expand Up @@ -646,7 +484,7 @@
<KCard
class="card"
:to="{ name: '/' }"
:headingLevel="1"
:headingLevel="2"
layout="horizontal"
thumbnailDisplay="none"
thumbnailAlign="left"
Expand Down Expand Up @@ -748,5 +586,8 @@
margin-left: 300px;
font-size: 20px;
}
.icon-placeholder {
font-size: 50px;
}
</style>
16 changes: 6 additions & 10 deletions lib/KCard/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,10 @@
<slot name="title"></slot>
</template>
<template #default>
<div :class="isThumbnailPresent ? 'thumbnail' : null">
<!--
Render KImg even if thumbnailSrc is not provided since in that case
KImg takes care of showing the gray placeholder area.
-->
<div
v-if="thumbnailDisplay !== 'none'"
class="thumbnail"
>
<KImg
v-if="thumbnailSrc"
:src="thumbnailSrc"
Expand All @@ -35,7 +34,7 @@
as progressive loading experience.
-->
<span
v-if="$slots.thumbnailPlaceholder && !thumbnailSrc"
v-if="$slots.thumbnailPlaceholder"
class="thumbnail-placeholder"
>
<!-- @slot Places content to the thumbnail placeholder area. -->
Expand Down Expand Up @@ -351,9 +350,6 @@
}
return {};
},
isThumbnailPresent() {
return this.thumbnailSrc || this.$slots.thumbnailPlaceholder;
},
},
};
Expand Down Expand Up @@ -411,7 +407,7 @@
}
.thumbnail-placeholder {
position: relative;
position: absolute;
top: 0;
right: 0;
bottom: 0;
Expand Down

0 comments on commit b89f714

Please sign in to comment.