Größe der Beschreibungs-/Willkommensbox definieren

msteudtn commented 3 years ago

Hintergrund

Im Ticket #13 wurde angeregt, den Kasten (am Anfang) mit der Beschreibung von height: 60vh auf padding: 5% 0 (oder ähnliches) zu ändern.
betrifft: INDEX.HTML <section id="sectionDescription">

Vorteile

Wenn der Mat-o-Wahl per iframe (mit adaptiver Größe) eingebunden wird, springt die Größe des iframe am Anfang noch etwas. Mit padding statt height ist die Höhe gleich "richtig".

Nachteile

Der Start-Button unter der Box ("Los geht's") ist bei viel Text in der mobilen Ansicht nicht sofort sichtbar. Stattdessen muss man erst scrollen.

fenglisch commented 3 years ago

Folgendermaßen hat man the best of both worlds :

#sectionDescription {
   padding: 5% 2%;
   max-height: 60vh;
   scrollbar-width: thin;
}

Sieht auch mobil und im iframe gut aus.

msteudtn commented 3 years ago

mit der vorgeschlagenen Einstellung "kleben" die Buttons "Impressum" und "Neu starten" bei mir über dem Beschreibungstext.

grafik

Ich habe deshalb die Optionen zum Text-Abschneiden wieder reingenommen (weil ich denke, dass die Style-Angaben in der ÌNDEX.HTML dann rausfliegen können. :) Vermutlich waren sie in deinen Tests noch drin.) text-overflow: clip; overflow: auto;

Nun verschwindet aber auch der "Los geht's"-Knopf unter dem Text und man müsste erst scrollen. Ich glaube, dass viele Nutzer (ähnlich wie bei AGB :( ) einfach nur loslegen wollen.

Deshalb habe ich das CSS im nächsten Schritt wieder "nur" auf den umfassenden DIV gesetzt, der gleich nach #sectionDescription kommt. Weil der DIV keine ID hat, wird er per CSS "gesucht". (der erste DIV danach)

#sectionDescription > div:nth-of-type(1)

Dann erscheint der "Los geht's"-Button unter dem (zu scrollenden) Text.

Bei mir sieht es dann so aus ...

grafik

... und das CSS hat diese fertige Form:

#sectionDescription > div:nth-of-type(1) {
   padding: 5% 2%;
   max-height: 60vh;
   scrollbar-width: thin;
   text-overflow: clip; overflow: auto;
   margin-top: 1.0em;
}

... und weil ich gleich dabei war, habe ich den Abstand oben (1.0 em) auch wieder eingefügt.

fenglisch commented 3 years ago

Bei dem Selektor habe mich vertan, als ich das von inline übertragen habe. Natürlich muss #sectionDescription > div:first-of-type (oder ...nth-of-type(1)) sein und nicht #sectionDescription angesteuert werden. Und die anderen properties müssen natürlich auch bleiben, also text-overflow: clip; overflow: auto;, ich hatte die nur weggelassen, weil sie schon klar sind.

Also mein richtiger Selektor, mit dem dasselbe Ergebnis erzielt wird, sieht so aus:

#sectionDescription > div:first-of-type {
    padding: 5% 2%;
    text-overflow: clip;
    overflow: auto;
    margin-top: 1.0em;
    max-height: 60vh;
}

Damit funktioniert es auch gut im iframe, das habe ich mit der Variante height: 60vh nicht nochmal getestet.

msteudtn commented 3 years ago

So, ist jetzt in #38 drin. :)

msteudtn / Mat-O-Wahl