thomas/lovelace-layout-card
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix rtl mode

Browse Source
This commit is contained in:
Thomas Lovén 2019-11-15 23:35:52 +01:00
parent 471607766c
commit 5d2842f934
3 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -28,7 +28,7 @@ max_width: <max_width>
min_width: <min_width> min_width: <min_width>
flex_grow: <flex_grow> flex_grow: <flex_grow>
justify_content: <justify_content> justify_content: <justify_content>
ltr: <ltr> rtl: <rtl>
cards: cards:
<cards> <cards>
card_options: card_options:
@ -233,7 +233,7 @@ cards:
- `<flex_grow>` (single value or list) and `<justify_content>` (single value) can be used to tweak the CSS flexbox settings of the layout. See [this excellent guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more info. - `<flex_grow>` (single value or list) and `<justify_content>` (single value) can be used to tweak the CSS flexbox settings of the layout. See [this excellent guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more info.
- `<rtl>` will make the columns display from right to left instead of left to right. - `<rtl>` will populate the columns from right to left instead of left to right.
## A few tips ## A few tips

10
layout-card.js
View File

File diff suppressed because one or more lines are too long

7
src/main.js
View File

@ -91,6 +91,9 @@ class LayoutCard extends LitElement {
this._config this._config
); );
if(this._config.rtl)
this.columns.reverse();
this.format_columns(); this.format_columns();
this.requestUpdate(); this.requestUpdate();
@ -150,7 +153,6 @@ class LayoutCard extends LitElement {
return html` return html`
<div id="columns" <div id="columns"
class=" class="
${this._config.rtl ? "rtl": " "}
${this._isPanel() ? "panel": " "} ${this._isPanel() ? "panel": " "}
" "
style=" style="
@ -178,9 +180,6 @@ class LayoutCard extends LitElement {
justify-content: center; justify-content: center;
margin-top: -8px; margin-top: -8px;
} }
#columns.rtl {
flex-direction: row-reverse;
}
#columns.panel { #columns.panel {
margin-top: 0; margin-top: 0;
} }