Skip to content

Commit

Permalink
Merge pull request #200 from FamousWolf/41-configurable-columns
Browse files Browse the repository at this point in the history 
[FEATURE] Add options to override the number of columns
  • Loading branch information
@FamousWolf
FamousWolf authored Nov 21, 2024
2 parents b772d14 + 9945759 commit 5261448
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 15 deletions.
12 changes: 12 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit
| `filterText` | string | optional | Any regular expression | Remove text from events | 1.10.0 |
| `combineSimilarEvents` | boolean | false | `false` \| `true` | Combine events with the same start date/time, end date/time and title | 1.9.0 |
| `showLegend` | boolean | false | `false` \| `true` | Show calendar legend | 1.7.0 |
| `columns` | object | optional | See [Columns](#columns) | Configuration to override the number of columns | 1.11.0 |

### Calendars

Expand Down Expand Up @@ -125,6 +126,17 @@ See [Actions documentation](https://www.home-assistant.io/dashboards/actions/).
| `showTemperature` | boolean | false | `false` \| `true` | Show temperature | 1.1.0 |
| `showLowTemperature` | boolean | false | `false` \| `true` | Show low temperature | 1.1.0 |

### Columns
By default, the columns are based on the width of the card. You can use these settings to override the default number of columns.

| Name | Type | Default | Supported options | Description | Version |
|--------------|---------|----------|---------------------|---------------------------------------------------------|---------|
| `extraLarge` | number | optional | Any positive number | Number of columns when the card width is >= 1920 pixels | 1.11.0 |
| `large` | number | optional | Any positive number | Number of columns when the card width is >= 1280 pixels | 1.11.0 |
| `medium` | number | optional | Any positive number | Number of columns when the card width is >= 1024 pixels | 1.11.0 |
| `small` | number | optional | Any positive number | Number of columns when the card width is >= 640 pixels | 1.11.0 |
| `extraSmall` | number | optional | Any positive number | Number of columns when the card width is < 640 pixels | 1.11.0 |

## Custom styling using cardmod

Like with most cards, you can add custom styling to this card using [card_mod](https://github.com/thomasloven/lovelace-card-mod). To make it easier to add custom styles to days and/or events, there are several classes that days and events can have. Additionally, there are data attributes you can use in CSS selectors.
Expand Down
23 changes: 22 additions & 1 deletion src/card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export class WeekPlannerCard extends LitElement {
_combineSimilarEvents;
_showLegend;
_actions;
_columns;

/**
* Get config element
Expand Down Expand Up @@ -175,6 +176,7 @@ export class WeekPlannerCard extends LitElement {
this._combineSimilarEvents = config.combineSimilarEvents ?? false;
this._showLegend = config.showLegend ?? false;
this._actions = config.actions ?? false;
this._columns = config.columns ?? {};
if (config.locale) {
LuxonSettings.defaultLocale = config.locale;
}
Expand Down Expand Up @@ -245,8 +247,27 @@ export class WeekPlannerCard extends LitElement {
cardClasses.push('compact');
}

const cardStyles = [
'--event-background-color: ' + this._eventBackground + ';'
];
if (this._columns.extraLarge) {
cardStyles.push('--days-columns: ' + this._columns.extraLarge + ';');
}
if (this._columns.large) {
cardStyles.push('--days-columns-lg: ' + this._columns.large + ';');
}
if (this._columns.medium) {
cardStyles.push('--days-columns-md: ' + this._columns.medium + ';');
}
if (this._columns.small) {
cardStyles.push('--days-columns-sm: ' + this._columns.small + ';');
}
if (this._columns.extraSmall) {
cardStyles.push('--days-columns-xs: ' + this._columns.extraSmall + ';');
}

return html`
<ha-card class="${cardClasses.join(' ')}" style="--event-background-color: ${this._eventBackground}">
<ha-card class="${cardClasses.join(' ')}" style="${cardStyles.join(' ')}">
<div class="card-content">
${this._error ?
html`<ha-alert alert-type="error">${this._error}</ha-alert>` :
Expand Down
35 changes: 21 additions & 14 deletions src/card.styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export default css`
ha-card {
--legend-spacing: 15px;
--legend-dot-size: 10px;
--days-columns: 7;
--days-spacing: 15px;
--day-date-number-font-size: 3.5em;
--day-date-number-line-height: 1.2em;
Expand Down Expand Up @@ -88,7 +89,7 @@ export default css`
.container .day {
position: relative;
width: calc((100% - 6 * var(--days-spacing)) / 7);
width: calc((100% - (var(--days-columns) - 1) * var(--days-spacing)) / var(--days-columns));
margin: 0 0 var(--days-spacing) 0;
}
Expand Down Expand Up @@ -236,33 +237,39 @@ export default css`
}
}
@container weekplanner (width <= 1920px) {
ha-card .container .day {
--days-columns: var(--days-columns-lg, 7);
}
ha-card.compact .container .day {
--days-columns: var(--days-columns-lg, 7);
}
}
@container weekplanner (width <= 1280px) {
.container .day {
width: calc((100% - 4 * var(--days-spacing)) / 5);
ha-card .container .day {
--days-columns: var(--days-columns-md, 5);
}
ha-card.compact .container .day {
width: calc((100% - 6 * var(--days-spacing)) / 7);
--days-columns: var(--days-columns-md, 7);
}
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3);
ha-card .container .day {
--days-columns: var(--days-columns-sm, 3);
}
ha-card.compact .container .day {
width: calc((100% - 3 * var(--days-spacing)) / 4);
--days-columns: var(--days-columns-sm, 4);
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100%;
ha-card .container .day {
--days-columns: var(--days-columns-xs, 1);
}
ha-card.compact .container .day {
width: calc((100% - var(--days-spacing)) / 2);
--days-columns: var(--days-columns-xs, 2);
}
}
`;
11 changes: 11 additions & 0 deletions src/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,17 @@ export class WeekPlannerCardEditor extends LitElement {
${this.addBooleanField('weather.useTwiceDaily', 'Use twice daily if entity does not support daily')}
`
)}
${this.addExpansionPanel(
'Override columns',
html`
<p>The number of columns is based on the size of the card.</p>
${this.addTextField('columns.extraLarge', 'Extra large (>= 1920px)', 'number')}
${this.addTextField('columns.large', 'Large (>= 1280px)', 'number')}
${this.addTextField('columns.medium', 'Medium (>= 1024px)', 'number')}
${this.addTextField('columns.small', 'Small (>= 640px)', 'number')}
${this.addTextField('columns.extraSmall', 'Extra small (< 640px)', 'number')}
`
)}
${this.addExpansionPanel(
'Appearance',
html`
Expand Down

0 comments on commit 5261448

Please sign in to comment.