sergiotarxz/burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactoring the default layout and adding highlight of the parent category of posts/categories in desktop.

Browse Source
This commit is contained in:
sergiotarxz 2023-05-03 01:59:10 +02:00
parent 3b12bdc0e5
commit 3dbb7dea44
6 changed files with 55 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/404.html.ep
View File

@ -1,6 +1,6 @@
% use Mojo::Util;
% use BurguillosInfo::Categories;
% layout 'default', current_slug => undef, categories => BurguillosInfo::Categories->new->Retrieve;
% layout 'default', current_category_slug => undef, categories => BurguillosInfo::Categories->new->Retrieve;
<div class="description">
<h2>Esta página no existe.</h2>
<p>Si un enlace te ha llevado aquí, reporta el error a <a href="mailto:contact@owlcode.tech">los administradores</a>.</p>

39
templates/layouts/default.html.ep
View File

@ -1,4 +1,6 @@
<!DOCTYPE html>
% my $categories = stash 'categories';
% my $current_category_slug = stash 'current_category_slug';
<html lang="es">
<head>
<script src="/js/index.js"></script>
@ -21,41 +23,8 @@
<div class="site-wrapper">
</div>
<div class="page-contents">
<nav class="desktop"><% for my $category_key (sort {
$categories->{$a}{priority} <=> $categories->{$b}{priority}
} keys %$categories) {
my $category = $categories->{$category_key};
if (defined $category->{parent}) {
next;
}
my $selected = defined($current_slug) && $category->{slug} eq $current_slug;
%><a class="<%=$selected && "selected" %>" href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><%
}
%></nav>
<nav class="mobile-shortcuts">
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
<div></div>
<a href="#mobile-foldable" class="menu-expand">
<img class="open-menu-icon" src="/img/hamburger-menu-yellow.png" alt="Expandir el menú."/>
<img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.png" alt="Expandir el menú."/>
</a>
</nav>
<nav class="mobile-foldable" id="mobile-foldable"><%
my $first = 1;
for my $category_key (sort {
$categories->{$a}{priority} <=> $categories->{$b}{priority}
} keys %$categories) {
my $category = $categories->{$category_key};
if (defined $category->{parent}) {
next;
}
%><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><div class="child-categories-mobile"><%
for my $child_category ($category->{children}->@*) {
%><a href="<%="/$child_category->{slug}"%>">* <%==$child_category->{menu_text}%></a><%
}%></div><%
}
%></nav>
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
%= include 'page/_mobile_menu', categories => $categories
<%= content %></body>
<hr/>
<div class="footer description">

24
templates/page/_desktop_menu.html.ep Normal file
View File

@ -0,0 +1,24 @@
% my $categories = stash 'categories';
% my $current_category_slug = stash 'current_category_slug';
<nav class="desktop"><%
my @sorted_categories = sort {
$categories->{$a}{priority} <=> $categories->{$b}{priority}
} keys %$categories;
my $target_category_slug = $current_category_slug;
my $current_category = $categories->{$current_category_slug};
if (defined $current_category) {
my $possible_parent = $current_category->{parent};
if (defined $possible_parent && defined $categories->{$possible_parent}) {
$target_category_slug = $categories->{$possible_parent}{slug};
}
}
for my $category_key (@sorted_categories) {
my $category = $categories->{$category_key};
if (defined $category->{parent}) {
next;
}
my $selected = defined($target_category_slug) && $category->{slug} eq $target_category_slug;
%><a class="<%=$selected && "selected" %>" href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><%
}
%></nav>

24
templates/page/_mobile_menu.html.ep Normal file
View File

@ -0,0 +1,24 @@
% my $categories = stash 'categories';
<nav class="mobile-shortcuts">
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
<div></div>
<a href="#mobile-foldable" class="menu-expand">
<img class="open-menu-icon" src="/img/hamburger-menu-yellow.png" alt="Expandir el menú."/>
<img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.png" alt="Expandir el menú."/>
</a>
</nav>
<nav class="mobile-foldable" id="mobile-foldable"><%
my $first = 1;
for my $category_key (sort {
$categories->{$a}{priority} <=> $categories->{$b}{priority}
} keys %$categories) {
my $category = $categories->{$category_key};
if (defined $category->{parent}) {
next;
}
%><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><div class="child-categories-mobile"><%
for my $child_category ($category->{children}->@*) {
%><a href="<%="/$child_category->{slug}"%>">* <%==$child_category->{menu_text}%></a><%
}%></div><%
}
%></nav>

2
templates/page/index.html.ep
View File

@ -6,7 +6,7 @@
%
% use BurguillosInfo::Posts;
%
% layout 'default', current_slug => $current_category->{slug};
% layout 'default', current_category_slug => $current_category->{slug};
% title $current_category->{title};
<div class="description">
<h1><%= $current_category->{title} %></h1>

2
templates/page/post.html.ep
View File

@ -6,7 +6,7 @@
% use BurguillosInfo::Posts;
% use BurguillosInfo::Categories;
% my $categories = BurguillosInfo::Categories->new->Retrieve;
% layout 'default', current_slug => $current_category->{slug}, categories => $categories;
% layout 'default', current_category_slug => $current_category->{slug}, categories => $categories;
% title $post->{title};
<div class="description">
<h2><%= $post->{title} %></h2>