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

Fixed: Card Style #4715

Merged
merged 1 commit into from
Mar 4, 2025
Merged

Fixed: Card Style #4715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions src/components/Table/CardTable/DataCardTable/CardPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,12 @@ export default {
.panel-image {
margin: auto 5px;
}

.panel-info {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

.el-divider--horizontal {
Copy link
Member

Choose a reason for hiding this comment

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

Please provide the original code from which I can analyze its inconsistencies to make any observations or recommendations.

Expand Down
15 changes: 7 additions & 8 deletions src/components/Table/CardTable/DataCardTable/InfoPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="panel-item">
<span class="item-label">{{ title }} </span>
<span class="item-label">{{ title }}: </span>
<span :title="content" class="text-info">{{ content || '' }}</span>
</div>
</template>
Expand Down Expand Up @@ -35,22 +35,21 @@ export default {
}

.panel-item {
display: flex;
flex-wrap: nowrap;
text-align: left;
padding: 3px 0;
line-height: 20px;

.item-label {
text-align: left;
display: inline-block;
width: 35%;
}

.item-label::after {
content: ':';
margin-left: 1px;
display: flex;
flex: 1;
min-width: 110px;
}

.text-info {
flex: 2;
@include textOverflow;
}
}
Copy link
Member

Choose a reason for hiding this comment

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

Since my knowledge cutoff is from September 2021, I'm unable to analyze new or specific versions of this code. For a precise review and analysis of current trends, it would be beneficial if you could send over any recent changes or updates you'd like evaluated.

To give an estimation:

• The template structure appears correct.
• It utilizes Vue.js syntax for the component definition.

Optimization Suggestions:

  • Perhaps consider removing unnecessary whitespace around elements for better readability.
  • Ensure consistent font sizes across components (like text size) might improve visual aesthetics.
  • If @include textOverflow directive is used before applying overflow style to .text-info, make sure there isn't any additional styling applied afterwards that can potentially override these configurations due to its nature with vue-cli's plugins.
  • Make sure spacing in flex container doesn’t exceed the constraints recommended by BEM (box element modifiers), such as max-widths and heights.

Keep in mind, while I provided general suggestions, without specific details related to these files' version or usage context, exact improvements are hard to pinpoint beyond broader guidelines like those pointed out above.

Expand Down
4 changes: 0 additions & 4 deletions src/views/assets/Cloud/Account/components/CreateDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,6 @@ export default {
&.is-process {
color: var(--color-primary);

.el-step__line {
background-color: var(--color-primary);
}

.el-step__icon {
border-color: var(--color-primary);
}
Copy link
Member

Choose a reason for hiding this comment

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

As of January 2021, these lines were not included in the provided code snippet. Please provide an active copy of the problematic line(s), which should be:

&.is-process {
    color: var(--color-primary);
    .el-step__line {
        background-color: var(--color-primary);
    }
}

@export default;

I hope this helps! Let's continue with your next question or request.

Expand Down