+
{{ state.sp.nomi.guest }}
+
@@ -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 {