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

fix: EDU BlockRichTable adjustments #633

Merged
merged 3 commits into from
Sep 24, 2024
Merged

fix: EDU BlockRichTable adjustments #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89d392c
changing edu table header color
stephiescastle Sep 24, 2024
c5071fb
adjusting min width settings for blocks inside BlockRichTable
stephiescastle Sep 24, 2024
2e115b8
Merge branch 'main' into fix/edu-table-colors
stephiescastle Sep 24, 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
7 changes: 7 additions & 0 deletions packages/common/src/scss/components/_BlockRichTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,11 @@
@apply p-3 lg:p-5 align-top;
}
}
.BlockImageStandard,
.BlockText {
@apply min-w-[12rem] lg:min-w-[15rem];
.caption-area {
@apply pt-2;
}
}
}
94 changes: 94 additions & 0 deletions packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,97 @@ export const BaseStory = {
table: BlockRichTableData
}
}
export const MixedColumnWidths = {
args: {
table: {
blockType: 'RichTableBlock',
tableCaption:
'Ut dapibus cursus quam, non dapibus diam pellentesque ac. Maecenas ultrices porta dui eget placerat. Curabitur ornare congue interdum.',
tableContent: {
tableHead: [
[
{
text: 'Image'
},
{
text: 'Type'
},
{
text: 'Description'
}
]
],
tableBody: [
[
{
...BlockImageData,
caption: '<p>Custom ImageCaption</p>',
displayCaption: true,
blockType: 'ImageBlock'
},
{
blockType: 'CharBlock',
value: 'Internal'
},
{
blockType: 'RichTextBlock',
value:
'<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
}
],
[
{
...BlockImageData,
caption: '<p>Custom ImageCaption</p>',
displayCaption: true,
blockType: 'ImageBlock'
},
{
blockType: 'CharBlock',
value: 'External'
},
{
blockType: 'RichTextBlock',
value:
'<p>Morbi pretium, massa non convallis facilisis, lectus eros vulputate turpis, et imperdiet eros metus eu enim. Cras consequat iaculis leo eget auctor. Sed bibendum, nulla vel ultricies aliquam, augue mauris sagittis massa, nec malesuada massa justo id sem. In hac habitasse platea dictumst. Sed ullamcorper bibendum libero vitae pellentesque.</p>\n'
}
],
[
{
...BlockImageData,
caption: '<p>Custom ImageCaption</p>',
displayCaption: false,
blockType: 'ImageBlock'
},
{
blockType: 'CharBlock',
value: 'N/A'
},
{
blockType: 'RichTextBlock',
value:
'<p>Maecenas vel dapibus ligula, pretium <a href="#">dictum est</a>. Proin venenatis massa vulputate <strong>est rhoncus</strong>, sed ornare ex sagittis. Donec iaculis magna in rhoncus malesuada.</p>\n'
}
],
[
{
...BlockImageData,
caption: '<p>Custom ImageCaption</p>',
displayCaption: true,
blockType: 'ImageBlock'
},
{
blockType: 'CharBlock',
value: 'Internal'
},
{
blockType: 'RichTextBlock',
value:
'<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
}
]
]
}
}
}
}
4 changes: 2 additions & 2 deletions packages/vue/src/components/BlockRichTable/BlockRichTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default defineComponent({
v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
:key="headIndex"
scope="col"
class="min-w-[12rem] bg-jpl-blue-darker edu:bg-jpl-teal-dark text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
>
{{ headCell.text }}
</th>
Expand All @@ -47,7 +47,7 @@ export default defineComponent({
<td
v-for="(cell, cellIndex) in row"
:key="cellIndex"
class="min-w-[12rem] bg-white text-gray-dark border-gray-light-mid"
class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid"
>
<template v-if="cell.blockType === 'CharBlock'">
<p class="">
Expand Down