Skip to content

Commit

Permalink
Merge pull request #796 from MisRob/k-card-grid-5
Browse files Browse the repository at this point in the history 
KCardGrid part 3: Add advanced grid configuration and loading skeletons
  • Loading branch information
@MisRob
MisRob authored Nov 8, 2024
2 parents ea611a5 + 714cae4 commit 16f5c33
Show file tree
Hide file tree
Showing 13 changed files with 1,173 additions and 258 deletions.
1 change: 0 additions & 1 deletion docs/assets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ code {
padding-left: 0.25em;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
white-space: nowrap;
background-color: #918caf24;
border-radius: 0.25em;
}
Expand Down
176 changes: 167 additions & 9 deletions docs/pages/kcard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@
<p>It manages the layout, including the thumbnail image, title, and other content. It offers several base layouts and many customization options. Cards like the examples shown can be created, and many others.</p>

<DocsShow block :style="{ maxWidth: '800px' }">
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig1"
:loading="loading"
>
<DocsKCard
:headingLevel="3"
:orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
Expand Down Expand Up @@ -243,7 +247,11 @@
<p><code>KCard</code> has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining <code>orientation</code>, <code>thumbnailDisplay</code> and <code>thumbnailAlign</code> props, the following card layouts can be achieved to organize diverse kinds of content:</p>

<DocsShow block>
<KCardGrid layout="1-2-3">
<KCardGrid
layout="1-2-3"
:skeletonsConfig="skeletonsConfig2"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
orientation="vertical"
Expand Down Expand Up @@ -303,7 +311,11 @@
</DocsShow>

<DocsShow block>
<KCardGrid layout="1-2-2">
<KCardGrid
layout="1-2-2"
:skeletonsConfig="skeletonsConfig3"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
orientation="horizontal"
Expand All @@ -324,7 +336,11 @@
</DocsShow>

<DocsShow block>
<KCardGrid layout="1-2-3">
<KCardGrid
layout="1-2-3"
:skeletonsConfig="skeletonsConfig4"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
orientation="vertical"
Expand Down Expand Up @@ -413,7 +429,11 @@
<p>Use <code>aboveTitle</code>, <code>belowTitle</code>, and <code>footer</code> slots to add content to a card. <code>KCard</code> will organize these areas according to its <DocsInternalLink text="layout configuration" href="#layout" />. Apply custom styling to the inner content of slots to achieve desired effects.</p>

<DocsShow block>
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig5"
:loading="loading"
>
<KCard
:to="{ path: '#guidelines' }"
:headingLevel="4"
Expand Down Expand Up @@ -494,10 +514,14 @@

<p>When <code>KCard</code> is set to display the thumbnail, the thumbnail area acts as a placeholder if the image is missing, fails to load, or is still loading. In such cases, a light gray background is shown in place of the image.</p>

<p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> This serves as a progressive loading experience where the placeholder element is displayed until the image is loaded, and is particularly important on slower networks.</p>
<p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> It serves as fallback content if the image fails to load unexpectedly.</p>

<DocsShow block>
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig6"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
:orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
Expand Down Expand Up @@ -544,7 +568,11 @@
<p><em>This applies to all slot content, but considering accessibility is especially important with interactive elements.</em> For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.</p>

<DocsShow block>
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig7"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
:orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
Expand Down Expand Up @@ -592,7 +620,11 @@
<p>Managing the selection state is not <code>KCard</code>'s responsibility.</p>

<DocsShow block :style="{ maxWidth: '800px' }">
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig8"
:loading="loading"
>
<DocsKCard
:to="{ path: '#guidelines' }"
:headingLevel="4"
Expand Down Expand Up @@ -708,8 +740,134 @@
isBookmarked3: false,
isFirstCardChecked: false,
isSecondCardChecked: false,
loading: true,
skeletonsConfig1: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '490px',
},
{
breakpoints: [2],
height: '430px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '220px',
},
],
skeletonsConfig2: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '490px',
},
{
breakpoints: [3, 4, 5, 6, 7],
height: '420px',
},
],
skeletonsConfig3: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailDisplay: 'large',
thumbnailAlign: 'left',
height: '310px',
},
{
breakpoints: [4, 5, 6, 7],
height: '240px',
},
],
skeletonsConfig4: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
height: '290px',
},
{
breakpoints: [4, 5, 6, 7],
height: '225px',
},
],
skeletonsConfig5: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailDisplay: 'large',
thumbnailAlign: 'left',
height: '300px',
},
{
breakpoints: [3, 4, 5, 6, 7],
height: '190px',
},
],
skeletonsConfig6: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '460px',
},
{
breakpoints: [2],
height: '390px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '170px',
},
],
skeletonsConfig7: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '460px',
},
{
breakpoints: [2],
height: '390px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '170px',
},
],
skeletonsConfig8: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '400px',
},
{
breakpoints: [2],
height: '380px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '180px',
},
],
};
},
mounted() {
setTimeout(() => {
this.loading = false;
}, 3000);
},
};
</script>
Expand Down
Loading

0 comments on commit 16f5c33

Please sign in to comment.