diff --git a/src/components/DisplayPage.vue b/src/components/DisplayPage.vue index e1ab84b..baba1fe 100644 --- a/src/components/DisplayPage.vue +++ b/src/components/DisplayPage.vue @@ -90,15 +90,17 @@
-
- {{ state.sp.nomi.home }} -
+ {{ state.sp.nomi.home }} +
+
{{ String(h) }}
-
- {{ state.sp.nomi.guest }} -
+ {{ state.sp.nomi.guest }} +
+
{{ String(h) }}
@@ -190,6 +192,24 @@ export default { this.ws = null } }, + watch: { + 'state.sp.striscia.home': { + deep: true, + handler() { + this.$nextTick(() => { + if (this.$refs.homeItems) this.$refs.homeItems.scrollLeft = this.$refs.homeItems.scrollWidth + }) + } + }, + 'state.sp.striscia.guest': { + deep: true, + handler() { + this.$nextTick(() => { + if (this.$refs.guestItems) this.$refs.guestItems.scrollLeft = this.$refs.guestItems.scrollWidth + }) + } + } + }, methods: { isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) diff --git a/src/style.css b/src/style.css index 9ee314f..d4325ee 100644 --- a/src/style.css +++ b/src/style.css @@ -135,20 +135,35 @@ button:focus-visible { color: white } .striscia { - position:fixed; - text-align: right; + position: fixed; bottom: 50px; + left: 10px; right: 10px; - margin-left: -10000px; + display: grid; + grid-template-columns: max-content 1fr; + row-gap: 2px; + align-items: center; +} +.striscia-nome { + white-space: nowrap; + padding-right: 6px; +} +.striscia-items { + display: flex; + flex-wrap: nowrap; + overflow: hidden; } .striscia .item { width: 25px; + min-width: 25px; text-align: center; font-weight: bold; - display: inline-block; + flex-shrink: 0; + border-radius: 5px; +} +.striscia .item:not(.item-vuoto) { background-color: rgb(206, 247, 3); color: blue; - border-radius: 5px; } .campo-config {