İnfo
Administrator
Kullanıcılara umursamadıkları düğümleri daraltma olanağı sağlamanın en basit yolu. Seçimleri kaydedilir, böylece sayfayı yenilediklerinde veya sitenizi ziyaret ettiklerinde kapalı düğümler kapalı kalır.
Bu düzeltme, varsayılan stili destekler, hiçbir üçüncü taraf stili desteklenmez. Ayrıca, Piksel Çıkış stilleri kullanıyorsanız, bu her stilde yerleşiktir.
En az XF 2.0.3 veya üstünü kullanmalısınız.
1-) "node_list_category" şablonunda aşağıdaki kod değişiklikleri yapılıyor.
a-) Bul:
Değiştirmek:
b-) Bul:
Aşağıdaki kodu aşağıya ekleyin:
c-) Bul:
Aşağıdaki kodu yukarıdaki satırın arkasına ekleyin:
d-) Bul:
En üste aşağıdaki kodu ekleyin:
e-) Bul:
Değiştirmek:
2-) " extra.less " şablonuna aşağıdaki kodu ekleyin.
OPSİYONEL:
Şahsen ben pek beğenmedim ama isterseniz "On/Off" animasyonu daha belirgin hale getirebilirsiniz. Bunun için aşağıdaki kodu " extra.less " ekliyoruz.
Bu düzeltme, varsayılan stili destekler, hiçbir üçüncü taraf stili desteklenmez. Ayrıca, Piksel Çıkış stilleri kullanıyorsanız, bu her stilde yerleşiktir.
En az XF 2.0.3 veya üstünü kullanmalısınız.
1-) "node_list_category" şablonunda aşağıdaki kod değişiklikleri yapılıyor.
a-) Bul:
Kod:
<div class="block block--category block--category{$node.node_id}">
Kod:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
Kod:
<h2 class="block-header">
Kod:
<div class="block-header--left">
Kod:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
Kod:
</div>
Kod:
</h2>
Kod:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
Kod:
<div class="block-body">
Kod:
<div class="block-body block-body--collapsible is-active">
Kod:
/* Node Collapse */
.block--category
{
.collapseTrigger
{
opacity: 0.5;
transition: opacity 0.3s;
margin-right: 10px;
&.is-active:before
{
content: "\f205";
transform: scale(-1, 1);
margin-right: -8px;
}
&:before
{
content: "\f205";
font-size: 80%;
}
}
.block-container:hover .collapseTrigger
{
opacity: 1;
}
}
.collapsible-nodes
{
.block-header
{
display: flex;
}
.block-header--left
{
margin-right: auto;
max-width: 100%;
}
}Şahsen ben pek beğenmedim ama isterseniz "On/Off" animasyonu daha belirgin hale getirebilirsiniz. Bunun için aşağıdaki kodu " extra.less " ekliyoruz.
Less:
.block-body.block-body--collapsible
{
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-webkit-transition-property: all, -xf-opacity;
transition-property: all, -xf-opacity;
overflow-y: hidden;
height: 0;
-webkit-transition-property: all, -xf-height;
transition-property: all, -xf-height;
}