ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-06 21:40:01 +00:00
Code Issues Projects Releases Wiki Activity

fix: fix filter-editor style (#1114)

Browse Source 
Include before/after visuals or gifs if this PR includes visual changes.

### Before

![image](https://github.com/user-attachments/assets/84377ff4-f887-45c4-8424-d76d8724f79e)


### After

![image](https://github.com/user-attachments/assets/4e77bc54-a061-4474-b53f-d91677528336)

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>
This commit is contained in:
BlackGanglion
2025-03-28 21:33:46 +08:00
committed by GitHub
parent d0e160f71a
commit d691d49538
2 changed files with 10 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/FilterEditorBlock.tsx
View File

@@ -11,6 +11,9 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
render() { render() {
const t = this.props.t; const t = this.props.t;
return <div className="maputnik-filter-editor-block"> return <div className="maputnik-filter-editor-block">
<div className="maputnik-filter-editor-block-content">
{this.props.children}
</div>
<div className="maputnik-filter-editor-block-action"> <div className="maputnik-filter-editor-block-action">
<InputButton <InputButton
className="maputnik-delete-filter" className="maputnik-delete-filter"
@@ -20,9 +23,6 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
<MdDelete /> <MdDelete />
</InputButton> </InputButton>
</div> </div>
<div className="maputnik-filter-editor-block-content">
{this.props.children}
</div>
</div> </div>
} }
} }

29
src/styles/_filtereditor.scss
View File

@@ -14,26 +14,18 @@
color: vars.$color-lowgray; color: vars.$color-lowgray;
} }
.maputnik-filter-editor-property { .maputnik-filter-editor-single {
display: inline-block; display: flex;
width: 25%; column-gap: 6px;
} }
.maputnik-filter-editor-operator { .maputnik-filter-editor-operator {
margin: 0 2%;
display: inline-block;
width: 17%;
.maputnik-select { .maputnik-select {
width: 100%; width: 100%;
} }
} }
.maputnik-filter-editor-args { .maputnik-filter-editor-args {
display: inline-block;
width: 54%;
margin: 0 2%;
.maputnik-string, .maputnik-string,
.maputnik-number { .maputnik-number {
width: 100%; width: 100%;
@@ -67,17 +59,10 @@
@extend .maputnik-icon-button !optional; /* stylelint-disable-line */ @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
} }
.maputnik-filter-editor-block-action { .maputnik-filter-editor-block {
margin-top: vars.$margin-2; display: flex;
margin-bottom: vars.$margin-2; column-gap: 6px;
display: inline-block; margin-bottom: 2px;
width: 6%;
margin-right: 1.5%;
}
.maputnik-filter-editor-block-content {
display: inline-block;
width: 92.5%;
} }
.maputnik-radio-as-button { .maputnik-radio-as-button {