Skip to content

Consumer cards in carousel - small screen mobile view - #3637

Merged
benderl merged 1 commit into
openWB:feature_consumerfrom
Brett-S-OWB:feature_consumer
Jul 17, 2026
Merged

Consumer cards in carousel - small screen mobile view#3637
benderl merged 1 commit into
openWB:feature_consumerfrom
Brett-S-OWB:feature_consumer

Conversation

@Brett-S-OWB

Copy link
Copy Markdown
Contributor

Auf mobilen Geräten und bei kleinen Bildschirmgrößen werden die Verbraucherkarten in einem Karussell dargestellt, sodass der Benutzer zwischen ihnen seitlich wischen kann. Auf Desktop-Geräten werden die Karten hingegen umbrochen, sodass möglichst viele Karten im verfügbaren Platz angezeigt werden können.

@Brett-S-OWB
Brett-S-OWB requested a review from benderl July 7, 2026 15:53
@LKuemmel
LKuemmel force-pushed the feature_consumer branch 2 times, most recently from 4246bbf to 6702b3c Compare July 15, 2026 10:05

const consumerIds = computed(() => mqttStore.consumerIds);

const smallScreen = computed(() => $q.screen.width < 700);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In allen anderen Komponenten wird smallScreen so definiert:
const isSmallScreen = computed(() => Screen.lt.sm);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ja, das stimmt. Quasar definiert Screen.lt.sm bei 680 px. Wenn ich den Breakpoint bei 680 px lasse, werden die Karten in diesem Bereich zwar bereits untereinander dargestellt, aber noch nicht im Carousel. Bei 700 px erfolgt der Wechsel von der Reihenansicht zur Carousel-Ansicht sauber. Sonst sieht es so aus:

Bildschirmfoto vom 2026-07-16 09-14-26 Bildschirmfoto vom 2026-07-16 09-14-54

@benderl
benderl merged commit a3c4d3e into openWB:feature_consumer Jul 17, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants