Responsive Design auf Smartphones bei mehr als 4 Plätzen?

[cbits68]

Hallo, wir planen im kommenden Jahr 2 weitere Plätze zu bauen. Nun habe ich schon mal getestet, ob das dann auf den Endgeräten (Clubhausdisplay, Smartphones, ...) auch noch vernünftig angezeigt wird. Leider ist das auf Smartphone nicht der Fall, da die Darstellung von einem Tag bei 6 Plätzen dann die Anzeige sprengt. Hat jemand von Euch ähnliche Probleme und vielleicht schon Anpassungen durchgeführt,

Gruß CBITS

[tkrebs]

Man kann die mobile Darstellung mit eigenem CSS optimieren, z. B. am Ende der Datei public/css-client/default.css:

@media (max-width: 1024px) {
    #calendar {
        overflow: scroll;
    }
}

@media (max-width: 512px) {
    .calendar-date-table.full-width {
        min-width: 800px;
    }
}

[DanielM1991]

Vielen Dank für den Tipp, klappt auf Anhieb!

Allerdings scheinen Veranstaltungen anders gehandhabt zu werden als Reservierungsfelder. Ich habe dazu ein paar Screenshots von einem Smartphone (iPhone 8) mit kleinerem (oder normalen) Bildschirm gemacht. Hier sieht man, dass die Veranstaltungen quasi am Bildschirm kleben bleiben, sobald man in der Tabelle zur Seite scrollt.

In dem Beispiel befindet sich je eine einstündige Veranstaltung von 10 - 11 Uhr und 19 - 20 Uhr. Auch wenn eine Veranstaltung auf nur einem Platz stattfindet, gleiches Verhalten.

Edit: Wenn ich den Code-Schnipsel (siehe oben) weglasse, tritt das Verhalten nicht auf, habe aber wieder mein gesprengtes Layout.

[cbits68]

Bei mir sieht es ähnlich aus :-( ich kann zwar jetzt auf dem Smartphone (Horizontalansicht) den Kalender über die 6 Plätze "scrollen) aber Veranstaltungen werden offenbar anders behandelt als die "normalen" Buchungen und überlagern die Kalenderansicht. Ich versuche mal über den generierten html code zu ermitteln, wo das Layout für Veranstaltungen her kommt.

[mjmpeace]

Ich habe unser Außenplatz-Stecksystem vor abzulösen. Ein Testsystem läuft. Da wir 9 Plätze haben, ist die Darstellung am Handy aber Suboptimal. Ich bekomme es aber trotz hier gefundener hinweise nicht besser hin. Wer kann helfen. Screenshots anbei. Die ersten 2 Bilder sind nach meiner Admin Anmeldung am Handy entstanden. Die Bilder Nr. 3 und vier nach Abmeldung. Irgendwie sind die Anweisung in den CSS-Dateien noch nicht so ganz passend. Bild 1 NACH Anmeldung ADMIN Bild 2 nach Abmeldung Admin Bild 3 vor Anmeldung irgend eines Benutzers Bild 4 nach Anmeldung Normaler Benutzer

Ich weiß leider nicht wo ich da noch nachbessern muss. Wer kann helfen?

[tkrebs]

Nachfolgend ein paar responsive Anpassungen die ich kürzlich bei unserem Verein vorgenommen habe. Auch bei weitem nicht optimal, aber als Übergangslösung reicht es:

@media (max-width: 1024px) {
    #label-client {
        margin-top: 16px;
    }

    #branding,
    #topbar-contact,
    #topbar-infos,
    #topbar-phone,
    #topbar-separator,
    #topbar > div:not(#topbar-contact):not(#topbar-separator) {
        display: none !important;
    }

    #calendar {
        overflow: scroll;
    }
}

@media (max-width: 512px) {
    #label-client,
    #label-service {
        text-align: left;
        text-indent: 91px;
    }

    #label-service {
        font-size: 24px;
    }
}

@media (max-width: 500px) {
    .calendar-date-row > td {
        text-align: left;
        padding-left: 1rem;
    }

    .calendar-date-table.full-width {
        min-width: 800px;
    }
}

[welsi13]

Ich habe das Overlay von Events in CSS mittels AttributeSelector ausgeblendet:

a[id*="-overlay-"] { visibility: hidden; }

Ist nicht die optimale Lösung, hab aber nicht gefunden wo das Overlay generiert wird. Vielleicht hilft es jemandem.

[cbits68]

Wo genau hast Du denn die Zeile eingetragen? public/css-client/default.css ?

[welsi13]

Wo genau hast Du denn die Zeile eingetragen? public/css-client/default.css ?

Ja genau dort.

[ArnoNymeier]

Hallo zusammen,

da ich grade das System teste und auch eine ganze Menge Plätze anzeigen möchte habe ich die mobile Ansicht angepasst.

In der public/css-client/default.css den folgenden Eintrag setzen:

@media (max-width: 1024px) {
	.panel {
		background: #ffffff;
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
       }
}

Die Ansicht wird so der verwendeten Displaygröße angepasst, der nicht sichtbare Teil des Kalenders lässt sich horizental scrollen, also im Viewport hin und her schieben.

Hoffe das hilft vielleicht dem ein oder anderen :-)

[QuaryDo]

Hallo Zusammen, ich habe unser System super am laufen und schon viele Änderungen mit der Hilfe einiger Kommentare hier umsetzen können. Nun bin ich an einem weiteren Vorhaben. Wir nutzen das System zur Raumverwaltung mehrerer Räumen. Nun würde ich gerne an jeden Raum ein Tablet hängen, auf dem nur der eine Raum und der heutige Tag angezeigt wird. Das hab ich auch schon hinbekommen. Über das Autoreload Skript aktualisiert er sich auch regelmäßig und mit Hilfe der Kiosk-User funktioniert das echt gut. Auch habe ich eine Squareübergabe programmiert so das nur der jeweilige Raum angezeigt wird. Nun zu meinem Problem: Ich würde gerne auf den Tablets das Layout dahingehend ändern, das der ganze Header ausgeblendet wird, also kein Logo, Adresse oder ähnliches angezeigt wird. Ebenso bräuchte ich oben keine Toolbar anzeige, nur eine Login-Möglichkeit. Also kurzgesagt: Ich suche eine Möglichkeit das nur die reine "Kalender-Tabelle" angezeigt wird... Hat da jemand eine Idee wie ich das umsetzen könnte?