tkrebs / ep3-bs

Online booking system for courts
http://bs.hbsys.de/
MIT License
183 stars 108 forks source link

Horizontaler Scrollbalken möglich? #427

Open speedy-10 opened 3 years ago

speedy-10 commented 3 years ago

Hallo zusammen, wir wollten das Programm zur Organisation der Terminvergabe für einen Elternsprechtag nutzen. Nun zeigt sich, dass sich bei vielen Spalten einfach die Spaltenbreite verkleinert. Ist es möglich einen Scrollbalken zu aktivieren bzw. ist das Programm überhaupt geeignet, ca. 80 Spalten nebeneinander zu haben? Weiterhin hat sich beim alphabetischen Eingeben der Kürzel die Reihenfolge verschoben, was bei den ersten Eingaben noch einwandfrei funktionierte.

VG

Bildschirmfoto von 2021-01-07 15-38-48

tkrebs commented 3 years ago

80 Spalten sind schon viel für das Buchungssystem, rein technisch müsste das aber funktionieren.

Die Oberfläche kennt standardmäßig keine Scrollfunktion und ist dementsprechend auch nicht darauf optimiert. Mit etwas CSS in der Datei public/css-client/default.css lässt sich das aber provisorisch nachrüsten, z. B.:

#calendar {
    width: 4000px;
}

Für eine gute Usability sind aber sicherlich noch weitere Anpassungen nötig.

speedy-10 commented 3 years ago

Bisher sieht die o.g. Datei so aus. Ein Einfügen hat nichts am Layout geändert.

h2, h3, h4, h5, h6 { color: #547B97; }

/* Layout - Calendar */

a.cc-event:link,
a.cc-event:visited { background-color: #975459; }
a.cc-event:hover { background-color: #6A3333; }

a.cc-own:link,
a.cc-own:visited { background-color: #8BB243; }
a.cc-own:hover { background-color: #5F8024; }

a.cc-single:link,
a.cc-single:visited { background-color: #808D96; }
a.cc-single:hover { background-color: #4C5359; }

a.cc-multiple:link,
a.cc-multiple:visited { background-color: #547B97; }
a.cc-multiple:hover { background-color: #334F6A; }

a.cc-conflict:link,
a.cc-conflict:visited { background-color: #334F6A; }
a.cc-conflict:hover { background-color: #334F6A; }

/* Layout - Alternate Calendar */

.cc-range-member a {
    border-color: #547B97 !important;
    background-color: #547B97 !important;
}

/* General Purpose - Classes */

.my-highlight { color: #5F8024; }

.badge { background-color: #547B97; }
.badge-label { color: #547B97; }

/* Links */

a:link, a:visited { color: #334F6A; }