neues Onepage-Template: fhs-sectionsOP - Tester?

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
lck
Posts: 2467
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by lck » Sat Oct 02, 2021 4:55 pm

frase wrote:
Fri Oct 01, 2021 11:33 am
Musik geht ins Ohr - Webdesign geht manchmal ins Auge.

Hier kommt ein Vorschlag für ein neues Onepage-Template.
Interessenten und Spezialisten sollten es vielleicht mal auf Herz und Nieren püfen. Von innen und außen.

Preview: Demo und Download
Sehr schön Frank. Wieder - wie immer - gute saubere Arbeit! Super Präsentation, tolles Design, ausführliche Erklärung und Beispiele!
frase wrote:
Fri Oct 01, 2021 11:33 am
@Ludwig
Schau dir doch bitte mal die font-size-Deklaration für die Spotlight-Überschrift über dem ersten Bild an.
Das soll dafür sorgen, dass sich die Schriftgröße ohne @media-Abfrage anpasst.
Ja danke, das kannte ich bereits und habe dies auch schon irgendwo in meinen Templates verwendet.
„Fluid Typography“ das wird die Zukunft sein, bei all den Geräten dies es gibt. Macht es uns Template-Machern schon etwas leichter. Es gibt da sehr viele Ansätze und Ideen. Einen guten „Fluid font size calculator“ gibt's zum Beispiel hier und nebenher noch etliche andere Tools.

Danke für deine Arbeit!
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Sat Oct 02, 2021 5:58 pm

Tata wrote:
Sat Oct 02, 2021 4:32 pm
Ich verstehe nur nicht, wieso funktioniert dies nicht unter Responsivit't mit:
...
Hier wollte ich den "blank-block" etwa verkurzen, um den Rest der Seite näher hochzuschieben.
Du hast zwar den "blank-block" in der Größe verändert - der "swiper-container SW-1" bleibt aber immer auf 100vh.
In deinem Swiper-Set in der stylesheet.php müsste also irgendetwas ähnliches stehen, wie z.B.

Code: Select all

.<?=$sw_name;?> .swiper-wrapper {
    width: 100vw;
    height: calc(100vh - 100px);
}
Das gezeigte Beispiel berücksichtigt hier noch einen Header, der genau 100px hoch ist.
Das musst du dann noch um die @media-Angaben erweitern.
"blank-block" sollte sich einfach in der Höhe anpassen (so sollte es theoretisch sein).

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Sat Oct 02, 2021 6:02 pm

lck wrote:
Sat Oct 02, 2021 4:55 pm
Danke für deine Arbeit!
Ich habe zu danken, für deine Aufmerksamkeit und Zeit!

Mich interessiert eben auch, ob das Template einigermaßen sinnvoll zu bedienen ist.
Ich selbst kann das gar nicht beurteilen. Ich hab's gemacht - für mich ist das (beinahe) simple.
Deshalb sind Rückmeldungen eben wichtig.

Tata
Posts: 3439
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by Tata » Sat Oct 02, 2021 6:49 pm

frase wrote:
Sat Oct 02, 2021 5:58 pm
"blank-block" sollte sich einfach in der Höhe anpassen (so sollte es theoretisch sein).
Ich meine, dass es etwa so funtionieren sollte:
1. es ist ein Bild im Swiper, das sich der Breite anpasst, die Höhe ist automatisch kalkuliert.
2. der "blank-block" sollte dann diese neue Höhe übernehmen.
Die "vh" kann hier wohl nicht funktionieren (besonder nicht mit Mobiles, die meistens ein Ratio B:H etwa 1:3, oder auch mehr haben).
Es könnte aber möglich sein, falls alle benutzte Bilder die selbe Dimensionen haben. Dann könnte die Höhe in @media kalkuliert werden.
Das würde aber ein Script verlangen, der die Dimensionen bei jedem Gerät liest und kalkuliert. Wie das aber in @media einzubauen, ist mir absolut nicht bekannt.
Oder eben irgendwie einzustellen, dass der Rest der Seite sich immer glach nach dem "blank-block" einklebt. Man kann nicht wissen, wie hoch der Seitenheader seinn soll und er bleibt auch nicht immer z.B. 100px hoch sein. Anders gemeint - wird generell ein Bild von 1600x1200px benutzt, wird die Höhe mit @media screen and(width:800px) 600px. Wie sollte es aber mit @media screen and(max-width:800px) eingestellt?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Sun Oct 03, 2021 6:51 am

Tata wrote:
Sat Oct 02, 2021 6:49 pm
Ich meine, dass es etwa so funtionieren sollte:
...
Eigentlich gehört das alles nicht hierher :?
"blank-block" passt sich automatisch in der Höhe an den Swiper an.
"swiper-wrapper" bekommt 100vh als Standard.
Ab z.B. @media only screen and (max-width: 800px) bekommt der "swiper-wrapper" 90vh.
Ab @media only screen and (max-width: 600px) bekommt der "swiper-wrapper" 80vh.
usw.
Wenn du die Höhe des Headers brücksichtigen willst - und wenn dieser keine feste Höhe hat - dann kannst du das nur per Javascript machen.
Im Template fhs-simple-2019 findest du in der script.js die Funktion "mobNavHeight()".
Die kannst du als Vorlage verwenden, um die aktuelle Höhe des Headers zu berechnen und die Höhe des "swiper-wrapper" zu bestimmen.

Tata
Posts: 3439
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by Tata » Sun Oct 03, 2021 7:56 am

Ich meine es anders gelösst zu haben. Ich habe die Höhe von "blank-block" in "vw" gegeben:

Code: Select all

div.blank-block{
  	position: relative;
	background-size: 100% cover;
	height: 70vw;
	width: 100%;
  	}
Ich bin nicht sicher, ob es "gramatisch" überhaupt richtig ist, aber es scheint zu funktionieren : https://cmsimple.sk/testtest
Nichts in swiper css geändert, kein Script benutzt. Nach meiner Logik wird die Höhe immer 70% der Breite. Braucht noch tiefer testen.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Sun Oct 03, 2021 8:03 am

Tata wrote:
Sun Oct 03, 2021 7:56 am
Ich meine es anders gelösst zu haben.
Na super - wenn es funktioniert, wie du es dir wünschst.

Tata
Posts: 3439
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by Tata » Sun Oct 03, 2021 9:53 am

Naja, es ist nicht perfekt. Es ist aber viel näher der ursprünglichen Vorstellung.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Tue Oct 05, 2021 4:43 pm

Hi,
es gibt jetzt noch eine neue Vorschau-Version mit CMSimple_XH 1.7.5!

Im Download habe ich mal TinyMCE 5 als Standard-Editor mit einer eigenen Init-Datei für die Animationen aktiviert. (Diese Init-Datei liefert ein beinahe gleiches Menü im Editor, wie in TinyMCE 4.)

Ich hoffe, dass ich bei der Anhebung auf die neue XH-Version nichts kaputt gemacht habe. Wen's interessiert - mal reinschauen!

knollsen
Posts: 382
Joined: Wed Nov 06, 2013 2:28 pm

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by knollsen » Wed Oct 06, 2021 3:14 pm

frase wrote:
Sat Oct 02, 2021 7:32 am
Schaunmermal.
Ab dem TinyMCE 5 müssen die Init-Dateien im json-Format vorliegen.
Da musst du bei deinem Plugin auch was tun.
Ich habe versucht, eine solche Datei zu erzeugen - ohne Erfolg :oops:
Ja mach ich, aber soweit bin ich noch nicht. Die 1.7.4 ist erstmal php8 tauglich mit kleinen mod. Ich hab noch nicht mal 1.7.5 getestet. :o
Vielen Dank für den Tip!

Post Reply