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: card layout block background #767

Merged
merged 4 commits into from
Jan 16, 2024
Merged

fix: card layout block background #767

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0457a44
fix: update card,content layouts background prop schema validation
qradle-yndx Jan 11, 2024
345c72e
feat: add card layout background border
qradle-yndx Jan 11, 2024
9f6f092
fix: card layout background border prop
qradle-yndx Jan 12, 2024
b31a96f
fix: move backgroundBorder prop from card layout schema to background…
qradle-yndx Jan 16, 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
2 changes: 2 additions & 0 deletions src/blocks/CardLayout/CardLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ $block: '.#{$ns}card-layout-block';
object-fit: cover;
object-position: left;
}

@include card-border();
}

@include animate-slides(#{$block}__item);
Expand Down
6 changes: 5 additions & 1 deletion src/blocks/CardLayout/CardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
className,
titleClassName,
background,
backgroundBorder = 'none',
}) => {
return (
<AnimateBlock className={b(null, className)} animate={animated}>
Expand All @@ -43,7 +44,10 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
'with-background': !isEmpty(background),
})}
>
<BackgroundImage className={b('image')} {...background} />
<BackgroundImage
className={b('image', {border: backgroundBorder})}
{...background}
/>
<Row>
{React.Children.map(children, (child, index) => (
<Col key={index} sizes={colSizes} className={b('item')}>
Expand Down
8 changes: 6 additions & 2 deletions src/blocks/CardLayout/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {ImageObjectProps} from '../../components/Image/schema';
import {BackgroundImageProps} from '../../components/Image/schema';
import {
AnimatableProps,
BlockBaseProps,
Expand All @@ -15,7 +15,11 @@ export const CardLayoutProps = {
...AnimatableProps,
...BlockHeaderProps,
colSizes: containerSizesObject,
background: ImageObjectProps,
background: BackgroundImageProps,
backgroundBorder: {
type: 'string',
Copy link
Collaborator

Choose a reason for hiding this comment

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

could we add it inside background property?

enum: ['line', 'shadow', 'none'],
},
children: ChildrenCardsProps,
},
};
Expand Down
4 changes: 2 additions & 2 deletions src/blocks/ContentLayout/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {ImageObjectProps} from '../../components/Image/schema';
import {BackgroundImageProps} from '../../components/Image/schema';
import {
BlockBaseProps,
FileLinkProps,
Expand All @@ -14,7 +14,7 @@ const ContentLayoutBlockProperties = {
type: 'string',
enum: contentSizes,
},
background: ImageObjectProps,
background: BackgroundImageProps,
centered: {
type: 'boolean',
},
Expand Down
21 changes: 19 additions & 2 deletions src/components/Image/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,9 @@ export const ImageDeviceProps = {
},
};

export const ImageObjectProps = {
export const ImageBaseObjectProps = {
type: 'object',
additionalProperties: false,
required: ['src'],
properties: {
...ImageBase,
src: {
Expand All @@ -57,6 +56,11 @@ export const ImageObjectProps = {
},
};

export const ImageObjectProps = {
...ImageBaseObjectProps,
required: ['src'],
};

export const ImageProps = {
oneOf: [
{
Expand All @@ -74,3 +78,16 @@ export const ImageProps = {
}),
],
};

export const BackgroundImageProps = {
anyOf: [
{
...ImageBaseObjectProps,
optionName: 'options',
},
{
...ImageDeviceProps,
optionName: 'device options',
},
],
};
2 changes: 2 additions & 0 deletions src/models/constructor-items/blocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Animatable,
BackgroundImageProps,
ButtonProps,
CardBorder,
ContentSize,
ContentTextSize,
ContentTheme,
Expand Down Expand Up @@ -306,6 +307,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
description?: string;
colSizes?: GridColumnSizesType;
background?: BackgroundImageProps;
backgroundBorder?: CardBorder;
}

export type FilterTag = {
Expand Down
21 changes: 12 additions & 9 deletions styles/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,15 +252,7 @@
border-radius: $borderRadius;
}

@mixin card($hover: false) {
min-height: 248px;
height: 100%;
overflow-x: hidden;
border-radius: $borderRadius;
background-color: var(--g-color-base-float);

transition: box-shadow 0.3s $ease-out-cubic;

@mixin card-border($hover: false) {
&_border_line {
border: 1px solid var(--g-color-line-generic);
}
Expand All @@ -283,6 +275,17 @@
}
}

@mixin card($hover: false) {
min-height: 248px;
height: 100%;
overflow-x: hidden;
border-radius: $borderRadius;
background-color: var(--g-color-base-float);

transition: box-shadow 0.3s $ease-out-cubic;
@include card-border($hover);
}

@mixin card-image {
margin: $imagePadding;
border-radius: calc(#{$borderRadius} - #{$imagePadding});
Expand Down
Loading