Autogrid im Nachrichtenteaser-Template

[bibib]

Im Nachrichtentemplate "news_nachrichtenteaser_v2 (ORPHAN)" sind die Klassen .autogrid und .one_third direkt im Template hinterlegt. Die drei Teaserboxen stehen also nebeneinander. Auf meinem Smartphone (Nexus 5) werden die Teaserboxen aber nicht untereinander angezeigt, sondern nebeneinander gequetscht (siehe Anhang).Sollte das Autogrid nicht genau das verhindern?

*********************
Edit: hat sich erledigt, mein Fehler, kannst den Beitrag löschen.

[Tim]

Löschen brauchen wir das nicht. Vielleicht ergänzt du den Denkfehler, damit andere vielleicht mit dem gleichen Problem, eine Lösung haben.

[bibib]

Unwahrscheinlich, dass jemand über das gleiche Problem stolpert - ich war einfach schlampig und unkonzentriert.
Ich wollte die Newsteaser mit einer Flexbox-Anweisung auf gleiche Höhe bringen und bin damit gescheitert, hatte dann ein "display: flex;" an der falschen Stelle im CSS und schlicht vergessen, das wieder zu löschen ...

... wenn ich "same-height" im Template ergänze, tut sich ja nichts:

<div class="nachrichtenteaser_v2 autogrid item block<?php echo $this->class; ?> one_third same-height">

Das stelle ich mir wahrscheinlich jetzt zu einfach vor, oder?

[Tim]

Da müsste dann noch ein Wrapper drum, erst dann greift display:flex. display:flex liegt auf dem Wrapper, nicht auf den Elementen. Ist bissel irreführend in CSS.
Das macht AG im Auto Modus für z.B. Inhaltselemente automatisch. In den News ist AG noch nicht direkt integriert, hier müsste man im mod_newslist Template einen autogrid_wrapper um die Einträge ergänzen. Dann sollte es wieder greifen.
Die Klasse selbst ist so richtig.

Muss mal einfach mit zwei Inhaltselementen schnell bauen und in html Struktur schauen.

[bibib]

Danke, das hat jetzt so geklappt.

Falls es mal jemand brauchen kann:
Ich habe das template mod_newslist folgendermaßen ergänzt:

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

<div class="autogrid_wrapper">
    <div class="inner same-height">
    
        <?php if (empty($this->articles)): ?>
            <p class="empty"><?= $this->empty ?></p>
        <?php else: ?>
            <?= implode('', $this->articles) ?>
            <?= $this->pagination ?>
        <?php endif; ?>
 
    </div>  
</div>

<?php $this->endblock(); ?>

Der Rest war dann noch ein bisschen hübsch machen mit CSS - aber das ist individuell

[bibib]

Auf das Listenmodul im CustomCatalog kann ich das Prinzip wahrscheinlich nicht anwenden, oder?

[Tim]

Auf das Listenmodul im CustomCatalog kann ich das Prinzip wahrscheinlich nicht anwenden, oder?

Warum nicht?

Wäre das mod_customcatalog Template.

Dort kommen die Inhalte zwar nicht als Array rein, sondern aufbereitet in der Variablen $this->customcatalog aber da kannste natürlich auch nen Wrapper drumlegen.

Die einzelnen Einträge sind im customcatalog_xyz Template des Moduls, falls du dort autogrid Klassen brauchst.

Ist insgesamt etwas vergleichbar mit dem mod_newslist und news_xyz Templates.

[bibib]

Warum nicht?

Wie krieg ich denn dann die Umbrüche rein, bei knapp 100 Elementen im Katalog?

Ich habe die Wrapper im mod_customcatalog ergänzt:

<div class="autogrid_wrapper">
    <div class="inner same-height">
        <?php echo $this->customcatalog; ?>        
    </div>
</div>

Die einzelnen Einträge in der Liste haben dann, analog zu den Newsteasern, die Klassen .autogrid und .one_fourth bekommen. Ich hätte gerne vier Elemente pro Zeile. Wenn ich das Autogrid auf die normalen Inhaltselemente anwende, dann kann ich ja definieren, ab welchem Element eine neue Zeile beginnen soll. Aber das kann ja hier so nicht funktionieren.
Für euch Programmierer wahrscheinlich eine leichte PHP-Fingerübung, aber bei mir schaut das jetzt so aus:

http://www.kommagucken.tippsendesign.com/einkaufen.html

(Jedenfalls gefällt mir Autogrid immer besser )

[Tim]

Ja, da sollte dann ala 4 Einträge die Klasse break rein. Aber sowas kann man auch erstmal mit CSS anpacken.

.one_fourth.block:nth-child(4n+0) {clear:left;}

Sonst innerhalb einer Schleife gibt sowas mit dem Modulus Operator %:

foreach($myArr as $i => $values)
{
if($i%4 == 0) {echo "my fourth element";}
} 

In CC wäre das z.B. innerhalb der foreach für die Einträge gut platzierbar.

[bibib]

Okay, danke.
Lösung per CSS finde ich in dem Fall sogar sinnvoller, weil man dann auch noch mit Media Queries verschiedene Umbrüche für verschiedene Geräte unterbringen könnte. Aber insgesamt klappt das noch nicht. Ich kann zwar die :nth-child(4n+0)-Elemente selektieren, aber {clear:left;} greift trotzdem nicht.

Ich hab das Prinzip jetzt nochmal auf den Nachrichtenteaser "news_nachrichtenteaser_v2 (ORPHAN)" angewendet. Die einzelnen Elemente haben ja die Klasse .one_third. Jetzt hab ich im Modul einfach mal die Gesamtzahl der Beiträge auf 5 erhöht und im CSS folgendes ergänzt:

.nachrichtenteaser_v2.autogrid.block.one_third:nth _child(3n+0) {
clear: left;
}

... wird aber nichts umgebrochen, nun habe ich fünf Teaser in einer Zeile, die schmäler sind als 33,33333...%

Ich verstehe sicher das Autogrid noch viel zuwenig. Aber ich fürchte doch, dass das noch etwas komplexer ist und die paar Klassen im Template noch nicht reichen.

[Tim]

Lassen wir AG mal aussenvor und nutzen es nur für die Weiten. Das hier ist reines CSS und floating.

.nachrichtenteaser_v2.autogrid.block.one_third:nth _child(3n+0) {
clear: left;
}

hier ist schon mal eine Leertaste zu viel bei nth_child.

mach die Klasse nicht ganz so explizit und teste erstmal sowas:

.mod_newslist .one_third.block:nth_child(3n+0) {clear:left !important;}

(schau mal sicherheitshalber nach ob die Einträge auch wirklich .block kriegen, ich glaube aber ja)

[bibib]

hier ist schon mal eine Leertaste zu viel bei nth_child.

Sorry, war nur ein Schreibfehler beim Beitrag im Forum, im CSS war es richtig.

.mod_newslist .one_third.block:nth_child(3n+0) {clear:left !important;}

(schau mal sicherheitshalber nach ob die Einträge auch wirklich .block kriegen, ich glaube aber ja)

Die Newseinträge kriegen ein .block, und ich hab das jetzt auch direkt ins CSS kopiert - aber nach wie vor kein Umbruch ...

Für die Einträge der Mitgliederliste (Link siehe oben) hab ich folgendes im CSS:

.one_fourth.block:nth-child(4n+0) {
    background-color: crimson;
    clear: left;
}

Selektion passt also schon mal, aber clear:left; will nicht.