Bei mir auf dem Mobiltelefon „tanzen“ die Symbole (Helligkeit, Batterie, Lautstärke) hin und her. Dies bewirkt, dass nicht mehr beide Symbole und der Schieberegler auf einer Zeile sind. Saß habe ich auch schon bei Screenshots von anderen Usern gesehen.
Ich hab schon im Code gesucht, die Buttons und Symbole habe ich gefunden, leider verstehe ich nicht wie die Position definiert wird. Kann mir da bitte jemand auf die Sprünge helfen. Gibt es eine Software um das Userinterface zu erstellen? Ich tut mich gerade schwer, wie ich auch eine Änderung begutachten kann.
Das Internet weiß alles, nur leider ich scheinbar nicht die richtigen Suchbegriffe - irgendwie komme ich da auch nicht weiter.
leider verstehe ich nicht wie die Position definiert wird.
Das Stichwort ist HTML/CSS,. CSS = cascading-style-sheets und damit definiert man das visuelle Aussehen und u.a. auch die Ausrichtung von Elementen innerhalb einer HTML-Webseite. Einstieg hier.
Ja wir suchen aktuell einen „HTML/CSS Superman-Papa“ für die Verbesserung der bestehende Weboberfläche:
Jemand der das etwas schöner machen kann, gern auch Neulinge hier die sich einbringen möchten. Etwas Sinn für Design, grundlegende HTML/CSS/Bootstrap 4 Kenntnisse + eine Prise responsive für Mobile & das ist in einer halben Stunde erledigt.
Einstiegspunkt ist management.html , hier ist Alles zusammen, HTML, CSS & Javascript. Einfach ändern, speichern & neu flashen & schauen was passiert.
Rumspielen kann man im Browser: Rechtsklick auf das Element, dann „Element untersuchen“ und dann fröhlich ausprobieren. Ist alles bei neu laden der Seite weg.
So, ich habe jetzt an der Steuerungsseite etwas rumgespielt. Ich weiß, dass ist jetzt noch kein großer wurf aber mühsam ernährt such das Eichhörnchen : )
Die Steuerungsseitw sieht jetzt bei mir (auf dem Mobiltelefon) so aus
Die Lautstärkesymbole sind (auf meinem Handy) jetzt auf einer Zeile.
Das Coverbild hat einen Rahmen und Schatten bekommen
Der Slider hat einen Schatten bekommen
Die Überschriften „Lautstärke“ und „Modifikation“ habe ich entfernt
Der Fortschrittsbalken ist jetzt unterm Cover
Über Modifikation ist eine Linie zur Abtrennung.
Die Buttons erster Titel und letzter Titel habe ich durch Vor und Zurückspulen ersetzt.
Viele Sachen wurden zentriert
Das sind zum Großteil persönliche Befinden. Falls jemand Interesse hat, dann kann ich die Änderungen hier rein stellen.
Im allgemeinen wollte ich die Seite grundlegender Ändern aber da muss ich mich noch etwas aufschlauen, obwohl die Programmierung auf mich wirklich nicht sexy wirkt.
Ziel wäre das Responsive zu gestalten (zb auf dem Desktop das Cover neben den Bedienlementen) und den Oberen Bereich zu verschlanken. Der blaue Bereich und die Karteireiter nehmen auf meinem Telefon 30% ein. Ich denke man kommt mit drei Karteireitern aus „Steuerung“ „Zuweisungen“ „Einstellungen“
Das ist alles css.
Die Codeänderung ist nicht sonderlich viel. Ein Punkt ist vermutlich nicht sonderlich elegant gelöst.
Ich erkläre meine Änderungen die Tage noch mal genau. Ich muss bloß mal überlegen wie man das am Besten gegenüberstellt. Dann kannst du oder Torsten schauen, was ihr übernehmen wollt.
Besonders die Änderung der äußeren Tasten. Ich habe „springe zum ersten/letzen Titel“ selten verwendet. Aber im Hörspiel benötigte ich öfters „ein paar Sekunden zurück“.Das geht zwar auch über den Fortschrittsbalken - ich empfand das jedoch auf dem Handy als unkomfortable. Torsten hatte bei der Implementierung der Sprungtasten sicherlich ein Nutzungsszenario vor Augen bzw. der ein oder andere hat diese sicherlich lieb gewonnen.
Also ganz allg. ist es so, dass man am Anfang innerhalb des Titels noch nicht springen konnte. Das kam erst später. Die Implementierung im Webinterface hat vermutlich @tueddy gemacht und ich war daran gar nicht beteiligt .
Aber da man tatsächlich auch über den Fortschrittsbalken schon springen kann, wäre ich auch eher für das Verhalten, wie es bisher war. Aber dazu können sich gerne auch andere Personen äußern; ich will das nicht alleine bestimmen.
Dass man die Position zu ungenau einstellen kann (insbesondere wenn das ganze Hörspiel in einer Datei ist und der Bildschirm klein)?
Dass es manchmal schwer ist den Fortschrittsbalken so zu treffen, dass er reagiert?
Dass man die Position (so wie bei anderen Playern) nicht ziehen und loslassen kann, und beim Ziehen bereits die Zeit angezeigt wird, zu der beim Loslassen gesprungen werden würde?
oder was ganz anderes?
Manche der Punkte können vielleicht noch gelöst werden, sodass es komfortabler wird.
Die Tasten „ein paar Sekunden vor/zurück“ sind natürlich trotzdem nett, so wie aber auch die Taste „springe zum ersten Titel“, insbesondere so lange wir dazu keine andere Möglichkeit bereitstellen, wie z.B. die Playlist anzuzeigen (und die Titel klickbar zu machen).
Die Taste „springe zum letzten Titel“ habe ich zwar zu Debugzwecken manchmal verwendet, im Alltagseinsatz fürs Kind ist sie nicht so unbedingt nötig, aber aus Symmetriezwecken irgendwie doch wieder
Mein Szenario ist:
Man hört ein Hörspiel mit den Kindern an Schlüsselstellen quarkt immer einer rein und da sind 30Sek zurück ganz gut.
Am Rechner ist das Bedienen des Fortschrittsbalken in Ordnung aber meine Wurstfinger und ein 5cm breiter Balken welcher im Worst Case 50min entspricht…naja.
Am Liebsten hätte ich ja Zurückspulen und zurückspringen behalten und Vorwärts rausgehauen aber dann schlägt die Symmetriemacke zu.
Aber es ist noch nicht aller Tage Abend. Möglich ist noch viel (vermute ich). Ideen, was man versuchen kann habe ich einige aber das Korreliert momentan nicht mit meinem Skills - ehrlich gesagt ist meine erste Berührung mit CSS. Bei Udemy gibt es Einsteigerkurse, die klingen schon interessant - mich schrecken nur gerade die 36Stunden Dauer ab Kommt Zeit kommt Rat.
Hy @sfields
es gibt bestimmt bessere Methoden das darzustellen aber ich hoffe es ist verständlich.
Ich habe seit Dezember nicht weiter dran gearbeitet, da ich gemerkt habe, dass mir noch viele Grundlagen zu css fehlen. Mein Ergebnis ist auch noch weit weg von einem großen Wurf oder Rocket Science
Wenn man die Buttons ändert, dann benötigt man noch entsprechende Einträge in der „de.json“, „en.json“ „fr.json“ für das Mouseover.
Das ist meine Management.html
als Textdatei gespeichert, damit ich die hochladen kann.
Die unveränderte Version sieht auf dem Desktop gut aus aber auf dem Mobiltelefon hat mich das scrollen genervt. Vielleicht bin ich auch der Einzige, der das auf dem Mobiltelefon nutzt aber wenn die Lager 50:50 (Desktop : Mobiltelefon) sind, dann werden wir wohl tendenziell nicht um ein Responsive Design herumkommen. Der Entwurf von @sonovice sah schon sehr vielversprechend aus. Leider hatte er keine Zeit mehr, das weiterzuführen.
Du sprichst von einem Entwurf von @sonovice. Könntest du den noch hier verlinken? Wusste gar nicht, dass es da noch mehr gibt. Und dann wäre es hier auch vollständig, wenn irgendwann jemand weiter dran arbeiten will.
Als die ersten Entwürfe für ein neues Webinterface entstanden sind, wurde noch sehr viel mit dem Webserver-Templating gearbeitet.
Inzwischen wurde das rausgeschmissen und @tueddy hat eine umfangreiche HTTP/JSON API umgesetzt.
Die Hoffnung ist, dass neue Frontends wesentlich einfacher erstellt und gepflegt werden können. Theoretisch könnte man die Webseite nun komplett austauschen, ohne den C++ Code anzufassen.
Ich finde das aktuelle Frontend aber eigentlich auch ganz hübsch
.
