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 plugin css #5498

Merged
merged 2 commits into from
Sep 24, 2024
Merged

Fix plugin css #5498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e210cf
fix: #5486 pluginζ ·εΌδΌ˜εŒ–
DDMeaqua Sep 23, 2024
4a60512
chore: css
DDMeaqua Sep 23, 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
24 changes: 23 additions & 1 deletion app/components/plugin.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,29 @@
max-height: 240px;
overflow-y: auto;
white-space: pre-wrap;
min-width: 300px;
min-width: 280px;
}
}

.plugin-schema {
display: flex;
justify-content: flex-end;
flex-direction: row;

input {
margin-right: 20px;

@media screen and (max-width: 600px) {
margin-right: 0px;
}
}

@media screen and (max-width: 600px) {
flex-direction: column;
gap: 5px;

button {
padding: 10px;
}
}
}
Comment on lines +17 to +38
Copy link
Contributor

Choose a reason for hiding this comment

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

LGTM! Consider minor improvements.

The new .plugin-schema class effectively improves the layout and responsiveness of the plugin schema section. It addresses potential layout issues on different screen sizes, which aligns well with the PR's objective of fixing CSS-related bugs.

Consider the following minor improvements:

  1. Use SCSS nesting for better readability:
.plugin-schema {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;

  input {
    margin-right: 20px;
  }

  @media screen and (max-width: 600px) {
    flex-direction: column;
    gap: 5px;

    input {
      margin-right: 0;
    }

    button {
      padding: 10px;
    }
  }
}
  1. Consider using CSS variables for consistent values:
:root {
  --plugin-schema-gap: 5px;
  --plugin-schema-input-margin: 20px;
  --plugin-schema-button-padding: 10px;
  --plugin-schema-breakpoint: 600px;
}

.plugin-schema {
  // ... (use the variables in place of hardcoded values)
}

This approach improves maintainability and consistency across the stylesheet.

4 changes: 2 additions & 2 deletions app/components/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,10 +345,10 @@ export function PluginPage() {
</List>
<List>
<ListItem title={Locale.Plugin.EditModal.Content}>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<div className={pluginStyles["plugin-schema"]}>
<input
type="text"
style={{ minWidth: 200, marginRight: 20 }}
style={{ minWidth: 200 }}
Comment on lines +348 to +351
Copy link
Contributor

Choose a reason for hiding this comment

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

Tip

Codebase Verification

Missing flexbox properties in .plugin-schema class

The .plugin-schema class in app/components/plugin.module.scss does not include the required display: flex and justify-content: flex-end properties. This omission may affect the layout and alignment of elements within the component as intended.

Please update the .plugin-schema class to include the following properties:

.plugin-schema {
  display: flex;
  justify-content: flex-end;
  /* other existing styles */
}
Analysis chain

Improved styling approach, but verify CSS implementation

The change from inline styles to a class-based approach for the div element and the simplification of the input element's inline style are good improvements. This enhances code maintainability and separates styling concerns.

However, please ensure the following:

  1. Verify that the pluginStyles["plugin-schema"] class in the CSS file includes the necessary flexbox properties (display: flex and justify-content: flex-end) to maintain the intended layout.
  2. Check if the removal of marginRight: 20 from the input element affects the layout. If needed, add appropriate margin or padding in the CSS file.

To confirm the CSS implementation, please run the following script:

This will help ensure that the styling is correctly implemented in the CSS file.

Verify .plugin-schema class includes required flexbox properties

The .plugin-schema class exists, but please ensure it includes the following properties to maintain the intended layout:

  1. display: flex
  2. justify-content: flex-end

Please run the following script to verify these properties:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the CSS implementation for the plugin-schema class

# Test: Check if the plugin-schema class exists and has the necessary properties
rg --type css 'plugin-schema' app/components/plugin.module.scss

Length of output: 80

Script:

#!/bin/bash
# Description: Verify that .plugin-schema class includes 'display: flex' and 'justify-content: flex-end'

# Check for 'display: flex' within .plugin-schema
rg '\.plugin-schema\s*\{[^}]*display\s*:\s*flex' app/components/plugin.module.scss

# Check for 'justify-content: flex-end' within .plugin-schema
rg '\.plugin-schema\s*\{[^}]*justify-content\s*:\s*flex-end' app/components/plugin.module.scss

Length of output: 181

onInput={(e) => setLoadUrl(e.currentTarget.value)}
></input>
<IconButton
Expand Down
Loading