create AddCondition button #92
Conversation
- added text for wikitranslate - added english translation
src/components/QueryBuilder.vue
Outdated
| @@ -222,4 +227,9 @@ a { | |||
| .querybuilder__run { | |||
| margin-block-start: $dimension-layout-medium; | |||
| } | |||
|
|
|||
| .querybuilder__add-condition { | |||
| float: inline-end; | |||
There was a problem hiding this comment.
do we want to use flex here instead? in that case we need a flex wrapper only for this element
There was a problem hiding this comment.
seems like it has terrible browser support.
https://caniuse.com/?search=inline-end
There was a problem hiding this comment.
I think our postcss is supposed to take care of that, but somehow this is not working. I.e. it is broken in chrome.
There was a problem hiding this comment.
On inspecting it further, that part of postcss seems to correctly replace it with float: right and float: left, but we are not picking it up because there is still some confusion about the dir attribute. I'll look.
guergana
changed the title
guergana
force-pushed
the
add-condition-component
branch
2 times, most recently
from
c5cd2f2
to
757df7f
Compare
added test to check for emitter
guergana
force-pushed
the
add-condition-component
branch
from
757df7f
to
84bc3fe
Compare
There was a problem hiding this comment.
This works as intended. Postcss produces the following styles:
[dir=ltr] .querybuilder__add-condition[data-v-4ec7d228]{float:right}
[dir=rtl] .querybuilder__add-condition[data-v-4ec7d228]{float:left}
.querybuilder__add-condition[data-v-4ec7d228]{float:inline-end}That is what we want. The problem is that we are currently always using [dir=auto] and so those styles don't match. However, that problem is independent of this PR and so I'm approving this.
first commit:
second commit:
third commit: