IRCDefteri.Net - En İyi IRCForum Sayfasi
  SohbetYaz.Com


 Kayıt ol  Bugünkü Mesajlar  Arama

Etiketlenen üyelerin listesi

Ağaç Şeklinde Aç1Beğeni(ler)
  • 1 gönderen aSpeNDos

Yeni Konu Aç Cevapla
 
LinkBack Seçenekler Arama Stil
Alt 9 Saat önce   #1
Çevrimiçi
~ Www.ircforumda.net ~
Vbulletin 3.x - Sayfa Navigasyonu (Pagenav) Güncelleme


Sayfa Navigasyonu Altyapı Güncellemesi

Forumumuzun sayfa navigasyon sistemi yeniden yazıldı. Eski HTML tablo tabanlı yapı, sayfa sayısı arttıkça ekrandan taşıyor ve mobil cihazlarda layout bozuluyordu.
Tablo mimarisi tamamen kaldırılarak yerine CSS Flexbox ve JavaScript gruplama motoru getirildi.
Artık kaç sayfa olursa olsun navigasyon çubuğu ekranda sabit ve düzgün kalıyor, mobilde de masaüstünde de sorunsuz çalışıyor.

Eski yapıHTML tablo tabanlı Sorunlu

Click the image to open in full size.

Yeni yapıCSS Flex + JS gruplama Güncel

Click the image to open in full size.

Mobil görünüm karşılaştırması

Click the image to open in full size.

Nerede Yapılacak?

İngilizce ; AdminCP → Styles & Templates → Search in Templates

Türkçe ; Admin Panel → Stiller & Temalar → Temalarda Ara

1. pagenav

Ne değişti: Eski <table> yapısı kaldırıldı, yerine CSS Flexbox getirildi. Sayfa bilgisi (X/Y) ayrı satıra alındı. Taşma sorunu ortadan kalktı.

Tüm içeriği sil, şununla değiştir:

Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<div class="pagenav" style="width:100%;display:block;"> <div style="display:flex;font-size:11px;color:#666;padding:3px 0;margin-bottom:3px;justify-content:flex-end;"><phrase 1="$pagenumber" 2="$totalpages">$vbphrase[page_x_of_y]</phrase></div> <div class="pnav_wrap" style="display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:2px;align-items:center;padding:2px;max-width:100%;overflow:hidden;"> <if condition="$show['first']"><a rel="start" class="smallfont" style="padding:3px 7px;background:#4a7aba;color:#fff;border-radius:3px;text-decoration:none;font-size:11px;flex-shrink:0;" href="$address$address2<if condition="$anchor">#$anchor</if>">&laquo; $vbphrase[pagenav_first]</a></if> <a class="pnav_gbtn_prev smallfont" style="padding:3px 7px;background:#4a7aba;color:#fff;border-radius:3px;font-size:11px;cursor:pointer;flex-shrink:0;display:none;">&lt;</a> <span class="pnav_pages" style="display:flex;flex-wrap:nowrap;gap:2px;">$pagenav</span> <a class="pnav_gbtn_next smallfont" style="padding:3px 7px;background:#4a7aba;color:#fff;border-radius:3px;font-size:11px;cursor:pointer;flex-shrink:0;display:none;">&gt;</a> <if condition="$show['last']"><a class="smallfont" style="padding:3px 7px;background:#4a7aba;color:#fff;border-radius:3px;text-decoration:none;font-size:11px;flex-shrink:0;" href="$address$address2&amp;page=$totalpages<if condition="$anchor">#$anchor</if>">$vbphrase[pagenav_last] &raquo;</a></if> <if condition="$show['popups']"><span title="$address$address2"><a name="PageNav"></a></span></if> </div> </div> <script> (function(){ var wraps = document.querySelectorAll('.pnav_wrap'); wraps.forEach(function(wrap){ var container = wrap.querySelector('.pnav_pages'); if (!container) return; var links = container.querySelectorAll('a, span'); if (links.length <= 11) return; var groupSize = 11; var currentGroup = 0; var totalGroups = Math.ceil(links.length / groupSize); var btnPrev = wrap.querySelector('.pnav_gbtn_prev'); var btnNext = wrap.querySelector('.pnav_gbtn_next'); links.forEach(function(el, i){ if (el.tagName === 'SPAN') { currentGroup = Math.floor(i / groupSize); } }); function showGroup(g){ currentGroup = g; links.forEach(function(el, i){ el.style.display = (Math.floor(i / groupSize) === g) ? '' : 'none'; }); btnPrev.style.display = g > 0 ? '' : 'none'; btnNext.style.display = g < totalGroups - 1 ? '' : 'none'; } btnPrev.onclick = function(){ showGroup(currentGroup - 1); }; btnNext.onclick = function(){ showGroup(currentGroup + 1); }; showGroup(currentGroup); }); })(); </script>

2. pagenav_curpage

Ne değişti: Aktif sayfa <td> hücresinden çıkarıldı, <span> ile inline-block yapıldı. Koyu mavi renk ve bold yazı ile aktif sayfa belirginleştirildi.

Tüm içeriği sil, şununla değiştir:

Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<span class="smallfont" style="padding:3px 7px; background:#2d5a9e; color:#fff; border-radius:3px; font-size:11px; display:inline-block; font-weight:bold;" title="<phrase 1="$numbers[first]" 2="$numbers[last]" 3="$total">$vbphrase[showing_results_x_to_y_of_z]</phrase>">$curpage</span>


3. pagenav_pagelink

Ne değişti: Her sayfa numarasındaki <td> kaldırıldı, doğrudan <a> etiketi inline-block yapıldı. Açık gri arka plan eklendi.

Tüm içeriği sil, şununla değiştir:

Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<a class="smallfont" style="padding:3px 7px; background:#e8e8e8; color:#333; border-radius:3px; text-decoration:none; font-size:11px; display:inline-block;" href="$address$address2<if condition="$curpage != 1">&amp;page=$curpage</if><if condition="$anchor">#$anchor</if>" title="<phrase 1="$pagenumbers[first]" 2="$pagenumbers[last]" 3="$total">$vbphrase[show_results_x_to_y_of_z]</phrase>">$curpage</a>

4. pagenav_pagelinkrel

Ne değişti: pagenav_pagelink ile aynı yapıya getirildi, <td> kaldırıldı, inline-block <a> yapıldı.

Tüm içeriği sil, şununla değiştir:

Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<a class="smallfont" style="padding:3px 7px; background:#e8e8e8; color:#333; border-radius:3px; text-decoration:none; font-size:11px; display:inline-block;" href="$address$address2<if condition="$curpage != 1">&amp;page=$curpage</if><if condition="$anchor">#$anchor</if>" title="<phrase 1="$pagenumbers[first]" 2="$pagenumbers[last]" 3="$total">$vbphrase[show_results_x_to_y_of_z]</phrase>"><!--$relpage-->$curpage</a>

Bilgilendirme ;

Tüm değişiklikler yapıldıktan sonra tarayıcı önbelleğini temizleyerek (Ctrl+Shift+R) test ediniz.
Üçüncü taraf yazılım veya çerez kullanıyorsanız ( Cloudflare ) vb cache geçmişini temizleyin.

Not ; Bu değişiklik sadece kategorilerdeki görünümler için değil tüm sayfalarda mesela üye listesi , özel mesaj ( pm ) gibi alanlardada geçerli olacaktır.
css ve js de değişiklik yapabilir ve renkleri mevcut temanızın renklerine göre ayarlayabilir veya benim verdiğim renkleri kullanabilirsiniz.

Bu tarz paylaşımların devamı için yorum yapmayı unutmayın...
Bilgi paylaştıkça güzeldir
Keyifli Forumlar..
Overdose bunu beğendi.
  Alıntı ile Cevapla

IRCForumda.Net Reklamlar
sohbet isami sohbet
Alt 1 saat önce   #2
Çevrimiçi
SihirliSohbet.Org
Cevap: Vbulletin 3.x - Sayfa Navigasyonu (Pagenav) Güncelleme


Öncelikle Emeklerine Saglık Çok Güsel bir Çalısma olmus gerçekten @aSpeNDos

  Alıntı ile Cevapla

Cevapla



Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Açık
Refbacks are Açık