New style for the forum available (now responsive!) - Air3

Negreheb · 2019-07-22T18:51:31.000Z

*Hello, *

comments welcome in english as well. If you have issues, it is also possible to drop them at GitHub.

Greetings

Servus,

es heisst doch immer, wen wem was nicht passt, soll man es besser machen. Ich hab das mal versucht: es gibt nun ein neues Theme für’s Forum und das ist jetzt auch responsive. Und da sich Leute ungern an neues gewohnen, ist es auch recht nah am alten Forumstyle dabei, weswegen es auch Air3 heisst (Original ist “Air” und “Air 2” gabs schon…).

Probiert ihn gern aus, erwartet nicht zu viel und ihr könnt mir gern hier reinschreiben, wenn ihr wo Fehler findet oder Verbesserungsvorschläge habt. Ich kann dann schauen, was ich noch machen kann mit HTML und CSS.

Besten Dank natürlich auch Tom Hughes, der den Style dann überhaupt eingefügt hat. Ich habs erstmal hier announced, in kleinem Testrahmen, so zu sagen. Wenn der Style funktioniert und anklang findet, würde ich vielleicht einen der Administratoren anhauen, ob die den dann als default aktivieren wollen, aber bis dahin geht sicher noch ein bisschen Zeit ins Land

Have fun and happy bughunting? Oder so?

Wie aktivieren
Einfach unter “Profile” - “Display” - “Air3” auswählen, “Save” (oder “Speichern”) drücken, die Seite ladet neu und schon ist der neue Style aktiv, der auch am Handy lesbar ist.

Rückmeldung
Hier im Thread oder unter GitHub

Screenshots
Jeweils links alt, rechts neu: https://imgur.com/a/p9oPCeO

Smartphone

Desktop

EDIT: Bilder eingefügt und ein bisschen eingefügt.

Gppes · 2019-07-22T22:29:50.000Z

Hallo,

Super Sache, dass das jetzt mit dem Handy besser gehen soll…

Ich habe das jetzt mal am PC eingestellt. Sollte ich mit dem normalen Browser auch irgend etwas neues bemerken?

Lg, Gppes

Luzandro · 2019-07-23T05:05:37.000Z

Tolle Sache, wurde auch schon in der vorigen Wochennotiz vorgestellt (noch unter anderem Namen). Habe allerdings noch nicht viel getestet, da ich nicht durchgehend eingeloggt bin.

Gppes:

Ich habe das jetzt mal am PC eingestellt. Sollte ich mit dem normalen Browser auch irgend etwas neues bemerken?

Ja, es geht jetzt über die gesamte Breite, was man aber mMn. noch ändern sollte und für .pun wieder

max-width: 1070px;
margin: 0 auto;

hinzufügen sollte.
Und es skaliert natürlich schöner, wenn du das Fenster verkleinerst

R0bst3r · 2019-07-23T08:57:17.000Z

Ich finds gut, besonders für das Smartphone scheint er auf den ersten Blick besser geeignet. Danke!

Gppes · 2019-07-23T09:01:10.000Z

Jo, am Handy echt super!

Negreheb · 2019-07-23T09:43:36.000Z

Luzandro:

Tolle Sache, wurde auch schon in der vorigen Wochennotiz vorgestellt (noch unter anderem Namen).

Oh crap, das war nur mal zum testen zwei Styles hochgeladen, das sollte noch gar nicht so raus, genau wegen der Situation jetzt Naja, geht die Welt auch nicht unter. danke für die Info und ich werde die Wochennotiz noch informieren. Da ich den Style jetzt gemacht habe, kann ich einfach Änderungen vornehmen und der Name bleibt gleich.

Luzandro:

Ja, es geht jetzt über die gesamte Breite, was man aber mMn. noch ändern sollte und für .pun wieder
max-width: 1070px;
margin: 0 auto;
hinzufügen sollte.

Gerade noch einmal angeschaut, ich denke, damit hast du recht. Ist notiert und ich warte erstmal ab, kommt aber wieder rein. Ein bisschen rumgelesen https://graphicdesign.stackexchange.com/questions/30731/what-width-should-i-design-for-when-creating-a-website oder https://graphicdesign.stackexchange.com/questions/30731/what-width-should-i-design-for-when-creating-a-website und ich denke, 1070px ist ein ganz guter Wert. Danke für den Input!

Ahja, und ich hab Screens hinzugefügt für einen direkten Vergleich. Links alt, rechts neu oder oben alt, unten neu.

EDIT: Wenn die Screenshots jemand nicht haben will (weil Name oder whatever) bitte einfach melden, ich mach dann andere, wo kein Nick drauf ist

Luzandro · 2019-07-23T12:11:41.000Z

Das Datum und die # sollte bei der mobile Variante noch weiter nach rechts, idealerweise gleich rechtsbündig, aber fürs erste würde auch schon helfen das padding-left des h2 von 140px auf bspw. 260px zu erhöhen:

Mammi71 · 2019-07-30T18:26:45.000Z

Ich finde das Design auch nach einigen Tagen Dauertest noch gut. Nur dass die Schaltflächen für die Formatierung der Schnellantwort über die gesamte Breite gehen empfinde ich etwas irritierend und Platzverschwendung.

Negreheb · 2019-07-31T12:50:54.000Z

Es werden gerade neue Favicons für sämtliche Seiten von OSM gesucht, ich werde also auch das Template schon mal für ein Favicon vorbereiten. Die Breite wird angepasst und die Zeit/das Datum und die Postingnummer habe ich auch bereits angepasst, Luzandro.
Ich werde mal schauen, ob ich das mit den Formatierungen für die Schnellantwort auch noch anpassen kann. Danke für die Rückmeldung

Luzandro · 2019-07-31T14:42:13.000Z

Negreheb:

Ich werde mal schauen, ob ich das mit den Formatierungen für die Schnellantwort auch noch anpassen kann.

Dazu sollte es reichen diesen Pull-Request zu akzeptieren: https://github.com/natrius/air3/pull/3

R0bst3r · 2019-07-31T17:06:55.000Z

Warum kleine Buttons, wenns die großen doch auch tun?

Luzandro · 2019-07-31T19:00:20.000Z

R0bst3r:

Warum kleine Buttons, wenns die großen doch auch tun?

warum direkt aneinander gestapelte breite Buttons, die einen beträchtlichen Teil des kleinen Displays brauchen, wenn die schmalen mit größerem Abstand besser zu treffen sind und weniger Platz brauchen?

Marek-M · 2019-07-31T19:57:30.000Z

New responsive style Air3 is very functional on narrow screens in smartphone, but in narrowest style it will be nice to have forum name next to topics. I made some screenshot modifications, where I present what I mean. It is easier to preview new posts on forum. Is it possible?

Negreheb · 2019-08-01T07:47:17.000Z

Pullrequest accepted, gefällt mir gut. ist auch Platzsparender am Smartphone und um das gehts ja effektiv dann.

@Marek-M
Ohiu, never used the “new topics” before. Will take a look into that, thank you

streckenkundler · 2019-08-06T20:20:29.000Z

Hei,

Danke,

lässt es sich so gestalten, daß ich z.B. nur auf dem Handy den responsive Style nutzen kann? Also z.B. Handy “Air3” und Tablet/Laptop zugleich z.B. “Earth”? Wenn ich derzeit auf dem Handy “Air3” einstelle, habe ich es auf anderen Geräten (Tablett, Laptop) auch, was mir nicht gefällt. Ich würde das Forum nur auf dem Handy in angepasster Ansicht haben wollen…

Sven

Negreheb · 2019-08-06T20:46:47.000Z

@Marek-M

Please take a look at the GitHub Issue - that would be something thats possible right now. I will look into removing the column and just writing it below the title, but i can’t promise that.

@streckenkundler

Servus. Ich befürchte, das gibt die Forensoftware so nicht her Phiu. Man könnte schauen, ob man Air mit den Farben usw. auf Earth ummünzen kann. Sonst hat sich, glaube ich, nichts geändert. Ich kann mir das bezeiten zwar schon mal anschauen, aber erst, wenn der Style zumindest das nächste Update hat.

Marek-M · 2019-08-07T06:24:04.000Z

Cool! It will be great if you change it! Thank you

Negreheb · 2019-08-22T12:06:03.000Z

Update:

Changed max width to 1070px for a better readability on the desktop
forum names now visible when viewing “new” threads
Increased visibility for Sticky threads, raised fontsize and added a symbol in front
date and postnumber now right aligned on cellphone

Is the increased font-size for sticky threads over the top? Espacially because its affecting closed threads as well? @Luzandro it seems like the change does not affect my phone? Care to check again?

EDIT: Vergiss es Luzandro, ich war deppert und hab deine Änderung irgendwie gelöscht. Wie auch immer. Ich packs wieder rein.

Marek-M · 2019-08-22T12:36:16.000Z

Negreheb:

Update:

forum names now visible when viewing “new” threads

Thank you very much! Now it looks exactly like I dreamed. Very good job!

Nop · 2019-11-06T07:42:23.000Z

Negreheb:

Changed max width to 1070px for a better readability on the desktop

Actually, this was a change for the worse. I enjoyed the style while it filled the whole screen, now it is no benefit over the other themes on the desktop and caused me to change back to Oxygen which I like better concerning colors and sizes.

But if there are others who don’t like a forum to use just half of the screen: You can set any theme to full screen yourself with the browser plugin stylish.