Page 1 of 2
[solved] Artikel-Paginierung Bootstrap
Posted: Tue 28. Apr 2020, 15:38
by santscho
Möchte gerne eine Standard-Bootstrap-Paginierung verwenden, komme aber nicht weiter. Kann zwar eine Bootstrap-Paginierung in der conf.template_default.inc.php ($template_default['article_paginate_navi']) aufbauen, aber kann sie nur bis zum link heran modifizieren. Kann den Links aber keine Bootstrap-spezifischen Klassen zuweisen.
Wo liegt die Core-PHP der Paginierung? Vielleicht kann ich da was schrauben, um diese Bootstrap-Paginierung zu rendern:
Code: Select all
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">
2
[list][/list] </span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Ich wäre auch schon glücklich, wenn ich die Klasse "page-link" dem Link zuweisen könnte. Momentan habe ich die Klasse auf die <li> gelegt. Der Button funktioniert dann nur bedingt. Und noch active. disabled nicht unbedingt notwendig. Hier noch meins...
Code: Select all
$template_default['article_paginate_navi'] = '<nav caria-label="Article Navigation-{POS}"><ul class="pagination"><li class="page-item page-link">{PREV:<i class="fa fa-arrow-left"></i>}</li> {NAVI:1-3, </li><li class="page-item page-link">|<li class="page-item page-link">|</li>}<li class="page-item page-link">{NEXT:<i class="fa fa-arrow-right"></i>}</li></ul></nav>'; //
Re: Artikel-Paginierung Bootstrap
Posted: Fri 1. May 2020, 07:48
by Oliver Georgi
Ich würde da nicht im Core werkeln, oder mache und dann aber PR auf GitHub
. Du solltest mehr mit SCSS > CSS arbeiten und dem Projekt individuelle Ausnahmen gönnen. Dann nimmt man die Vorgaben aus Bootstrap und passt die auf den eigenen DOM an. Es gibt einige Sachen, die stammen halt aus der Ära weit vor Bootstrap & Co.
Ansonsten kannst Du auch jederzeit die 2 bis 3 Klassen in separater CSS mitführen. Nimm den kleinsten Bootstrap-Teil, den Du benötigst und baue den entsprechend um.
Ich würde das ganze Templating heute sicher nicht mehr so aufbauen, sondern auf gängige Templating-Engine setzen. Aber das ist ein wirklich großer Umbau.
Re: Artikel-Paginierung Bootstrap
Posted: Fri 1. May 2020, 12:59
by santscho
Möchte halt soviel bestehendes wie möglich von Bootstrap übernehmen. Aber Du hast schon recht. Zum Glück habe ich Bootstrap Studio. Der kompiliert SCSS. Denn davon habe ich Null Ahnung.
Re: Artikel-Paginierung Bootstrap
Posted: Sat 2. May 2020, 14:57
by Uwe367
Ich mache das immer noch auf die alte Weise die Knut mal hier beschrieben hat:
viewtopic.php?f=16&t=18209&p=112062&hil ... en#p112062
Ich habe mir das so umgebaut daß es responsive ist. Ist vielleicht nicht unbedingt up to date, aber es funktioniert.
Mit der Bootstrap Pagination hatte ich die gleichen Probleme wie du. Soweit ich mich erinnere kannst du dem TAG
<a> keine Klasse mit geben. Aber vielleicht baut Oliver da noch was ein, z.B in der conf_template.default_inc.php ähnlich den Klassen von NAV_LIST_UL die man so umbauen kann wie man sie braucht.
Bin aber selbst schon am schauen in welcher Datei ich die Artikelpaginierung finde.
Re: Artikel-Paginierung Bootstrap
Posted: Sat 2. May 2020, 17:40
by Uwe367
Ich habe gefunden wo die Navi für die Artikelpaginierung aufgebaut ist.
Verzeichnis include/inc_front/front.func.inc.php.
Ab Zeile 961 wird die Navi aufgebaut.
Ein theoretischer Lösungsansatz wäre, das mittels conf.template_default.inc.php zu lösen.
In diese z.B. ein Eintrag
wobei diese Klasse dann durch eine beliebige ersetzt werden kann, z.B.
Code: Select all
'paginate_a' => 'my_pagination_class',
Man könnte das ganze dann entweder im Core umbauen oder als Frontend Renderscript laufen lassen.
Beispielhafte Änderung im Core bei Zeile 1020 und 1036:
Code: Select all
if($template_default['paginate_a'])
'<a class="' (my_pagination_class)' . href="' . rel_url( array('listpage'=>$i) ) . '">'.$i.'</a>'
else
'<a href="' . rel_url( array('listpage'=>$i) ) . '">'.$i.'</a>'
Ok,
DAS WIRD SO NICHT FUNKTIONIEREN da zuerst noch die eingetragene CSS Klasse ausgelesen und übergeben werden muß. Zudem dürfte meine Schreibweise jeden PHP Programmierer schier um den Verstand bringen
Aber es ist vielleicht ein theoretischer Lösungsansatz um dem
<a> TAG eine Klasse mitzugeben.
Re: Artikel-Paginierung Bootstrap
Posted: Sat 2. May 2020, 17:47
by Oliver Georgi
ich schaue mal
Re: Artikel-Paginierung Bootstrap
Posted: Sat 2. May 2020, 18:09
by Uwe367
Danke Oliver
Wie gesagt.. ist nur ein theoretischer Ansatz. Ob das praktisch umsetzbar ist oder auf diese Weise Sinn macht.. keine Ahnung.
Re: Artikel-Paginierung Bootstrap
Posted: Sat 2. May 2020, 22:04
by santscho
Genau, es ist die fehlende Möglichkeit, dem Link ne Klasse zu geben ist aber nicht so schlimm. Habe eine Navi mit Bootstrap-Bordmitteln hinbekommen, die auch nicht schlecht aussieht.
Code: Select all
'<ul class="pagination shadow-sm p-2 text-muted"><li class="pagli navarrow ml-2 mr-2">{PREV:<i class="fa fa-chevron-left"></i>}</li>{NAVI:1-3,</li><li class="ml-2 mr-2">|<li class="ml-2 mr-2">|</li>}<li class="navarrow mr-2 ml-2">{NEXT:<i class="fa fa-chevron-right"></i>}</li></ul>';
Die FE-Renderscripte sind schon eine geniale Sache. Ich lasse mir so CSS-Klassen generieren, die in meinen CP-Templates zum Einsatz kommen. So steht zum Beispiel <div class="{BOX1}"> in den Templates
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 07:55
by Oliver Georgi
santscho wrote: Sat 2. May 2020, 22:04
<div class="{BOX1}">
Schau Dir mal die Möglichkeit an, jedem CP eine eigene Klasse mitzugeben. Meist sollte das genügen, um inhaltsspezifisch über CSS das Aussehen zu definieren.
- Bildschirmfoto 2020-05-03 um 07.54.37.png (28.36 KiB) Viewed 4336 times
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 10:20
by Oliver Georgi
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 14:20
by Uwe367
Ja Donnerwetter Oliver....
Daß du das auf Sonntag umsetzt.... Hut ab,
VIELEN DANK und meine Hochachtung dafür.
Ich habe das mit dem Standarttemplate der Neuinstallation getestet und nun kann ich
jedem <a> der Pagination eine Klasse mit geben und die kann ich selbst noch in der conf.template_default.inc.php festlegen.
Und nicht nur das kann ich nun machen, sondern ich kann den Links
active und
disabled nun auch noch Klassen mit geben um diese eventuell farblich voneinander zu unterscheiden oder oder oder.......
Flexibeler gehts nun wirklich nicht mehr.
Quellcode vorher ohne diese Möglichkeit:
Code: Select all
<div class="paginate paginate-top">« <a href="?listpage=2">»</a> page 1/2, result 1-3, <span>1–3 <a href="?listpage=2">4–4</a></span></div>
Mit der neuen Änderung in der conf.template_default.inc.php zum testen....
Code: Select all
'cp-paginate-link' => 'my-class-1',
'cp-paginate-link-active' => 'paginate-link active',
'cp-paginate-link-disabled' => 'paginate-link disabled',
'search-paginate-link' => 'my-class-2',
Ergibt jetzt mit der Änderung folgendes Ergebnis:
Code: Select all
<div class="paginate paginate-top"><a class="paginate-link disabled">«</a> <a href="?listpage=2" class="my-class-1">»</a> page 1/2, result 1-3, <span><a href="?listpage=1" class="paginate-link active">1</a> <a href="?listpage=2" class="my-class-2">2</a></span></div>
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 18:02
by Oliver Georgi
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 20:23
by Uwe367
Kann ich jetzt adhoc nichts mit anfangen. Hast du mal ein Beispiel wie ein Eintrag dort aussehen muß bzw. was dort rein soll?
Wenn ich weiß was da rein soll wird sich schnell zeigen was ein Eintrag dort bewirkt
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 21:46
by santscho
Danke Oliver! Held des Tages! Wirklich sehr geschätzt!
Re: Artikel-Paginierung Bootstrap
Posted: Sun 3. May 2020, 21:55
by santscho
Oliver Georgi wrote: Sun 3. May 2020, 07:55
Schau Dir mal die Möglichkeit an, jedem CP eine eigene Klasse mitzugeben. Meist sollte das genügen, um inhaltsspezifisch über CSS das Aussehen zu definieren.
Diese Methode ist mir bekannt. Aber mit meinem Replacement tag kann ich mehrere Bootstrap-Klassen einem DIV zuteilen.
Code: Select all
if(strpos($content['all'], '{BOX1}')){
$_box1 = 'box1 border border-light shadow-sm rounded p-3 mb-5 bg-light';
$content['all'] = str_replace('{BOX1}', $_box1, $content['all']);
}
wenn ich die Klassen in jedem CP eintragen würde, müsste ich später bei einer Änderungen alle CP's anpassen. Mit der RT-Methode nur das FE-Renderscript.