SMF 2.1Açılır Kapanır Alt Bölümler (bottom_section_folding_opens_and_closes)

Started by replikacep, Jan 05, 2019, 01:53 pm

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

replikacep

SMF 2.1 İÇİN AÇILIR KAPANIR  alt bölümler  resimdeki gözüktügü gibidir  mod tarafımdan yapılmıştır  güle güle kullanın

Smf  2.1 için  geliştirdigim  bir moddur

made by www.replikacep.com

Version: 2.1 Date 2019

Compatibility: SMF 2.1 RC1

*Add new look for smf 2.1 RC 1

2.1  için  yaptım modu

mod tarafımdan yapılmıştır  :)

MOD : default Temaya  göre tasarlanmıştır  renkler ve  iconları dileyen istedigi temaya göre degiştirebilir  çok az php  bilmeniz yeterli  renkleri ve  butonu saga yada sola  kaydırmak için

https://yadi.sk/d/v1ik4sn2Ame2KQ

örnek :  index.css de modu yükledikten sonra bul 

Code Select
.dropbtn {
    background-color: #557ea0;
    color: white;
    padding: auto;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border: 1.5px solid #d1994c;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}

aşadakilerle  oynayın

Code Select
  margin-left: auto;
    margin-right: auto;
    margin-top: auto;
 


örnek :margin-left: auto;  yerine  margin-left: 60px; yaparsak  buton  saga  dogru kayar

yukarı  kaydırmak için : margin-top: auto; yerine  margin-top: -10px; yapın




Görseller


7

7




mobilde  gizlemek istiyorsanız  icon ları


responsive.css de  bul

Code Select
@media (max-width: 480px) {
altına ekle

Code Select
.fa-comments-o:before{display: none; }
.dropdown-content a {
 
  color: #557ea0;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: "Tahoma", sans-serif;
  font-weight: bold;
  line-height: 1.5em;
  margin-left: 2px;
  margin-right: auto;
  margin-top: auto;

}

bu yukarıa verdigim bir örnek tir


buton  büyük diyorsanız

index.css de  bul

Code Select
.dropbtn {
    background-color: #557ea0;
    color: white;
    padding: auto;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border: 1.5px solid #d1994c;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}



font-size: 16px;  bunu  13 yapın buton küçülür

orhan


replikacep

rica ederim  2.1 çıkmadan  baya bişey  entegre etmeliyim  :)

alt bölümlere icon koymaya ugraşıyorum  yapamadım  :)

Code Select
global $txt, $scripturl, $context, $settings;

 // Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
 if (!empty($board['children']))
 {
 // Sort the links into an array with new boards bold so it can be imploded.
 $children = array();
 /* Each child in each board's children has:
 id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
 foreach ($board['children'] as $child)
 {
 if (!$child['is_redirect'])
 $child['link'] = '' . ($child['new'] ? '<a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="new_posts">' . $txt['new'] . '</a>' : '') . '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="board_new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . '</a>';
 else
 $child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . ' - ' . $child['short_description'] . '">' . $child['name'] . '</a>';

 // Has it posts awaiting approval?
 if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
 $child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

 $children[] = $child['new'] ? '<span class="strong">' . $child['link'] . '</span>' : '<span>' . $child['link'] . '</span>';
 }

 echo '
 

<script src="', $settings['default_theme_url'], '/scripts/al_dropdown.js"></script>
 <a div id="board_', $board['id'], '_children" class="dropdown">
 <li><i class="fa fa-comments-o"><button onclick="myFunction()" class="dropbtn"><link href="', $settings['default_theme_url'], '/css/all.min.css" rel="stylesheet">', $txt['sub_boards'], ' </i></button></a>
 <div id="myDropdown" class="dropdown-content"> ', implode($children), '
 </div>
 </div>';
 
 
 }


bunu nereye koymalıyım her alt bölümün başında gözükmesi için
Code Select
<li><i class="fa fa-comments-o">

EDİT :
Code Select
$children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"></i> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#777"></i> ' . $child['link'] . '</span>';
NOT : GÖZÜLDÜ

orhan

merhaba burdaki li tağinin bir karsiligi yoksa silin muhtemelen hata verecek.

Code Select
$children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"></i> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#777"></i> ' . $child['link'] . '</span>';

replikacep

buranın  içinden çıkamadım  yeni fark ettim    alt bölümler butonuna tıklayın ya  kendi  bölümünde  çekmiyor  muş

orjinali

Code Select
echo '
<div id="board_', $board['id'], '_children" class="children">
<p><strong id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode($children), '</p>
</div>';

burasıda  edit

Code Select
<a div id="board_', $board['id'], '_children" class="dropdown">
<button onclick="myFunction()" class="dropbtn" id="child_list_', $board['id'], '">', $txt['sub_boards'], '</button></a>
<div id="myDropdown" class="dropdown-content"> ', implode($children), '   
                         
  </div>';

sanırım yanlış lık yapmışsım

orhan


replikacep

buranın  içinden çıkamadım  yeni fark ettim    alt bölümler butonuna tıklayın abi  2 ci bir alt bölüm acınca fark ettim  butona tıklayınca  id 1  bu bölümü açıyor  tıkladıgın bölümdeki alt bölümleri açmıyor

yani kısacası   2 ci sıradaki alt  bölüm butonuna tıklayınca ilk kategorinin alt bölümü açılıyor  :)
http://demo.replikacepsatis.com/index.php

orjinali

Code Select
echo '
 <div id="board_', $board['id'], '_children" class="children">
 <p><strong id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode($children), '</p>
 </div>';

burasıda  edit

Code Select
<a div id="board_', $board['id'], '_children" class="dropdown">
 <ul><button onclick="myFunction()" class="dropbtn">', $txt['sub_boards'], ' </button></a>
 <div id="myDropdown" class="dropdown-content"> ', implode($children), ' 
 </div>
  </div>';

sanırım yanlış lık yapmışsım


http://demo.replikacepsatis.com/index.php  abi bi baksan çözemiyorum :)  ftp şifreleri aynı

bu butonu aldıgım yer  : https://www.w3schools.com/howto/howto_js_dropdown.asp

orhan

ftp ye erişme şansim şuan yok

BoardIndex.template.php kodlarini
Bununla degisin

Code Select
// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

$children[] = $child['new'] ? '' . $child['link'] . '' : '' . $child['link'] . '';
}

echo '
<div id="board_', $board['id'], '_children" class="children dropdown">
<button onclick="myFunction()" class="dropbtn child_list_', $board['id'], '">', $txt['sub_boards'], '</button><div id="myDropdown" class="dropdown-content">', implode($children), '</div>
</div>';
}
}

index.css ye ekleyin

Code Select
/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  font-size: 12px;
  border: none;
  cursor: pointer;
  padding: 0.4em;
  height: 2em;
  line-height: 0em;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

temanizin theme.js yi acin

üste bunu ekleyin

Code Select
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

replikacep

aynen ekledim dediginiz gibi degişen bişey olmadı  en üstteki alt bölüm açılıyor aşadaki  alt bölüme tıklayınca    anlam veremiyorum  ne güzel mod  bitti demiştim

abi sen musait oluna  bi bak sana zahmet ftp den


EDİT  : Sorun çözülmüştür


Code Select
function template_bi_board_children($board)
{
global $txt, $scripturl, $context, $settings;

// Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
if (!empty($board['children']))
{
// Sort the links into an array with new boards bold so it can be imploded.
$children = array();
/* Each child in each board's children has:
id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
foreach ($board['children'] as $child)
{
if (!$child['is_redirect'])
$child['link'] = '' . ($child['new'] ? '<a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="new_posts">' . $txt['new'] . '</a>' : '') . '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="board_new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . '</i></a>';
else
$child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . ' - ' . $child['short_description'] . '">' . $child['name'] . '</a>';

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

            $children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#34373b;margin-left: 2px;margin-right: auto;margin-top: 10px;"></i> ' . $child['link'] . '</span>';   
 
  }
           echo'<script> function myFunction_', $board['id'], '() { document.getElementById("myDropdown_', $board['id'], '").classList.toggle("show"); }  
                   window.onclick = function(event) {  if (!event.target.matches(\'.dropbtn\')) { var dropdowns = document.getElementsByClassName("dropdown-content");
               var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i];
               if (openDropdown.classList.contains(\'show\')) { openDropdown.classList.remove(\'show\'); } } } } </script>
                  <link href="', $settings['default_theme_url'], '/css/all.css" rel="stylesheet">
                  <a div id="board_', $board['id'], '_children" class="dropdown">
<ul><button onclick="myFunction_', $board['id'], '()" class="dropbtn">', $txt['sub_boards'], ' </button></a>
<div id="myDropdown_', $board['id'], '" class="dropdown-content"> ', implode($children), ' 
  </div>';
}
}


bu şekil  yaparak çözüldü