From 1ebc4d48f46ecfb74c0ee28bf939fb10cecd39b5 Mon Sep 17 00:00:00 2001 From: Valentin Reynoso Date: Thu, 25 Jan 2024 12:53:10 -0300 Subject: [PATCH] fix: fix responsiveness on mobile resolutions Close #3 --- .../vaadin/addons/dayofweekselector/DayOfWeekSelector.java | 3 +++ .../frontend/styles/fc-days-of-week-selector-styles.css | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java b/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java index ce8b2e6..593720c 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java +++ b/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java @@ -81,6 +81,7 @@ private void setState(boolean state) { */ public DayOfWeekSelector() { getStyle().set("padding", "var(--lumo-space-m)"); + this.setWidthFull(); buttonsLayout = new HorizontalLayout(); buttonsLayout.add(new DayOfWeekButton(DayOfWeek.SUNDAY, "S")); @@ -91,6 +92,8 @@ public DayOfWeekSelector() { buttonsLayout.add(new DayOfWeekButton(DayOfWeek.FRIDAY, "F")); buttonsLayout.add(new DayOfWeekButton(DayOfWeek.SATURDAY, "S")); + buttonsLayout.setClassName("fc-days-of-week-selector-buttons-layout"); + getButtons().forEach(button -> button.addClickListener(ev -> updateValue())); add(buttonsLayout); clear(); diff --git a/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css b/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css index 5578a53..0979d3d 100644 --- a/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css +++ b/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css @@ -43,3 +43,10 @@ vaadin-custom-field[readonly] vaadin-button.fc-days-of-week-selector-button[disa vaadin-custom-field[readonly] vaadin-button.fc-days-of-week-selector-button[theme~='primary'][disabled] { border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct)); } + +vaadin-horizontal-layout.fc-days-of-week-selector-buttons-layout { + width: 100%; + justify-content: center; + flex-wrap: wrap; + padding: 0 10px; +}