|
|
|
|
|
|
|
|
|
/new-site/includes/blog-page-list/
/new-site/includes/blog-page-list/
|
|
Blog Page List1
Blog Page List1
|
|
<h3 class="data-filter">
<a href="/new-site/blog/">All<br /></a>
<span style="color: #d2042d;">//</span>
[? $page['page_title'] ?]<standard:icon id="data-filter-menu" style="width: 24px; height: 24px" library="fontawesome" iconname="bars" iconstyle="solid" /><standard:icon id="data-filter-menu-close" style="width: 24px; height: 24px; color: #d2042d" library="fontawesome" iconname="circle-xmark" iconstyle="solid" />
</h3>
<div class="data-filter-content">
<logic:variable as="current_page_id" value="[? \Components\Website\Pages::currentPageId() ?]" />
<ul>
<li><a href="/new-site/blog/" style="[? $current_page_id == '/new-site/blog/' ? 'display: none' : '' ?]">All</a></li>
<data:repeater as="page" datasource="\Components\Website\Pages::getChildren('/new-site/blog/')" datafilter="[? [['page_is_offline', '=', 0], 'OR', ['page_is_hidden_in_navigation', '=', 0]] ?]">
<li style="[? $current_page_id == $page['page_id'] ? 'display: none' : '' ?]">
<a href="[? $page['page_id'] ?]">[? $page['page_title'] ?]</a>
</li>
</data:repeater>
</ul>
</div>
<h3 class="data-filter">
<a href="/new-site/blog/">All<br /></a>
<span style="color: #d2042d;">//</span>
[? $page['page_title'] ?]<standard:icon id="data-filter-menu" style="width: 24px; height: 24px" library="fontawesome" iconname="bars" iconstyle="solid" /><standard:icon id="data-filter-menu-close" style="width: 24px; height: 24px; color: #d2042d" library="fontawesome" iconname="circle-xmark" iconstyle="solid" />
</h3>
<div class="data-filter-content">
<logic:variable as="current_page_id" value="[? \Components\Website\Pages::currentPageId() ?]" />
<ul>
<li><a href="/new-site/blog/" style="[? $current_page_id == '/new-site/blog/' ? 'display: none' : '' ?]">All</a></li>
<data:repeater as="page" datasource="\Components\Website\Pages::getChildren('/new-site/blog/')" datafilter="[? [['page_is_offline', '=', 0], 'OR', ['page_is_hidden_in_navigation', '=', 0]] ?]">
<li style="[? $current_page_id == $page['page_id'] ? 'display: none' : '' ?]">
<a href="[? $page['page_id'] ?]">[? $page['page_title'] ?]</a>
</li>
</data:repeater>
</ul>
</div>
|
|
.data-filter
{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem;
}
.data-filter-content
{
padding: 30px;
background: #efefef;
}
.data-filter-content ul
{
list-style: none;
padding: 0;
margin: 0;
display: block;
column-count: 3;
}
@media (max-width: 1000px)
{
.data-filter-content ul
{
column-count: 2;
}
}
@media (max-width: 700px)
{
.data-filter-content ul
{
column-count: 1;
}
}
.data-filter-content ul li
{
margin: 10px 0;
break-inside: avoid;
}
.data-filter-content ul li a
{
color: #242424;
font-size: bigger;
}
.data-filter-content ul li a:hover
{
color: rgb(210, 4, 45);
}
.data-filter-content
{
display: none;
}
#data-filter-menu,
#data-filter-menu-close
{
cursor: pointer;
}
#data-filter-menu-close
{
display: none;
}
.data-filter
{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem;
}
.data-filter-content
{
padding: 30px;
background: #efefef;
}
.data-filter-content ul
{
list-style: none;
padding: 0;
margin: 0;
display: block;
column-count: 3;
}
@media (max-width: 1000px)
{
.data-filter-content ul
{
column-count: 2;
}
}
@media (max-width: 700px)
{
.data-filter-content ul
{
column-count: 1;
}
}
.data-filter-content ul li
{
margin: 10px 0;
break-inside: avoid;
}
.data-filter-content ul li a
{
color: #242424;
font-size: bigger;
}
.data-filter-content ul li a:hover
{
color: rgb(210, 4, 45);
}
.data-filter-content
{
display: none;
}
#data-filter-menu,
#data-filter-menu-close
{
cursor: pointer;
}
#data-filter-menu-close
{
display: none;
}
|
|
document.addEventListener('DOMContentLoaded', function () {
const menuIcon = document.getElementById('data-filter-menu');
const closeIcon = document.getElementById('data-filter-menu-close');
const content = document.querySelector('.data-filter-content');
content.style.display = 'none';
closeIcon.style.display = 'none';
menuIcon.addEventListener('click', function () {
content.style.display = 'block';
menuIcon.style.display = 'none';
closeIcon.style.display = 'flex';
});
closeIcon.addEventListener('click', function () {
content.style.display = 'none';
menuIcon.style.display = 'flex';
closeIcon.style.display = 'none';
});
});
document.addEventListener('DOMContentLoaded', function () {
const menuIcon = document.getElementById('data-filter-menu');
const closeIcon = document.getElementById('data-filter-menu-close');
const content = document.querySelector('.data-filter-content');
content.style.display = 'none';
closeIcon.style.display = 'none';
menuIcon.addEventListener('click', function () {
content.style.display = 'block';
menuIcon.style.display = 'none';
closeIcon.style.display = 'flex';
});
closeIcon.addEventListener('click', function () {
content.style.display = 'none';
menuIcon.style.display = 'flex';
closeIcon.style.display = 'none';
});
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/new-site/includes/
/new-site/includes/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|